From 53a0e1491d99bd080afc6e20d1ef243d939bb9f0 Mon Sep 17 00:00:00 2001
From: Darko Gjorgjijoski <dg@darkog.com>
Date: Sat, 4 Apr 2026 04:00:00 +0200
Subject: [PATCH] Refine sidebar collapse toggle to bottom toolbar

Move collapse button from header into a sticky bottom toolbar in
the sidebar. Chevron double-left/right icon aligned to sidebar edge.
Toolbar area uses mt-auto with border-t separator and glass backdrop,
ready for additional action buttons in the future.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../admin/layouts/partials/TheSiteHeader.vue  | 41 ++++++++++---------
 .../admin/layouts/partials/TheSiteSidebar.vue | 22 +++++-----
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
index 06369b05..67f6158c 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
@@ -17,27 +17,28 @@
       to-header-to
     "
   >
-    <router-link
-      :to="companyStore.isAdminMode ? '/admin/administration/dashboard' : '/admin/dashboard'"
-      class="
-        float-none
-        text-lg
-        not-italic
-        font-black
-        tracking-wider
-        text-white
-        brand-main
-        md:float-left
-        font-base
-        hidden
-        md:block
-      "
-    >
-      <img v-if="adminLogo" :src="adminLogo" class="h-6" />
-      <MainLogo v-else class="h-6" light-color="white" dark-color="white" />
-    </router-link>
+    <div class="flex items-center">
+      <router-link
+        :to="companyStore.isAdminMode ? '/admin/administration/dashboard' : '/admin/dashboard'"
+        class="
+          text-lg
+          not-italic
+          font-black
+          tracking-wider
+          text-white
+          brand-main
+          font-base
+          hidden
+          md:block
+        "
+      >
+        <img v-if="adminLogo" :src="adminLogo" class="h-6" />
+        <MainLogo v-else class="h-6" light-color="white" dark-color="white" />
+      </router-link>
 
-    <!-- toggle button-->
+    </div>
+
+    <!-- Mobile toggle button-->
     <div
       :class="{ 'is-active': globalStore.isSidebarOpen }"
       class="
diff --git a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
index 1da70a7d..9838b99b 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
@@ -124,7 +124,7 @@
     class="
       hidden
       h-screen
-      pb-16
+      pb-0
       overflow-y-auto overflow-x-hidden
       bg-surface/80 backdrop-blur-xl
       border-r border-white/10
@@ -180,20 +180,22 @@
       </router-link>
     </div>
 
-    <!-- Collapse Toggle -->
-    <div class="sticky bottom-0 mt-auto pt-2 pb-2 bg-surface/80 backdrop-blur-xl">
+    <!-- Bottom toolbar -->
+    <div class="mt-auto sticky bottom-0 border-t border-white/10 bg-surface/80 backdrop-blur-xl p-2 flex flex-col items-center gap-1">
       <button
-        class="mx-3 px-3 py-2 w-[calc(100%-1.5rem)] flex items-center rounded-lg text-subtle hover:text-body hover:bg-hover transition-colors"
-        :class="globalStore.isSidebarCollapsed ? '!justify-center !mx-2 !px-0' : ''"
+        v-tooltip="globalStore.isSidebarCollapsed ? { content: $t('general.collapse'), placement: 'right' } : null"
+        :class="[
+          globalStore.isSidebarCollapsed
+            ? 'w-10 h-10 justify-center'
+            : 'w-full px-3 h-10 justify-end',
+        ]"
+        class="flex items-center rounded-lg text-subtle hover:text-body hover:bg-hover transition-colors"
         @click="globalStore.toggleSidebarCollapse()"
       >
         <BaseIcon
-          :name="globalStore.isSidebarCollapsed ? 'ChevronRightIcon' : 'ChevronLeftIcon'"
-          class="shrink-0 h-5 w-5"
+          :name="globalStore.isSidebarCollapsed ? 'ChevronDoubleRightIcon' : 'ChevronDoubleLeftIcon'"
+          class="w-4 h-4 shrink-0"
         />
-        <span v-if="!globalStore.isSidebarCollapsed" class="ml-3 text-sm font-medium whitespace-nowrap">
-          {{ $t('general.collapse') }}
-        </span>
       </button>
     </div>
   </div>