<script>
  import { BxsHome, BxsInfoCircle, BxsPhone, BxMenu } from 'svelte-boxicons';
  let isOpen = false;

  const toggleMenu = () => {
    isOpen = !isOpen;
  };
</script>

<style>
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #1f1f1f;
    color: #f5f5f5;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }

  a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
  }

  a:hover {
    color: #66ccff;
  }

  .nav-links {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #2a2a2a;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  }

  button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
  }

  @media (min-width: 768px) {
    .desktop-only {
      display: flex;
    }
    .mobile-only {
      display: none;
    }
  }

  @media (max-width: 767px) {
    .desktop-only {
      display: none;
    }
    .mobile-only {
      display: block;
    }
  }
</style>

<nav>
  <div class="flex items-center gap-2">
    <BxsHome size="26" color="currentColor" />
    <span class="font-semibold text-lg">MyApp</span>
  </div>

  <!-- Desktop Links -->
  <div class="nav-links desktop-only">
    <a href="#"><BxsHome size="20" /> Home</a>
    <a href="#"><BxsInfoCircle size="20" /> About</a>
    <a href="#"><BxsPhone size="20" /> Contact</a>
  </div>

  <!-- Mobile toggle -->
  <button class="mobile-only" on:click={toggleMenu} aria-label="Toggle Menu">
    <BxMenu size="28" />
  </button>
</nav>

{#if isOpen}
  <div class="mobile-menu mobile-only">
    <a href="#" on:click={() => (isOpen = false)}><BxsHome size="20" /> Home</a>
    <a href="#" on:click={() => (isOpen = false)}><BxsInfoCircle size="20" /> About</a>
    <a href="#" on:click={() => (isOpen = false)}><BxsPhone size="20" /> Contact</a>
  </div>
{/if}
