sidebar navigational menu

by Imri Paloja

HTML

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <style type="text/tailwindcss">

        /* enable dark mode */
        @custom-variant dark (&:where(.dark, .dark *));

        @theme {
            --color-eb-red: #e60000;
            --color-eb-dark: #1b1e1f;
            --color-eb-gray: #181a1b;

            --font-sans: 'Inter', sans-serif;
        }

        /* Optional: Additional custom utilities */
        @layer utilities {
            /*.text-gradient {*/
            /*    background-clip: text;*/
            /*    -webkit-background-clip: text;*/
            /*    color: transparent;*/
            /*}*/
        }
    </style>


<!-- Navigation Toggle -->
<div class="lg:hidden py-16 text-center">
  <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-start bg-gray-900 dark:bg-white border border-transparent text-white dark:text-neutral-800 text-sm font-medium rounded-lg shadow-2xs hover:bg-gray-800 dark:hover:bg-neutral-100 focus:outline-hidden focus:bg-gray-800 dark:focus:bg-neutral-100" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-sidebar-header" aria-label="Toggle navigation" data-hs-overlay="#hs-sidebar-header">
    Open
  </button>
</div>
<!-- End Navigation Toggle -->

<!-- Sidebar -->
<div id="hs-sidebar-header" class="hs-overlay [--auto-close:lg] lg:block lg:translate-x-0 lg:inset-e-auto lg:bottom-0 w-64 hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform h-full fixed top-0 inset-s-0 bottom-0 z-60 bg-white dark:bg-neutral-800 border-e border-gray-200 dark:border-neutral-700" role="dialog" tabindex="-1" aria-label="Sidebar" >
  <div class="relative flex flex-col h-full max-h-full">
      <!-- Header -->
      <header class="p-4 flex justify-between items-center gap-x-2">

        <a class="flex-none font-semibold text-xl text-gray-800 dark:text-white focus:outline-hidden focus:opacity-80"...