developer-roadmap/src/components/Navigation.astro

---
import Icon from './Icon.astro';
---

<div class='bg-slate-900 text-white py-5 sm:py-8'>
  <nav class='container flex items-center justify-between'>
    <a class='font-medium text-lg flex items-center text-white' href='/'>
      <Icon icon='logo' />
      <span class='ml-3'>roadmap.sh</span>
    </a>

    <!-- Desktop navigation items -->
    <ul class='hidden sm:flex space-x-5'>
      <li>
        <a href='/roadmaps' class='text-gray-400 hover:text-white'>Roadmaps</a>
      </li>
      <li>
        <a href='/best-practices' class='text-gray-400 hover:text-white'>Best Practices</a>
      </li>
      <li>
        <a href='/guides' class='text-gray-400 hover:text-white'>Guides</a>
      </li>
      <li>
        <a href='/videos' class='text-gray-400 hover:text-white'>Videos</a>
      </li>
      <li>
        <a
          class='py-2 px-4 text-sm font-regular rounded-full bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white'
          href='/signup'
        >
          Subscribe
        </a>
      </li>
    </ul>

    <!-- Mobile Navigation Button -->
    <button class='text-gray-400 hover:text-gray-50 block sm:hidden cursor-pointer' aria-label='Menu' show-mobile-nav>
      <Icon icon='hamburger' />
    </button>

    <!-- Mobile Navigation Items -->
    <div class='fixed top-0 bottom-0 left-0 right-0 z-40 bg-slate-900 items-center flex hidden' mobile-nav>
      <button
        close-mobile-nav
        class='text-gray-400 hover:text-gray-50 block cursor-pointer absolute top-6 right-6'
        aria-label='Close Menu'
      >
        <Icon icon='close' />
      </button>
      <ul class='flex flex-col gap-2 md:gap-3 items-center w-full'>
        <li>
          <a href='/roadmaps' class='text-xl md:text-lg hover:text-blue-300'>Roadmaps</a>
        </li>
        <li>
          <a href='/best-practices' class='text-xl md:text-lg hover:text-blue-300'>Best Practices</a>
        </li>
        <li>
          <a href='/guides' class='text-xl md:text-lg hover:text-blue-300'>Guides</a>
        </li>
        <li>
          <a href='/videos' class='text-xl md:text-lg hover:text-blue-300'>Videos</a>
        </li>
        <li>
          <a href='/signup' class='text-xl md:text-lg text-red-300 hover:text-red-400'>Subscribe</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

<script>
  document.querySelector('[show-mobile-nav]')?.addEventListener('click', () => {
    document.querySelector('[mobile-nav]')?.classList.remove('hidden');
  });

  document.querySelector('[close-mobile-nav]')?.addEventListener('click', () => {
    document.querySelector('[mobile-nav]')?.classList.add('hidden');
  });
</script>