Added first sidebar draft

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>