From 4fce0d06def49c7a6e3746ff0bced4ff2edb7b4c Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Thu, 18 Dec 2025 03:01:14 +0000
Subject: [PATCH 1/2] feature: finally adding sliding sidebar (fist draft)

---
 resources/js/layouts/app/SidebarLayout.vue | 54 +++++++++++++++++-----
 1 file changed, 42 insertions(+), 12 deletions(-)

diff --git a/resources/js/layouts/app/SidebarLayout.vue b/resources/js/layouts/app/SidebarLayout.vue
index ddbb72d1..abdf4cc2 100644
--- a/resources/js/layouts/app/SidebarLayout.vue
+++ b/resources/js/layouts/app/SidebarLayout.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { usePage } from '@inertiajs/vue3'
-import { ChevronsUpDown, Menu as MenuIcon } from 'lucide-vue-next'
+import { useStorage } from '@vueuse/core'
+import {
+    ChevronsUpDown,
+    Menu as MenuIcon,
+    PanelLeftClose,
+    PanelLeftOpen
+} from 'lucide-vue-next'
 import { useAppLayout } from '@/composables/useAppLayout'
 import ClientOnly from '@/components/ClientOnly.vue'
 import Container from '@/components/Container.vue'
@@ -24,13 +30,17 @@ const {
     expandedKeys,
     userMenuItems,
 } = useAppLayout()
+
+const sidebarOpen = useStorage('desktop-sidebar-open', true)
+const toggleSidebar = () => {
+    sidebarOpen.value = !sidebarOpen.value
+}
 </script>
 
 <template>
     <div class="h-screen flex flex-col">
         <ClientOnly>
             <Teleport to="body">
-                <!-- Mobile drawer menu -->
                 <Drawer
                     v-model:visible="mobileMenuOpen"
                     position="right"
@@ -87,9 +97,9 @@ const {
         </header>
 
         <div class="flex-1">
-            <!-- Desktop Sidebar -->
             <aside
-                class="w-[18rem] inset-0 hidden lg:block fixed overflow-y-auto overflow-x-hidden dynamic-bg border-r dynamic-border"
+                class="w-[18rem] inset-0 hidden lg:block fixed overflow-y-auto overflow-x-hidden dynamic-bg border-r dynamic-border transition-transform duration-300 ease-in-out"
+                :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
             >
                 <div class="w-full h-full flex flex-col justify-between p-4">
                     <div class="space-y-6">
@@ -119,20 +129,40 @@ const {
                 </div>
             </aside>
 
-            <!-- Scrollable Content -->
-            <main class="flex flex-col h-full lg:pl-[18rem]">
+            <main
+                class="flex flex-col h-full transition-[padding] duration-300 ease-in-out"
+                :class="sidebarOpen ? 'lg:pl-[18rem]' : 'lg:pl-0'"
+            >
                 <Container
                     vertical
                     fluid
                 >
-                    <!-- Session-based Flash Messages -->
                     <FlashMessages />
 
-                    <!-- Breadcrumbs -->
-                    <Breadcrumb
-                        v-if="props.breadcrumbs.length"
-                        :model="props.breadcrumbs"
-                    />
+                    <div class="flex gap-4 items-center">
+                        <Button
+                            v-tooltip.right="`${sidebarOpen ? 'Collapse' : 'Expand'} Sidebar`"
+                            class="hidden lg:flex"
+                            severity="secondary"
+                            outlined
+                            @click="toggleSidebar()"
+                        >
+                            <template #icon>
+                                <PanelLeftClose
+                                    v-if="sidebarOpen"
+                                    class="size-5!"
+                                />
+                                <PanelLeftOpen
+                                    v-else
+                                    class="size-5!"
+                                />
+                            </template>
+                        </Button>
+                        <Breadcrumb
+                            v-if="props.breadcrumbs.length"
+                            :model="props.breadcrumbs"
+                        />
+                    </div>
 
                     <!-- Page Content -->
                     <slot />

From ee82444b6fea2a8e6efa9ee33c0f65ae8313004f Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sat, 20 Dec 2025 15:11:40 +0000
Subject: [PATCH 2/2] remove sidebar toggle icon size

---
 resources/js/layouts/app/SidebarLayout.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/resources/js/layouts/app/SidebarLayout.vue b/resources/js/layouts/app/SidebarLayout.vue
index abdf4cc2..45496812 100644
--- a/resources/js/layouts/app/SidebarLayout.vue
+++ b/resources/js/layouts/app/SidebarLayout.vue
@@ -148,14 +148,8 @@ const toggleSidebar = () => {
                             @click="toggleSidebar()"
                         >
                             <template #icon>
-                                <PanelLeftClose
-                                    v-if="sidebarOpen"
-                                    class="size-5!"
-                                />
-                                <PanelLeftOpen
-                                    v-else
-                                    class="size-5!"
-                                />
+                                <PanelLeftClose v-if="sidebarOpen" />
+                                <PanelLeftOpen v-else />
                             </template>
                         </Button>
                         <Breadcrumb