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

Refactor: Update Navbar and TopBar UI

Browse Source 
This commit implements the following changes:

1. Removed the close button (✕) from within the NavBar component (`ui/src/components/ui/NavBar.vue`). The sidebar is now exclusively controlled by the hamburger icon in the TopBar.
2. Moved the hamburger menu button in the TopBar component (`ui/src/components/ui/TopBar.vue`) to the left side of the application title ("Núcleo").
3. Improved the visual styling of the hamburger button in `TopBar.vue` with increased padding, consistent border-radius, and clearer hover and focus states for better usability and accessibility.

These changes address the issue of redundant close buttons and aim to provide a cleaner and more intuitive navigation experience.
This commit is contained in:
google-labs-jules[bot]
2025-06-10 06:13:26 +00:00
parent 21274ba1e0
commit dcd6f3091b
2 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

27
ui/src/components/ui/TopBar.vue
View File

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