Header

The Header component serves as the primary navigation bar for the application. It features a floating, blurred-glass aesthetic with a responsive design that adapts for mobile and desktop views.

Overview

This component provides a fixed-position navigation experience. It includes the application branding, dynamic navigation links, theme switching capabilities, and user authentication triggers (Log in / Sign up).

Key Features

• Fixed Navigation: Sticks to the top of the viewport with a slight offset.
• Glassmorphism: Uses backdrop-blur and linear gradients for a modern UI depth.
• Responsive: Switches between a standard desktop navbar and a mobile-specific drawer/menu.
• Theme Support: Integrated ThemeToggle for switching between light and dark modes.

Usage

To use this component, import it into your Astro layout or page:

---
import Header from '@/components/Header.astro';
---

<Header />

Component Structure

The component is divided into three main functional zones:

1. Branding (Left): Contains the AppLogo and a screen-reader-only title.
2. Primary Navigation (Center): Desktop-only links rendered via the React/Solid/Vue Navbar component.
3. Utilities & Auth (Right): Includes the ThemeToggle, Auth buttons, and the NavMobile toggle.