Merge pull request #14 from josedario87/feat/persistent-desktop-navbar

feat: Add configurable persistent desktop navbar

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>