feat(navbar): enhance navbar with responsive, layout, and styling capabilities

[ravisuhag]

Overview

This issue proposes enhancements to the Navbar component to improve its flexibility, responsiveness, and visual customization options.

---

Proposed Features

1. Mobile Responsive Support

Intent: Enable the navbar to adapt gracefully to mobile viewports, allowing navigation items to collapse into a toggleable menu on smaller screens.

This is essential for building responsive applications without requiring custom implementations for mobile navigation.

---

2. Center Section

Intent: Provide a dedicated section for centered content within the navbar, enabling layouts where navigation items or branding are positioned in the middle.

This is a common pattern in marketing sites and dashboards where the center area displays primary navigation or page titles.

Possible API direction:

<Navbar>
  <Navbar.Start>...</Navbar.Start>
  <Navbar.Center>...</Navbar.Center>
  <Navbar.End>...</Navbar.End>
</Navbar>

---

3. Visual Variants

Intent: Allow different visual styles for the navbar to support various design contexts such as landing pages with transparent headers, modern glassmorphism effects, or minimal bordered styles.

Possible API direction:

<Navbar variant="solid" />       // Default with background
<Navbar variant="transparent" /> // No background color
<Navbar variant="blur" />        // Backdrop blur effect
<Navbar variant="bordered" />    // Border only, no shadow

---

4. Size Variants

Intent: Provide predefined size options to control the navbar's height and spacing, allowing compact navbars for dense UIs or spacious ones for marketing pages.

Possible API direction:

<Navbar size="sm" />  // Compact
<Navbar size="md" />  // Default
<Navbar size="lg" />  // Spacious

---

5. Hide on Scroll

Intent: Support a behavior where the navbar hides when the user scrolls down and reappears when scrolling up. This maximizes viewport space for content while keeping navigation accessible.

Possible API direction:

<Navbar hideOnScroll />

---

Notes

• The API examples above are suggestions for discussion and not final designs
• Each feature can be implemented incrementally
• Accessibility considerations should be maintained across all enhancements