Overview
The Navbar component provides a fixed-position navigation header with a responsive mobile menu. It features a neobrutalist design with bold borders, prominent shadows, and animated hamburger menu toggle.The Navbar is positioned fixed at the top of the viewport with
z-index: 50, ensuring it stays above other content while scrolling.Component Structure
The Navbar is built with React hooks and CSS Modules:- Location:
src/components/Navbar/Navbar.jsx - Styles:
src/components/Navbar/Navbar.module.css - Dependencies: Custom
Checkboxcomponent for mobile menu toggle
Implementation
Basic Usage
Full Component Code
State Management
The component uses a singleisOpen state to control the mobile menu visibility:
isOpen: Boolean controlling mobile menu open/closed state- Mobile menu automatically closes when navigation links are clicked
- Hamburger icon animates based on
isOpenstate
Navigation Links
The Navbar includes three main navigation elements:About Link
About Link
Standard text link styled with
.navLink class:- Hover effect adds primary color and underline
- Smooth scroll to #about section
- Font weight: 500
Download Resume Button
Download Resume Button
Get In Touch CTA
Get In Touch CTA
Primary CTA styled with
.ctaBtn class:- Filled with primary color by default
- Smooth scroll to #contact section
- Hover effect removes fill and adds border
CSS Module Styling
Key Classes
Responsive Behavior
Checkbox Component
The mobile menu toggle uses a custom animated hamburger icon: Location:src/components/Navbar/Checkbox.jsx
handleMenuToggle: Function to toggle menu stateisOpen: Boolean to control checked state and animation
Customization
Change Logo Text
Add More Navigation Links
Modify Colors
Update CSS variables in your global styles:Change Navbar Height
Design Pattern
The Navbar follows the neobrutalist design aesthetic:- Bold 2px borders in primary color
- Hard box shadows (no blur)
- Shadow offset animation on hover (
translate(2px, 2px)) - High contrast colors
- Uppercase typography
- Tight letter-spacing (-0.05em)
Accessibility
- Semantic
<header>and<nav>elements - Clickable logo returns to hero section
- Mobile menu closes on link click for better UX
- Hamburger menu uses hidden checkbox for keyboard accessibility
- All interactive elements have hover states
Performance Notes
- Fixed positioning uses GPU acceleration
- Transitions limited to transform and box-shadow (performant properties)
- CSS Modules provide scoped styles with no runtime cost
- Single state variable minimizes re-renders