Header Component
The Header component is a versatile and responsive navigation bar for Next.js applications. It features a logo, navigation links, a theme toggler, and a mobile-friendly menu for smaller screens.
Importing the Component
To use the Header component in your Next.js application, import it as follows:
import Header from '@/components/Header';
Basic Usage
Here's a basic example of how to use the Header component:
import Header from '@/components/Header';
const Layout = ({ children }) => {
return (
<div>
<Header />
<main>{children}</main>
</div>
);
};
Functionality
The Header component provides the following functionality:
- Displays a logo and brand name linked to the home page.
- Shows navigation links for desktop view (Pricing and Login).
- Includes a "Get Started" or "Go to app" button based on user login status.
- Provides a theme toggler for switching between light and dark modes.
- Implements a responsive design with a mobile menu for smaller screens.
- Uses a Sheet component for the mobile menu, which slides in from the left.
Dependencies
This component relies on the following:
- Next.js (for routing and Link component)
- lucide-react (for the Menu icon)
- Custom UI components (Sheet, Button, ThemeToggler)
- SiteConfig for site-specific information
- Routes object for page URLs
- useGetStarted custom hook for handling user authentication state and actions
State Management
The component uses React's useState
hook to manage the state of the mobile menu:
const [isMenuOpen, setMenuOpen] = useState(false);
It also utilizes the useGetStarted
hook to manage user authentication state:
const { isLogged, isLoginLoading, isLoadingCta, onGetStartedClick } =
useGetStarted();
Styling
The component uses Tailwind CSS for styling. Key styling features include:
- Responsive layout using flexbox and hidden/block classes for different screen sizes.
- Custom background colors for light and dark modes.
- Rounded corners and padding for the header container.
- Sticky positioning with a high z-index to keep the header visible while scrolling.
Customization
To customize the Header component:
- Modify the
SiteConfig
object to update the site name. - Update the
Routes
object to change the URLs for different pages. - Adjust the Tailwind CSS classes to modify the styling.
- Replace the Logo component with your own implementation.
- Customize the ThemeToggler component as needed.
Accessibility
The component implements several accessibility features:
- Uses semantic HTML elements like
<nav>
for navigation. - Includes a screen reader-only text for the mobile menu toggle button.
- Utilizes the
Button
component, which should have built-in accessibility features.
To further improve accessibility:
- Ensure all interactive elements are keyboard accessible.
- Add appropriate ARIA labels to elements that may not be clear to screen readers.
Best Practices and Improvements
- Consider extracting the mobile menu into a separate component for better code organization.
- Implement internationalization (i18n) for multi-language support.
- Add unit tests to ensure the component behaves correctly under different states.
- Consider adding a dropdown for additional navigation items if the header becomes crowded.
Example Usage in a Layout
Here's an example of how you might use the Header component in a layout:
import Header from '@/components/Header';
import Footer from '@/components/Footer';
const Layout = ({ children }) => {
return (
<div className='flex flex-col min-h-screen'>
<Header />
<main className='flex-grow'>{children}</main>
<Footer />
</div>
);
};
export default Layout;
This example demonstrates how to use the Header component within a layout, ensuring it appears at the top of every page that uses this layout.
By using the Header component, you can easily add a responsive and feature-rich navigation bar to your Next.js application. Remember to update the content, links, and styling to match your specific brand and design requirements.