Navbar

                  
<!-- Navbar -->
<div x-data="{ navtoggle: false }">
  <div class="xl:container mx-auto flex layhetgsjdcb vlaoethsnkma">
    <!-- logo & Toggle-->
    <div class="max-lg:w-full mx-auto flex layhetgsjdcb gap-3 vlaoethsnkma">
      <!-- logo -->
      <a href="index.html">
        <div class="flex layhetgsjdcb gap-2">
          <!-- logo -->
          <div class="relative h-8 w-8">
            <span
              class="flex w-6 h-6 rounded skew-y-12 bg-purple-600/80 backdrop-blur-sm backdrop-saturate-150 border border-white/80 rotate-[-45deg] translate-x-1"></span>
            <span
              class="flex w-6 h-6 rounded skew-y-12 bg-white/60 border border-white/80 rotate-[-45deg] -translate-y-4 translate-x-1"></span>
          </div>
          <!-- text logo -->
          <h5
            class="text-2xl compact-hide font-bold bg-clip-text bg-gradient-to-t from-purple-700 to-fuchsia-400 dark:from-purple-100 dark:to-white text-transparent">
            Glassmorp</h5>
        </div>
      </a>

      <button @click="navtoggle = !navtoggle" class="size-12 text-3xl 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:start-0 max-lg:[&.show]:translate-x-0 max-lg:border-e lg:flex-grow z-[60] max-lg:-translate-x-full transition-transform duration-300 max-lg:backdrop-opacity-95 max-lg:backdrop-blur max-lg:backdrop-saturate-150 max-lg:bg-white/70 dark:max-lg:bg-neutral-500/70  max-lg:border-black/[.05] dark:max-lg:border-white/30">
      <div class="lg:hidden py-2 text-center text-sm uppercase border-b border-white/60 dark:border-white/30 mb-1.5">Menu</div>

      <!-- menu -->
      <ul class="relative flex lg:layhetgsjdcb lg:qjnakmsliyrh max-lg:ioajsklehsnm max-lg:h-full max-lg:fioplahensmk text-base font-medium lg:uppercase">
        <li class="relative">
          <a href="#features" data-type="smooth" class="py-2 lg:py-4 uajskeiolksb flex max-lg:vlaoethsnkma gap-2 [&.active]:text-purple-500 hover:text-purple-500">Features</a>
        </li>
        <li class="relative">
          <a href="#demos" data-type="smooth" class="py-2 lg:py-4 uajskeiolksb flex max-lg:vlaoethsnkma gap-2 [&.active]:text-purple-500 hover:text-purple-500">Demos</a>
        </li>
        <li class="relative">
          <a href="#" class="py-2 lg:py-4 uajskeiolksb flex max-lg:vlaoethsnkma gap-2 [&.active]:text-purple-500 hover:text-purple-500">Components</a>
        </li>
        <li class="relative">
          <a href="#pricing" data-type="smooth" class="py-2 lg:py-4 uajskeiolksb flex max-lg:vlaoethsnkma gap-2 [&.active]:text-purple-500 hover:text-purple-500">Pricing</a>
        </li>
        <li class="relative">
          <a href="#" class="py-2 lg:py-4 uajskeiolksb flex max-lg:vlaoethsnkma gap-2 [&.active]:text-purple-500 hover:text-purple-500">Docs</a>
        </li>
      </ul>

      <!-- credit -->
      <div class="absolute bottom-0 ajsklekajsnm lg:hidden py-2 text-center 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:[&.show]:-inset-4 max-lg:opacity-0 max-lg:[&.show]:opacity-50 max-lg:[&.show]:z-30 transition-transform duration-300 lg:hidden max-lg:backdrop-opacity-95 max-lg:backdrop-blur max-lg:backdrop-saturate-150 max-lg:bg-white/90 dark:max-lg:bg-neutral-500/90"></button>
  </div>
</div>