Added sidebar toggle

components/calendar/CurrentDate.vue

@@ -37,8 +37,8 @@ const isToday = computed(() => getDifferenceInDays(defaultDate, selectedDate.val
 
     <template #fallback>
       <div class="flex items-center gap-1">
-        <UiSkeleton class="h-8 w-64" />
+        <UiSkeleton class="h-8 w-64 max-md:max-w-full" />
-        <UiSkeleton class="h-6 w-28" />
+        <UiSkeleton class="max-md:hidden h-6 w-28" />
       </div>
     </template>
   </ClientOnly>

components/global/sidebar/Sidebar.vue

@@ -2,6 +2,7 @@
 import { PhCompass, PhGlobeHemisphereEast, PhHurricane, PhX } from "@phosphor-icons/vue"
 import type { SidebarMenuActionType, SidebarMenuIcon } from "./SidebarProps";
 import { cn } from "~/lib/utils";
+import { breakpointsTailwind } from "@vueuse/core"
 
 const { revealAdvancedSearch } = useCalendar()
 const { toggleSidebar } = useUiStore()
@@ -24,6 +25,10 @@ function computeMenuItemIcon(iconString: SidebarMenuIcon) {
   }
 }
 
+const breakpoints = useBreakpoints(
+  breakpointsTailwind
+)
+
 // const sidebarRef = ref(null)
 
 // onClickOutside(sidebarRef, () => {
@@ -35,32 +40,52 @@ function computeMenuItemIcon(iconString: SidebarMenuIcon) {
   <nav
     ref="sidebarRef"
     :class="cn(
-      ['md:relative md:isolate w-16 py-6 grid grid-rows-[1fr_auto] justify-center transition-all'], // Base appearance
+      ['md:relative md:isolate w-16 py-6 grid gap-4 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:justify-stretch max-md:px-4 max-md:py-4 max-md:absolute max-md:left-0 max-md:inset-0 max-md:z-50 max-md:w-30 max-md:max-w-full'], // Responsive behaviours
       {
-        'max-md:-translate-x-16': !isSidebarOpened,
+        'max-md:-translate-x-30': !isSidebarOpened,
         'max-md:-translate-x-0 shadow-navbar-dark dark:bg-slate-950': isSidebarOpened
       }
     )"
   >
-    <menu class="flex flex-col gap-4">
+    <menu class="flex flex-col gap-4 max-md:items-center">
-      <li class="mb-12">
+      <li class="mb-12 mt-4 max-md:self-start">
-        <UiButton variant="ghost" size="icon" class="rounded-full" @click="toggleSidebar">
+        <UiButton
-          <PhX size="24" />
+          variant="outline"
+          size="icon"
+          class="md:hidden size-9 border-background/30"
+          @click="toggleSidebar"
+        >
+          <PhX size="19" />
         </UiButton>
       </li>
 
-      <li>
+      <li class="max-md:self-start">
-        <UiTooltipProvider :delay-duration="50">
+        <UiTooltipProvider :delay-duration="50" :disabled="!breakpoints.md.value">
           <UiTooltip>
             <UiTooltipTrigger as-child>
-              <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
+              <UiButton
+                variant="ghost"
+                size="icon"
+                class="rounded-full max-md:hidden"
+                as-child
+              >
                 <RouterLink to="/explore">
                   <PhCompass size="24" weight="fill" />
                 </RouterLink>
               </UiButton>
+              <RouterLink
+                to="/explore"
+                class="md:hidden flex items-center gap-[.6ch] underline-offset-4 hover:underline"
+              >
+                <PhCompass size="22" weight="fill" />
+
+                <span class="text-[.9em]">
+                  {{ $t('pages.explore.menuLabel') }}
+                </span>
+              </RouterLink>
             </UiTooltipTrigger>
             <UiTooltipContent :side="'right'" :side-offset="6">
               <p>
@@ -106,9 +131,7 @@ function computeMenuItemIcon(iconString: SidebarMenuIcon) {
       </ClientOnly>
     </menu>
 
-    <div ref="userMenuRef">
+    <UserCTA />
-      <UserCTA />
-    </div>
   </nav>
 </template>