NAVBAR

[MasterIceZ]

This pull request introduces enhancements to the ButtonFd component, updates the Navbar component to include a collapsible menu, and integrates a client-side router in the WithNavbar layout. These changes improve functionality, styling, and navigation across the application.

Button Component Enhancements:

• Added a new variant option stroke-no-shadow in the ButtonFd component to provide a shadow-less stroke style.
• Defined styling for the stroke-no-shadow variant, specifically for the black color, with hover and disabled states.

Navbar Component Updates:

• Refactored the Navbar component to include a collapsible menu (nav-menu) with navigation links and a logout button using the ButtonFd component.
• Added JavaScript logic to toggle the visibility of the collapsible menu when clicking the hamburger buttons.

Layout Enhancements:

• Integrated the ClientRouter from astro:transitions into the WithNavbar layout for smoother client-side navigation. [1] [2]

[Copilot]

Pull Request Overview

This PR adds a new button style, refactors the Navbar to support a collapsible menu with a logout action, and enables client-side routing in the layout for smoother navigation.

• Introduces a stroke-no-shadow variant in ButtonFd for a no-shadow stroked button.
• Refactors Navbar.astro to include a hamburger-driven collapsible menu with navigation links and a logout button.
• Integrates ClientRouter into WithNavbar.astro to enable client-side page transitions.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
src/components/common/ButtonFd.astro	Added stroke-no-shadow to the variant type and defined its CSS styling for the black color.
src/components/firstdate/Navbar.astro	Refactored the main navbar, added a hidden collapsible menu with links and a logout button, and included toggle script.
src/layouts/firstdate/WithNavbar.astro	Imported and embedded ClientRouter for client-side navigation transitions.

Comments suppressed due to low confidence (3)

src/components/common/ButtonFd.astro:364

• [nitpick] The new stroke-no-shadow variant only defines styles for the black color. Either restrict this variant to black in the Props type or add style definitions for other colors to avoid inconsistent behavior.

  .button-container--stroke-no-shadow.button-container--black {

src/components/firstdate/Navbar.astro:52

• The new collapsible menu toggle logic isn’t covered by any tests. Consider adding unit or integration tests to verify that clicking the hamburger buttons correctly shows and hides the menu.

<script is:inline type="module">

src/components/firstdate/Navbar.astro:7

• The logo image is no longer wrapped in a link, so users cannot click it to return home. Consider re-adding an wrapper around the .

  <img src="/common/logo_freshmenfest.svg" alt="logo" />

[Copilot]

Using a GET link for logout can be susceptible to CSRF. Consider changing this to a POST form with a CSRF token to securely perform the logout action.