This commit enhances the behavior of the persistent desktop navbar.
Previously, if `desktopNavbarPersistent` was true, the main content
would always shift to accommodate the sidebar on medium screens and up.
Now, the content shifting is also conditional on available viewport width:
- The main content wrapper in `App.vue` now tracks `window.innerWidth`.
- A `SHIFT_THRESHOLD` is defined (currently 880px), calculated from
NAVBAR_WIDTH (240px) + MIN_CONTENT_WIDTH (640px).
- If `ui.sidebarOpen` and `ui.desktopNavbarPersistent` are both true,
the `md:pl-60` class (to shift content) is only applied if
`viewportWidth.value >= SHIFT_THRESHOLD`.
- If the viewport width is below this threshold (but still potentially
above the 'md' breakpoint), the persistent sidebar will overlay the
content, similar to a non-persistent or mobile sidebar, preventing
the main content area from becoming too cramped.
This provides a more refined and responsive user experience for you
if you enable the persistent navbar feature on varying screen sizes.
This commit addresses an issue where the main content area would shift
to the right on desktop when the sidebar was opened, regardless of the
`desktopNavbarPersistent` setting.
The layout logic in `App.vue` has been updated so that the `md:pl-60`
class (which adds left padding to the main content area) is now
applied only when both `ui.sidebarOpen` and `ui.desktopNavbarPersistent`
are true.
This ensures that:
- If `desktopNavbarPersistent` is true, the sidebar will take up
dedicated space, and the content will correctly shift.
- If `desktopNavbarPersistent` is false, the sidebar will overlay the
content on desktop, and the main content will no longer shift.
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 introduces a growing animation to the NucleoDataCard component.
- The animation is implemented using CSS keyframes and is triggered on hover.
- A smooth transition effect has also been added.
The README.md file has been updated to include information about this new feature under the UI section.
This commit introduces a new `NucleoDataCard.vue` component to centralize the common structure and styling of various card elements used throughout the UI. It also includes documentation for this new component.
The following existing card components have been refactored to use `NucleoDataCard.vue`:
- `ui/src/components/asistencias/cardAsistencia.vue`
- `ui/src/components/empleados/cardEmpleado.vue`
- `ui/src/components/planillas/cardPlanilla.vue`
- `ui/src/components/tareas/cardTarea.vue`
Key changes:
- Created `NucleoDataCard.vue` in `ui/src/components/ui/` with flexible props (title, status, fields, accentColor, backgroundColor, avatarUrl, observation, showEditButton, showDeleteButton) and slots (header, body, footer, actions) to accommodate different card designs.
- Updated `NucleoDataCard.vue` to directly use hex color values for `accentColor` and `backgroundColor` props for easier integration with your UI store.
- Refactored the listed existing card components to utilize `NucleoDataCard.vue`, passing data through props and customizing specific sections (like avatars or field icons) via slots.
- Ensured that all functionalities, including edit/delete actions and dynamic styling based on your UI store, are preserved in the refactored components.
- Added `ui/src/components/ui/README.md` with detailed documentation for `NucleoDataCard.vue`, covering its purpose, props, slots, events, and a usage example.
This centralization reduces code duplication, improves maintainability, and provides a consistent foundation for future card-based UI elements. The added documentation will help developers understand and use the new component effectively.
