From 331cad8cbcfa94a9b93624fe683decc7e26ff634 Mon Sep 17 00:00:00 2001
From: josedario87 <71241187+josedario87@users.noreply.github.com>
Date: Wed, 11 Jun 2025 05:04:52 -0600
Subject: [PATCH] Use topbar button style for mobile sidebar

---
 ui/src/components/ui/NavBar.vue | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index b21d26d..e1a15de 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -80,8 +80,10 @@ 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;">
       <!-- preserve spacing where the 'Núcleo' title used to be -->
-      <button class="close-btn h-8 w-8 flex items-center justify-center rounded-full border transition duration-200"
-              @click="ui.toggleSidebar">
+      <button
+        @click="ui.toggleSidebar"
+        class="hamburger-button inline-flex items-center justify-center h-9 w-9 rounded-md text-white transition"
+      >
         ✕
       </button>
     </div>
@@ -148,14 +150,27 @@ ul { list-style: none; padding-left: 0; }
   color: var(--text-color);
 }
 
-.close-btn {
-  border-color: var(--secondary-color);
-  color: var(--secondary-color);
+.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 */
 }
 
-.close-btn:hover {
-  background-color: var(--secondary-color);
-  color: var(--background-color);
+.hamburger-button:hover {
+  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;
 }
 
 .nav-link.active {