<header class="bg-gray-800 text-white py-6">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center">
      <!-- Logo -->
      <div class="text-2xl font-bold">Your Name</div>

      <!-- Navbar for larger screens -->
      <nav class="hidden md:flex space-x-6">
        <a href="#about" class="hover:text-gray-400">About</a>
        <a href="#skills" class="hover:text-gray-400">Skills</a>
        <a href="#projects" class="hover:text-gray-400">Projects</a>
        <a href="#contact" class="hover:text-gray-400">Contact</a>
      </nav>

      <!-- Mobile Menu Button -->
      <div class="md:hidden">
        <button (click)="toggleMenu()" class="text-white focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- Mobile Menu -->
    <div *ngIf="isMenuOpen" class="md:hidden mt-4 space-y-4 text-center">
      <a href="#about" class="block hover:text-gray-400">About</a>
      <a href="#skills" class="block hover:text-gray-400">Skills</a>
      <a href="#projects" class="block hover:text-gray-400">Projects</a>
      <a href="#contact" class="block hover:text-gray-400">Contact</a>
    </div>
  </div>
</header>
