AnthoLume/templates/header.html

<nav class="bg-white dark:bg-gray-800 shadow">
  <div class="px-8 mx-auto max-w-7xl">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="hidden md:block">
          <div class="flex items-baseline space-x-4">
            <a
              class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium"
              href="/"
            >
              Home
            </a>
            <a
              class="text-gray-800 dark:text-white hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium"
              href="/documents"
            >
              Documents
            </a>
            <a
              class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium"
              href="/activity"
            >
              Activity
            </a>
            <a
              class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium"
              href="/graphs"
            >
              Graphs
            </a>
          </div>
        </div>
      </div>
      <div class="block">
        <div class="flex items-center ml-4 md:ml-6">
          <div class="relative ml-3">
            <div class="custom-profile-icon relative inline-block text-left">
              <div>
                <button
                  type="button"
                  class="flex items-center justify-center w-full rounded-md px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500"
                  id="options-menu"
                >
                  <svg
                    width="20"
                    fill="currentColor"
                    height="20"
                    class="text-gray-800 dark:text-gray-200"
                    viewBox="0 0 1792 1792"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M1523 1339q-22-155-87.5-257.5t-184.5-118.5q-67 74-159.5 115.5t-195.5 41.5-195.5-41.5-159.5-115.5q-119 16-184.5 118.5t-87.5 257.5q106 150 271 237.5t356 87.5 356-87.5 271-237.5zm-243-699q0-159-112.5-271.5t-271.5-112.5-271.5 112.5-112.5 271.5 112.5 271.5 271.5 112.5 271.5-112.5 112.5-271.5zm512 256q0 182-71 347.5t-190.5 286-285.5 191.5-349 71q-182 0-348-71t-286-191-191-286-71-348 71-348 191-286 286-191 348-71 348 71 286 191 191 286 71 348z"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="custom-profile-dropdown transition duration-200 absolute right-0 w-56 pt-2 origin-top-right bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-black ring-opacity-5"
            >
              <div
                class="py-1"
                role="menu"
                aria-orientation="vertical"
                aria-labelledby="options-menu"
              >
                <a
                  href="#"
                  class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
                  role="menuitem"
                >
                  <span class="flex flex-col">
                    <span> Settings </span>
                  </span>
                </a>
                <a
                  href="#"
                  class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
                  role="menuitem"
                >
                  <span class="flex flex-col">
                    <span> Account </span>
                  </span>
                </a>
                <a
                  href="#"
                  class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
                  role="menuitem"
                >
                  <span class="flex flex-col">
                    <span> Logout </span>
                  </span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex -mr-2 md:hidden">
        <button
          class="text-gray-800 dark:text-white hover:text-gray-300 inline-flex items-center justify-center p-2 rounded-md focus:outline-none"
        >
          <svg
            width="20"
            height="20"
            fill="currentColor"
            class="w-8 h-8"
            viewBox="0 0 1792 1792"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div class="md:hidden">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a
        class="text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium"
        href="/#"
      >
        Home
      </a>
      <a
        class="text-gray-800 dark:text-white block px-3 py-2 rounded-md text-base font-medium"
        href="/#"
      >
        Gallery
      </a>
      <a
        class="text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium"
        href="/#"
      >
        Content
      </a>
      <a
        class="text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium"
        href="/#"
      >
        Contact
      </a>
    </div>
  </div>
</nav>

<!-- Custom Animation CSS -->
<style>
  .custom-profile-dropdown {
    visibility: hidden;
    opacity: 0;
  }

  .custom-profile-icon:hover + .custom-profile-dropdown,
  .custom-profile-dropdown:hover {
    visibility: visible;
    opacity: 1;
  }
</style>