nucleo000/planilla
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #51 from josedario87/codex/fix-navbar-bug-in-mobile-mode
All checks were successful
build-and-deploy / filter (push) Successful in 2s
Details
build-and-deploy / build (push) Successful in 10s
Details
build-and-deploy / deploy (push) Successful in 47s
Details

Browse Source 
Fix mobile navbar overlay issue
This commit is contained in:
josedario87
2025-06-11 05:06:08 -06:00
committed by GitHub
parent 9797fc0be4 331cad8cbc
commit 33fc3abdaa
1 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
ui/src/components/ui/NavBar.vue
View File

@@ -91,7 +91,13 @@ const handleLinkClick = (path) => {
<!-- encabezado dentro de sidebar --> <!-- encabezado dentro de sidebar -->
<div class="flex items-center justify-between px-4 py-4 md:px-5 md:py-4 md:border-none" <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;"> 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> <!-- preserve spacing where the 'Núcleo' title used to be -->
<button
@click="ui.toggleSidebar"
class="hamburger-button inline-flex items-center justify-center h-9 w-9 rounded-md text-white transition"
>
✕
</button>
</div> </div>
<!-- navegación --> <!-- navegación -->
@@ -156,14 +162,27 @@ ul { list-style: none; padding-left: 0; }
color: var(--text-color); color: var(--text-color);
} }
.close-btn { .hamburger-button {
border-color: var(--secondary-color); background-color: var(--primary-color);
color: var(--secondary-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 { .hamburger-button:hover {
background-color: var(--secondary-color); filter: brightness(1.15); /* Slightly more noticeable hover brightness */
color: var(--background-color); }
.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 { .nav-link.active {