From 5622b3335d42d7c411149765a7cce5bc57a7bb7c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 31 May 2025 07:24:11 +0000
Subject: [PATCH] feat: Add configurable persistent desktop navbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit introduces a new behavior for the desktop navbar, allowing it to remain open until the menu button is clicked again. This behavior is controlled by a new option in your settings.

Changes include:

- **Configuration Store (`useUi.js`):**
    - Added a new boolean state `desktopNavbarPersistent` (default: `false`).
    - Added an action `setDesktopNavbarPersistent` to modify this state.
    - Ensured this setting is persisted to and loaded from local storage.

- **TopBar Component (`TopBar.vue`):**
    - Verified that the hamburger menu button is visible on desktop screens to allow toggling the navbar.

- **NavBar Component (`NavBar.vue`):**
    - Modified the navigation link click handler:
        - If `desktopNavbarPersistent` is true and in desktop view (>=768px), clicking a link will no longer close the sidebar.
        - In mobile view or when `desktopNavbarPersistent` is false, links will still close the sidebar.
    - The '✕' close button in the NavBar continues to toggle the sidebar visibility.

- **Settings View (`SettingsView.vue`):**
    - Added a new checkbox in the "General" settings section to allow you to enable or disable the "Persistent Desktop Navbar" feature.

This addresses the issue where you wanted the navbar to be less intrusive and only close upon an explicit second click of the menu button in desktop environments.
---
 ui/src/components/ui/NavBar.vue | 11 ++++++++++-
 ui/src/stores/useUi.js          |  6 ++++++
 ui/src/views/SettingsView.vue   |  5 +++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index 957b1d5..c305835 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -21,6 +21,15 @@ watch(route, v => (activePath.value = v.path))
 
 // clases dinámicas p/ mostrar / ocultar barra
 const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-translate-x-full')
+
+const handleLinkClick = () => {
+  // Close sidebar if desktopNavbarPersistent is false or if it's mobile view (width < 768px)
+  // Assuming 768px is the 'md' breakpoint.
+  if (!ui.desktopNavbarPersistent || window.innerWidth < 768) {
+    ui.closeSidebar()
+  }
+  // Otherwise, (desktopNavbarPersistent is true AND width >= 768px), do nothing to keep sidebar open.
+}
 </script>
 
 <template>
@@ -53,7 +62,7 @@ const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-trans
             :to="l.to"
             class="nav-link flex items-center gap-3 w-full px-3 py-2 rounded-md font-medium transition group"
             :class="activePath.startsWith(l.to) ? 'active' : ''"
-            @click="ui.closeSidebar()"
+            @click="handleLinkClick"
           >
             <span class="text-lg" aria-hidden="true">{{ l.icon }}</span>
             <span class="truncate">{{ l.label }}</span>
diff --git a/ui/src/stores/useUi.js b/ui/src/stores/useUi.js
index 9a642c0..6aae6ae 100644
--- a/ui/src/stores/useUi.js
+++ b/ui/src/stores/useUi.js
@@ -23,6 +23,7 @@ const appearanceSettingKeys = [
   'tableBgColorPlanillas',
   'tableBgColorAsistencias',
   'tableBgColorConfiguracion',
+  'desktopNavbarPersistent',
 ]
 
 const loadSettingsFromLocalStorage = () => {
@@ -90,6 +91,7 @@ export const useUi = defineStore('ui', {
       tableBgColorPlanillas: '#FFFFFF',
       tableBgColorAsistencias: '#FFFFFF',
       tableBgColorConfiguracion: '#FFFFFF',
+      desktopNavbarPersistent: false,
     }
 
     const loadedSettings = loadSettingsFromLocalStorage()
@@ -197,6 +199,10 @@ export const useUi = defineStore('ui', {
     setTableBgColorConfiguracion(color) {
       this.tableBgColorConfiguracion = color
       _saveAppearanceState(this)
+    },
+    setDesktopNavbarPersistent(enabled) {
+      this.desktopNavbarPersistent = !!enabled // Ensure boolean
+      _saveAppearanceState(this)
     }
   },
 })
diff --git a/ui/src/views/SettingsView.vue b/ui/src/views/SettingsView.vue
index fb7fe97..35331e5 100644
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -21,6 +21,11 @@
           <input type="checkbox" id="animationsEnabled" v-model="ui.animationsEnabled" @change="ui.setAnimationsEnabled($event.target.checked)"
                  class="custom-checkbox relative w-10 h-5 appearance-none bg-gray-300 dark:bg-gray-600 rounded-full cursor-pointer transition-colors duration-300 ease-in-out checked:bg-[var(--primary-color)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--primary-color)] focus:ring-offset-[var(--background-color)]">
         </div>
+        <div class="setting-item flex items-center justify-between mt-4 md:mt-0 md:pt-6">
+          <label for="desktopNavbarPersistent" class="text-sm font-medium">Persistent Desktop Navbar</label>
+          <input type="checkbox" id="desktopNavbarPersistent" v-model="ui.desktopNavbarPersistent" @change="ui.setDesktopNavbarPersistent($event.target.checked)"
+                 class="custom-checkbox relative w-10 h-5 appearance-none bg-gray-300 dark:bg-gray-600 rounded-full cursor-pointer transition-colors duration-300 ease-in-out checked:bg-[var(--primary-color)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--primary-color)] focus:ring-offset-[var(--background-color)]">
+        </div>
       </div>
     </section>