Merge pull request #47 from josedario87/ui/navbar-topbar-redesign

UI/navbar topbar redesign

ui/src/App.vue

@@ -64,7 +64,7 @@ const transitionDurationStyle = computed(() => {
   <!-- wrapper: deja espacio para TopBar (pt-14 = 56px) y, en desktop, para NavBar (pl-60) -->
   <div :class="[
     'pt-14 min-h-screen transition-[padding-left] duration-200',
-    ui.sidebarOpen ? 'md:pl-60' : '',
+    (ui.sidebarOpen && ui.desktopNavbarPersistent) ? 'md:pl-60' : '',
     // The global style.css will handle base background and text color via body styling
     // but we can keep specific overrides here if needed or theme classes.
     // ui.theme === 'dark' ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900'

ui/src/components/ui/NavBar.vue

@@ -80,10 +80,6 @@ const handleLinkClick = () => {
     <div class="flex items-center justify-between px-4 py-4 md:px-5 md:py-4 md:border-none"
          style="border-bottom-color: var(--secondary-color); border-bottom-width: 1px;">
       <span class="text-lg font-semibold md:hidden" style="color: var(--primary-color);">Núcleo</span>
-      <button class="close-btn h-8 w-8 flex items-center justify-center rounded-full border transition duration-200"
-              @click="ui.toggleSidebar">
-        ✕
-      </button>
     </div>
 
     <!-- navegación -->

ui/src/components/ui/TopBar.vue

@@ -7,26 +7,39 @@ const ui = useUi()
   <!-- barra superior fija -->
   <header class="fixed top-0 left-0 right-0 h-14 flex items-center justify-between px-4 md:px-6 z-50 shadow-sm"
           :style="{ backgroundColor: 'var(--background-color)', borderBottom: '1px solid var(--secondary-color)' }">
-    <!-- título -->
-    <h1 class="text-lg font-semibold tracking-wide select-none" :style="{ color: 'var(--primary-color)' }">Núcleo</h1>
-
     <!-- botón hamburguesa (visible solo en mobile) -->
     <button
       @click="ui.toggleSidebar"
       class="hamburger-button inline-flex items-center justify-center h-9 w-9 rounded-md text-white transition">
       &#9776;
     </button>
+
+    <!-- título -->
+    <h1 class="text-lg font-semibold tracking-wide select-none" :style="{ color: 'var(--primary-color)' }">Núcleo</h1>
   </header>
 </template>
 
 <style scoped>
 .hamburger-button {
   background-color: var(--primary-color);
+  color: white; /* Assuming primary-color is dark enough for white text */
+  padding: 0.5rem; /* Increased padding */
+  border-radius: 0.375rem; /* Consistent border radius */
+  transition: background-color 0.2s ease-in-out, filter 0.2s ease-in-out;
+  line-height: 1; /* Ensure icon is centered if it's text-based */
 }
+
 .hamburger-button:hover {
-  filter: brightness(1.1); /* Slight lighten/darken based on primary color */
+  filter: brightness(1.15); /* Slightly more noticeable hover brightness */
+}
+
+.hamburger-button:focus {
+  outline: 2px solid var(--primary-color); /* Simple outline for focus */
+  outline-offset: 2px; /* Offset outline slightly */
+}
+
+.hamburger-button:focus-visible { /* More modern focus indication */
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
 }
-/* Alternative hover if primary is very light or very dark, requiring specific color adjustment */
-/* .hamburger-button:hover { background-color: var(--primary-color-hover); } */
-/* Ensure --primary-color-hover is defined or calculated based on --primary-color if this approach is used */
 </style>