Navbar

<!-- Standard Navbar -->
<nav class="lyd-navbar">
    <div class="lyd-navbar-container">
        <a href="#" class="lyd-navbar-brand">
            <img src="logo.svg" alt="Logo" class="lyd-navbar-logo">
        </a>
        
        <ul class="lyd-navbar-menu">
            <li class="lyd-navbar-item">
                <a href="#" class="lyd-navbar-link active">Home</a>
            </li>
            <li class="lyd-navbar-item">
                <a href="#" class="lyd-navbar-link">About</a>
            </li>
        </ul>
        
        <div class="lyd-navbar-actions">
            <button class="lyd-button primary">Sign Up</button>
        </div>
        
        <button class="lyd-navbar-toggle" onclick="toggleMobileMenu(this)">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </div>
</nav>

<!-- Navbar with Dropdown -->
<li class="lyd-navbar-item">
    <a href="#" class="lyd-navbar-link">
        Services
        <svg>...</svg>
    </a>
    <div class="lyd-navbar-dropdown">
        <a href="#" class="lyd-navbar-dropdown-item">Service 1</a>
        <a href="#" class="lyd-navbar-dropdown-item">Service 2</a>
    </div>
</li>

// Toggle mobile menu
function toggleMobileMenu(button) {
    button.classList.toggle('active');
    const menu = button.parentElement.querySelector('.lyd-navbar-menu');
    menu.classList.toggle('active');
}

// Handle active state
document.querySelectorAll('.lyd-navbar-link').forEach(link => {
    link.addEventListener('click', function(e) {
        // Remove active from all links
        document.querySelectorAll('.lyd-navbar-link').forEach(l => {
            l.classList.remove('active');
        });
        // Add active to clicked link
        this.classList.add('active');
    });
});

// Close mobile menu on outside click
document.addEventListener('click', (e) => {
    if (!e.target.closest('.lyd-navbar')) {
        document.querySelector('.lyd-navbar-toggle')?.classList.remove('active');
        document.querySelector('.lyd-navbar-menu')?.classList.remove('active');
    }
});

// components/Navbar.tsx
import { useState } from 'react';
import Link from 'next/link';

interface NavItem {
  label: string;
  href: string;
  dropdown?: NavItem[];
}

interface NavbarProps {
  items: NavItem[];
  variant?: 'light' | 'dark';
}

export const Navbar = ({ items, variant = 'light' }: NavbarProps) => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [activeItem, setActiveItem] = useState('/');
  
  return (
    <nav className={`lyd-navbar ${variant}`}>
      <div className="lyd-navbar-container">
        <Link href="/" className="lyd-navbar-brand">
          <img src="/logo.svg" alt="Logo" className="lyd-navbar-logo" />
        </Link>
        
        <ul className={`lyd-navbar-menu ${mobileMenuOpen ? 'active' : ''}`}>
          {items.map((item) => (
            <li key={item.href} className="lyd-navbar-item">
              <Link
                href={item.href}
                className={`lyd-navbar-link ${
                  activeItem === item.href ? 'active' : ''
                }`}
                onClick={() => setActiveItem(item.href)}
              >
                {item.label}
                {item.dropdown && (
                  <svg width="12" height="12">
                    <path d="M19 9l-7 7-7-7" />
                  </svg>
                )}
              </Link>
              
              {item.dropdown && (
                <div className="lyd-navbar-dropdown">
                  {item.dropdown.map((subItem) => (
                    <Link
                      key={subItem.href}
                      href={subItem.href}
                      className="lyd-navbar-dropdown-item"
                    >
                      {subItem.label}
                    </Link>
                  ))}
                </div>
              )}
            </li>
          ))}
        </ul>
        
        <div className="lyd-navbar-actions">
          <button className="lyd-button primary">Get Started</button>
        </div>
        
        <button
          className={`lyd-navbar-toggle ${mobileMenuOpen ? 'active' : ''}`}
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        >
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
    </nav>
  );
};