feat: Add configurable persistent desktop navbar

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

@@ -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>

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)
     }
   },
 })

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>