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.
