Skip to main content

​
Navbar

The Navbar component provides a persistent navigation bar with support for theming, authentication, and interaction tracking. It features a responsive design with a mobile menu and displays the total number of tracked interactions.

​
Features

  • Sticky positioning with backdrop blur effect
  • Responsive design with hamburger menu for mobile
  • Theme toggle (light/dark mode)
  • Authentication integration showing user state and logout
  • Interaction counter displaying total tracked interactions
  • Active link highlighting based on current route
  • Mobile menu with smooth animations

​
Usage

The Navbar is typically placed in the root layout and appears on all pages: 
import { Navbar } from './components/Navbar';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Navbar />
        <main>{children}</main>
      </body>
    </html>
  );
}
The Navbar includes the following navigation links (defined in Navbar.tsx:12-18):
LinkPathIconDescription
Home/HomeComponent showcase
Docs/docsFileTextComponent documentation
Dashboard/dashboardBarChart3Analytics dashboard
Exports/exportsDownloadData export page
Status/statusActivitySystem health check

​
Dependencies

The Navbar component integrates with several contexts and stores:

​
Theme Context

import { useTheme } from '../context/ThemeContext';

const { resolvedTheme, toggleTheme } = useTheme();
Provides theme switching functionality between light and dark modes.

​
Interaction Context

import { useInteractions } from '../context/InteractionContext';

const { totalInteractions } = useInteractions();
Displays the total number of tracked component interactions.

​
Auth Store

import { useAuthStore } from '../store/authStore';

const { logout, isAuthenticated, user } = useAuthStore();
Manages authentication state and displays user information.

​
Component Structure

​
Desktop Navigation

  • Logo with link to home
  • Navigation links with icons
  • Interaction counter badge
  • Theme toggle button
  • Authentication section (login button or user info with logout)

​
Mobile Navigation

  • Hamburger menu button
  • Collapsible navigation menu
  • Same links as desktop in a vertical layout
  • Closes automatically on link click

​
Styling

The Navbar uses design tokens for consistent styling: 
className="sticky top-0 z-40 w-full border-b border-border bg-card/80 backdrop-blur-md"
Key style features:
  • Sticky positioning (sticky top-0 z-40) keeps navbar visible on scroll
  • Backdrop blur (backdrop-blur-md) creates a frosted glass effect
  • Semi-transparent background (bg-card/80) for depth
  • Border (border-b border-border) separates from content
  • Transition animations on hover and active states
Active links are highlighted using Next.js usePathname(): 
const pathname = usePathname();

className={`
  ${pathname === link.href
    ? 'bg-primary text-primary-foreground'
    : 'text-muted-foreground hover:text-foreground hover:bg-secondary'
  }
`}

​
Mobile Menu

The mobile menu is controlled by state and includes animations: 
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

{mobileMenuOpen && (
  <div className="md:hidden py-4 border-t border-border animate-slide-down">
    {/* Mobile navigation items */}
  </div>
)}

​
Icons

The Navbar uses icons from lucide-react (imported at line 9):
  • Home - Home page
  • FileText - Documentation
  • BarChart3 - Dashboard
  • Download - Exports
  • Activity - Status
  • Component - Logo
  • MousePointerClick - Interaction counter
  • Moon/Sun - Theme toggle
  • Menu/X - Mobile menu toggle

​
Authentication Integration

The Navbar displays different UI based on authentication state:
Shows user’s name and a logout button:
{isAuthenticated ? (
  <div className="flex items-center gap-2">
    <span className="text-sm text-muted-foreground">{user?.nombre}</span>
    <Button variant="secondary" onClick={logout} size="sm">Logout</Button>
  </div>
) : (
  // Login button
)}

​
Accessibility

  • Theme toggle has descriptive aria-label that changes based on current theme
  • Mobile menu toggle has aria-label="Toggle menu"
  • All interactive elements are keyboard accessible
  • Active links are visually distinguished for screen readers

​
Best Practices

The Navbar should be rendered once at the root layout level, not on individual pages, to maintain consistent state across navigation.
The interaction counter updates in real-time as users interact with components throughout the application.

​
Source Code

The complete Navbar implementation can be found at client/app/components/Navbar.tsx:20-149.

Build docs developers (and LLMs) love

Get started for freeTalk to us