github.com/lucasscarioca/music-stash@v0.0.0-20230829021135-a8b8893b12a5/internal/views/components/navbar.html (about)

     1  {{ define "navbar" }}
     2  <nav
     3    class="relative z-10 flex w-full p-4 items-center justify-between bg-secondary dark:bg-secondary-dark shadow-md"
     4  >
     5    <span
     6      class="font-bold text-accent hover:text-accent-bold duration-500 text-center flex items-center justify-center leading-4 cursor-pointer"
     7    >
     8      <i class="text-2xl ph-fill ph-guitar mr-1"></i>
     9      <div>
    10        <div>Music</div>
    11        <div>Stash</div>
    12      </div>
    13    </span>
    14    <input
    15      class="rounded -ml-18 lg:ml-80 md:w-1/5 md:py-1 bg-primary dark:bg-primary-dark text-primary-dark dark:text-primary px-2 focus:outline-accent focus:outline-double"
    16      name="searchbar"
    17      placeholder="Search a song..."
    18    />
    19    <ul
    20      class="space-x-6 space-y-4 md:space-y-0 md:flex md:items-center md:justify-evenly hidden md:static absolute bg-secondary dark:bg-secondary-dark w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 top-12 opacity-0 h-0 md:h-auto"
    21    >
    22      <li class="ml-6 md:ml-0 w-full md:w-auto">
    23        <a
    24          href="#"
    25          class="text-lg text-accent hover:text-accent-bold duration-500"
    26          >Home</a
    27        >
    28      </li>
    29      <li class="w-full md:w-auto">
    30        <a
    31          href="#"
    32          class="text-lg text-accent hover:text-accent-bold duration-500"
    33          >My list</a
    34        >
    35      </li>
    36      <li class="w-full md:w-auto">
    37        <a
    38          href="#"
    39          class="text-lg text-accent hover:text-accent-bold duration-500"
    40          >Profile</a
    41        >
    42      </li>
    43      <li class="flex justify-end space-x-2 px-4">
    44        <span
    45          class="btn cursor-pointer flex items-center"
    46          onclick="toggleTheme()"
    47        >
    48          <i id="theme" class="text-lg ph ph-sun"></i>
    49        </span>
    50        <button type="button" class="btn">Login</button>
    51      </li>
    52    </ul>
    53    <div class="md:hidden cursor-pointer text-accent hover:text-accent-bold">
    54      <span class="flex items-center" onclick="menu()">
    55        <i id="menu" class="text-2xl ph ph-list"></i>
    56      </span>
    57    </div>
    58  </nav>
    59  {{ end }}