Added first sidebar draft

components/calendar/SearchCTA.vue

@@ -2,7 +2,7 @@
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { PhMagnifyingGlass } from "@phosphor-icons/vue"
 
-const { revealAdvancedSearch, } = useCalendar()
+const { revealAdvancedSearch } = useCalendar()
 
 const breakpoints = useBreakpoints(
   breakpointsTailwind

components/calendar/menu/Menu.vue

@@ -16,7 +16,10 @@ const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
         <li>
           <LazyCalendarDialogQuickCreateEvent v-if="!isReadOnly" />
         </li>
-        <li>
+        <li class="md:hidden">
+          <SidebarToggle />
+        </li>
+        <li class="max-md:hidden">
           <LazyCalendarMenuToday v-if="defaultDate" />
         </li>
         <li class="ml-4">

components/calendar/menu/MenuSubnav.vue

@@ -139,7 +139,7 @@ function toFutureFar(): void {
 
 <template>
   <div class="flex gap-2">
-    <div class="grid items-end w-40 px-4 py-2 bg-white dark:bg-black border-border border-x-[1px] border-t-[1px] rounded-t-sm text-sm transition-colors">
+    <div class="grid items-center w-40 px-3 md:px-4 py-2 bg-white dark:bg-black border-border border-x-[1px] border-t-[1px] rounded-t-sm text-sm max-md:text-xs transition-colors">
       <ClientOnly>
         <span>{{ currentDate.currentDateTitle }}</span>
 

components/global/sidebar/Sidebar.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { PhCompass, PhGlobeHemisphereEast, PhHurricane, PhList } from "@phosphor-icons/vue"
+import { PhCompass, PhGlobeHemisphereEast, PhHurricane, PhX } from "@phosphor-icons/vue"
 import type { SidebarMenuActionType, SidebarMenuIcon } from "./SidebarProps";
+import { cn } from "~/lib/utils";
 
 const { revealAdvancedSearch } = useCalendar()
-const { currentMenu } = storeToRefs(useUiStore())
+const { toggleSidebar } = useUiStore()
+const { currentMenu, isSidebarOpened } = storeToRefs(useUiStore())
 
 function handleMenuItemAction(actionType: SidebarMenuActionType) {
   if (actionType === "event-search") {
@@ -21,14 +23,32 @@ function computeMenuItemIcon(iconString: SidebarMenuIcon) {
       return PhCompass
   }
 }
+
+// const sidebarRef = ref(null)
+
+// onClickOutside(sidebarRef, () => {
+//   isSidebarOpened.value = false
+// })
 </script>
 
 <template>
-  <nav class="w-16 py-6 border-r-[1px] bg-indigo-700 dark:bg-black text-white border-r-indigo-700 dark:border-r-indigo-950 grid grid-rows-[1fr_auto] justify-center transition-colors after:opacity-50 after:contrast-125 dark:after:opacity-75 dark:after:contrast-175 after:-hue-rotate-60">
+  <nav
+    ref="sidebarRef"
+    :class="cn(
+      ['md:relative md:isolate w-16 py-6 grid grid-rows-[1fr_auto] justify-center transition-all'], // Base appearance
+      ['after:opacity-50 after:contrast-125 dark:after:opacity-75 dark:after:contrast-175 after:-hue-rotate-60'], // After styling
+      ['border-r-[1px] bg-indigo-700 dark:bg-black text-white border-r-indigo-700 dark:border-r-indigo-950 shadow-navbar-light dark:shadow-navbar-dark'], // Colours
+      ['max-md:absolute max-md:left-0 max-md:inset-0 max-md:z-50'], // Responsive behaviours
+      {
+        'max-md:-translate-x-16': !isSidebarOpened,
+        'max-md:-translate-x-0 shadow-navbar-dark dark:bg-slate-950': isSidebarOpened
+      }
+    )"
+  >
     <menu class="flex flex-col gap-4">
       <li class="mb-12">
-        <UiButton variant="ghost" size="icon" class="rounded-full" @click="console.log">
-          <PhList size="27" />
+        <UiButton variant="ghost" size="icon" class="rounded-full" @click="toggleSidebar">
+          <PhX size="24" />
         </UiButton>
       </li>
 
@@ -86,15 +106,14 @@ function computeMenuItemIcon(iconString: SidebarMenuIcon) {
       </ClientOnly>
     </menu>
 
-    <UserCTA />
+    <div ref="userMenuRef">
+      <UserCTA />
+    </div>
   </nav>
 </template>
 
 <style lang="scss" scoped>
 nav {
-  position: relative;
-  isolation: isolate;
-
   &::after {
     display: block;
     content: '';

components/global/sidebar/SidebarToggle.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { PhList } from "@phosphor-icons/vue"
+
+const { toggleSidebar } = useUiStore()
+</script>
+
+<template>
+  <UiButton
+    size="icon"
+    variant="outline"
+    @click="toggleSidebar"
+  >
+    <PhList size="19" weight="light" />
+  </UiButton>
+</template>