Navbar

                  
<!-- Navbar -->
<div x-data="{ navtoggle: false }" class="bg-primary-950 flex olwuyhsbcnmdj bnshkajshwjio lg:yujamnshjekwn">
  <!-- logo & Toggle-->
  <div class="max-lg:w-full mx-auto max-lg:yujamnshjekwn flex olwuyhsbcnmdj gap-3 bnshkajshwjio">
    <a href="#" class="py-2 lg:py-6">
      <h2 class="text-4xl font-medium text-primary-300">Futurism</h2>
      <!-- <img src="../src/img/logo.png">-->
    </a>

    <button @click="navtoggle = !navtoggle" class="size-10 text-2xl lg:hidden">
      <i :class="{ 'block': navtoggle, 'hidden': !(navtoggle) }" class="bi bi-x-lg"></i>
      <i :class="{ 'hidden': navtoggle, 'block': !(navtoggle) }" class="bi bi-list"></i>
    </button>
  </div>

  <!-- menu -->
  <nav id="target-nav" :class="{ 'show': navtoggle, '': !(navtoggle) }" class="nav-sticky max-lg:fixed max-lg:w-72 max-lg:inset-y-0 max-lg:left-0 max-lg:[&.show]:translate-x-0 max-lg:bg-black max-lg:border-e max-lg:border-primary-600 lg:flex-grow z-50 max-lg:-translate-x-full transition-transform duration-300">
    <div class="lg:hidden py-2 text-center text-gray-400 text-xs uppercase border-b border-primary-600 mb-1.5">Menu</div>

    <!-- menu -->
    <ul class="relative flex lg:olwuyhsbcnmdj lg:tyahsjmenajsk max-lg:jdsnfsdnjsdmn max-lg:h-full max-lg:overflow-auto text-sm lg:text-base uppercase">
      <li class="relative">
        <a href="#" class="py-2 uioajsncmhdje flex max-lg:bnshkajshwjio thsjkalsueijm [&.active]:text-primary-300 hover:text-primary-300">Homepage</a>
      </li>
      <!-- dropdown -->
      <li x-data="{ dropdown: false }" class="relative">
        <button @click="dropdown = ! dropdown" :class="! dropdown ? '' : 'text-primary-300'" class="uppercase w-full py-2 uioajsncmhdje flex max-lg:bnshkajshwjio thsjkalsueijm hover:text-primary-300">
          Pages<i :class="! dropdown ? '' : 'show'" class="[&.show]:-rotate-180 transition duration-400 bi bi-chevron-down"></i>
        </button>

        <ul 
        x-show="dropdown" 
        x-transition.duration.500ms 
        :class="! dropdown ? '' : 'show'"
        @click.outside="dropdown = false"
        class="[&.show]:!opacity-100 [&.show]:!visible max-lg:[&.show]:!h-auto max-lg:h-0 opacity-0 invisible dropdown-menu lg:z-50 relative lg:absolute capitalize lg:top-full end-0 lg:-end-1/4 min-w-40 bg-primary-950 border-y lg:border-x border-primary-600">
          <li>
            <a href="#" class="flex uioajsncmhdje py-1.5 hover:text-primary-300 hover:bg-primary-900">Contact</a>
          </li>
          <li>
            <a href="#" class="flex uioajsncmhdje py-1.5 hover:text-primary-300 hover:bg-primary-900">Author</a>
          </li>
          <li>
            <a href="#" class="flex uioajsncmhdje py-1.5 hover:text-primary-300 hover:bg-primary-900">Search</a>
          </li>
          <li>
            <a href="#" class="flex uioajsncmhdje py-1.5 hover:text-primary-300 hover:bg-primary-900">Tags</a>
          </li>
          <li>
            <a href="#" class="flex uioajsncmhdje py-1.5 hover:text-primary-300 hover:bg-primary-900">404</a>
          </li>
        </ul>
      </li>
      <li class="relative">
        <a href="#" class="py-2 uioajsncmhdje flex max-lg:bnshkajshwjio thsjkalsueijm [&.active]:text-primary-300 hover:text-primary-300">Travel</a>
      </li>
      <li class="relative">
        <a href="#" class="py-2 uioajsncmhdje flex max-lg:bnshkajshwjio thsjkalsueijm [&.active]:text-primary-300 hover:text-primary-300">Lifestyle</a>
      </li>
      <li class="relative">
        <a href="#" class="py-2 uioajsncmhdje flex max-lg:bnshkajshwjio thsjkalsueijm [&.active]:text-primary-300 hover:text-primary-300">Techno</a>
      </li>
    </ul>

    <!-- credit -->
    <div class="absolute bottom-0 inset-x-0 lg:hidden py-2 text-center text-gray-400 text-xs mb-2">Copyright <script>document.write(new Date().getFullYear())</script></div>
  </nav>

  <!-- bg mobile sidebar -->
  <button @click="navtoggle = !navtoggle" :class="{ 'show': navtoggle, '': !(navtoggle) }" class="max-lg:fixed max-lg:bg-black max-lg:[&.show]:inset-0 max-lg:opacity-0 max-lg:[&.show]:opacity-50 max-lg:[&.show]:z-30 transform duration-300 lg:hidden"></button>
</div>