Added sidebar to left side of calendar view

src/components/calendar/CalendarCurrentDate.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { getRelativeString } from '@/models/Date'
+import { useCalendar } from '@/stores/CalendarStore'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+import { PhMapPin } from '@phosphor-icons/vue'
+
+const { defaultDate, getFormattedDateTitle } = useCalendar()
+const { selectedDate } = storeToRefs(useCalendar())
+
+const mainDateTitle = computed(() => getFormattedDateTitle(selectedDate.value, true))
+
+const dateDifference = computed(() => getRelativeString(defaultDate, selectedDate.value))
+</script>
+
+<template>
+  <h1 class="text-2xl font-bold flex items-center gap-1">
+    <PhMapPin size="26" weight="bold" /> {{ mainDateTitle }}
+  </h1>
+  <h2 class="text-lg italic opacity-75">
+    {{ dateDifference }}
+  </h2>
+</template>

src/components/calendar/CalendarMenu.vue

@@ -1,60 +1,43 @@
 <script lang="ts" setup>
-import { getRelativeString } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
 
-import { PhMapPin } from '@phosphor-icons/vue'
 import CalendarMenuNav from './CalendarMenuNav.vue'
 import CalendarMenuToday from './CalendarMenuToday.vue'
 import CalendarSwitch from './CalendarSwitch.vue'
+import CalendarCurrentDate from './CalendarCurrentDate.vue'
+
 import CalendarSearch from './search/CalendarSearch.vue'
 
-const { defaultDate, getFormattedDateTitle, currentDate } = useCalendar()
-const { selectedDate } = storeToRefs(useCalendar())
-
-const mainDateTitle = computed(() => getFormattedDateTitle(selectedDate.value, true))
-
-const dateDifference = computed(() => getRelativeString(defaultDate, selectedDate.value))
+const { currentDate } = useCalendar()
 </script>
 
 <template>
-  <header class="border-slate-700 border-b-[1px]">
-    <div class="pt-4 container">
-      <div class="grid md:grid-cols-12 items-center">
-        <div class="md:col-span-9">
-          <div class="flex items-center gap-6">
-            <menu class="flex items-center gap-2">
-              <li>
-                <CalendarSwitch />
-              </li>
-              <li>
-                <CalendarMenuToday />
-              </li>
-              <li>
-                <CalendarMenuNav />
-              </li>
-            </menu>
-            <div>
-              <h1 class="text-2xl font-bold flex items-center gap-1">
-                <PhMapPin size="26" weight="bold" /> {{ mainDateTitle }}
-              </h1>
-              <h2 class="text-lg italic opacity-75">
-                {{ dateDifference }}
-              </h2>
-            </div>
-          </div>
-        </div>
-        <div class="md:col-span-3 flex justify-end">
+  <header class="pt-4 border-slate-700 border-b-[1px]">
+    <div class="px-6 flex justify-between">
+      <menu class="flex items-center gap-2">
+        <li class="flex items-center">
+          <CalendarMenuToday />
+        </li>
+        <li>
+          <CalendarMenuNav />
+        </li>
+        <li class="ml-6">
+          <CalendarCurrentDate />
+        </li>
+      </menu>
+
+      <menu class="flex items-center gap-2">
+        <li>
           <CalendarSearch />
-        </div>
-      </div>
+        </li>
+        <li>
+          <CalendarSwitch />
+        </li>
+      </menu>
     </div>
-    <div class="container">
-      <div class="flex">
-        <div class="px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
-          <span class="text-sm">{{ currentDate.currentDateTitle }}</span>
-        </div>
+    <div class="ml-12 flex">
+      <div class="px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+        <span class="text-sm">{{ currentDate.currentDateTitle }}</span>
       </div>
     </div>
   </header>

src/components/calendar/Sidebar.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { PhList, PhHouse } from '@phosphor-icons/vue'
+import Button from '../ui/button/Button.vue'
+</script>
+
+<template>
+  <nav class="w-16 py-6 border-r-[1px] border-l-slate-500 grid justify-center">
+    <menu>
+      <li class="mb-12">
+        <Button variant="ghost" size="icon" @click="console.log" class="rounded-full">
+          <PhList size="27" />
+        </Button>
+      </li>
+      <li>
+        <Button variant="ghost" size="icon" class="rounded-full" as-child>
+          <RouterLink to="/">
+            <PhHouse size="24" weight="fill" />
+          </RouterLink>
+        </Button>
+      </li>
+    </menu>
+  </nav>
+</template>

src/components/ui/card/Card.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { RouterLink } from 'vue-router'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  link?: string
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('rounded-lg border bg-card text-card-foreground shadow-sm transition-all', props.class, {
+        'relative outline outline-2 outline-offset-4 outline-transparent hover:bg-sky-950 hover:-translate-y-[.2rem] focus-within:outline-sky-900':
+          props.link
+      })
+    "
+  >
+    <slot />
+
+    <RouterLink
+      v-if="props.link"
+      :to="props.link"
+      class="absolute inset-0 focus-visible:outline-none"
+    />
+  </div>
+</template>

src/components/ui/card/CardContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0 text-muted-foreground', props.class)">
+    <slot />
+  </div>
+</template>

src/components/ui/card/CardDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground mt-1', props.class)">
+    <slot />
+  </p>
+</template>

src/components/ui/card/CardFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

src/components/ui/card/CardHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 px-6 pt-6 pb-3', props.class)">
+    <slot />
+  </div>
+</template>

src/components/ui/card/CardTitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h3 :class="cn('text-2xl font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </h3>
+</template>

src/components/ui/card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardFooter } from './CardFooter.vue'