website-v2/templates/includes/_header.html

{% load static %}

<div class="relative bg-gray-50">
  <div class="relative pb-16 sm:pb-24">
    <div>
      <div class="hidden md:block mx-auto px-3 sm:px-6 bg-charcoal">
        <nav class="relative flex items-center justify-between sm:h-10 pt-6 pb-6" aria-label="Global">
          <div class="md:flex md:space-x-10 pt-3 pb-3 pl-3">
            <a href="#" class="font-medium text-gray-500 hover:text-gray-900">About</a>

            <a href="#" class="font-medium text-gray-500 hover:text-gray-900">Support</a>

            <a href="#" class="font-medium text-gray-500 hover:text-gray-900">Resources</a>

            <a href="#" class="font-medium text-gray-500 hover:text-gray-900">Signup</a>

            <a href="#" class="font-medium text-gray-500 hover:text-gray-900">Login</a>

            <a href="#" class="font-medium text-gray-500 hover:text-gray-900">
              <img class="mt-1" src="{% static 'img/icons/icon-search.svg' %}" alt="Search" />
            </a>
          </div>
          <div>
            <span id="icon-container" class="inline-block w-6 h-6 mt-2"></span><span class="inline-block ml-2 text-sm uppercase text-orange"> 1.79.0 Releases on 9-8-22<small> > </small></span>
          </div>
        </nav>
      </div>
      <div class="py-5 border-b-2 border-charcoal">
        <!-- TODO: Fix border -->
        <nav class="relative flex items-center justify-between sm:h-10 md:justify-center">
          <div class="hidden sm:block sm:absolute sm:inset-y-0 sm:h-full sm:w-full md:space-x-10" aria-hidden="true">
            <div class="relative h-full mx-auto pl-8 inline">
              <img class="inline w-auto h-[50px]" src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}" alt="Boost">
            </div>
            <div class="inline md:space-x-10 float-right pr-8 text-lg">
              <a href="{% url "version-list" %}" class="font-medium text-gray-500 hover:text-gray-900">Versions</a>

              <a href="/libraries/" class="font-medium text-gray-500 hover:text-gray-900">Libraries</a>

              <a href="#" class="font-medium text-gray-500 hover:text-gray-900">Review Process</a>

              <a href="/forum/" class="font-medium text-gray-500 hover:text-gray-900">Forums</a>

              <a href="#" class="font-medium text-gray-500 hover:text-gray-900">News</a>

              <a href="#" class="font-medium text-gray-500 hover:text-gray-900">Donate</a>
            </div>
          </div>
        </nav>
      </div>

      <!--
        Mobile menu, show/hide based on menu open state.

        Entering: "duration-150 ease-out"
          From: "opacity-0 scale-95"
          To: "opacity-100 scale-100"
        Leaving: "duration-100 ease-in"
          From: "opacity-100 scale-100"
          To: "opacity-0 scale-95"
      -->
      <div class="absolute z-10 top-0 inset-x-0 transition transform origin-top-right md:hidden" x-data="{ isOpen: false }">
          <div class="pb-2 flex bg-charcoal">
              <div class="mx-auto"><span id="icon-container-mobile" class="pt-1 inline-block w-6 h-6 mt-1"></span><span class="ml-3 inline-block uppercase text-orange">1.79.0 Releases on 9-8-22<small> > </small></span></div>
          </div>
          <div class="border-b-2 border-slate pb-1">
            <div class="relative h-full mx-auto pl-2 inline-block pt-2">
              <img class="inline w-auto h-[30px]" src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}" alt="Boost">
            </div>
            <button @click="isOpen = !isOpen" type="button" class="float-right bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset">
              <span class="sr-only">Close menu</span>
              <!-- Heroicon name: outline/x -->
              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          <div x-show="isOpen" class="h-screen z-50 bg-charcoal">
            <div class="px-2 pt-2 pb-3 text-2xl">
              <a href="/versions/" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Versions</a>

              <a href="/libraries/" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Libraries</a>

              <a href="#" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Review Process</a>

              <a href="/forum/" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Forums</a>

              <a href="#" class="block px-3 py-2 text-gray-500 hover:text-gray-900">News</a>

              <a href="#" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Donate</a>
            </div>
            <div class="px-2 pt-2 pb-3 absolute bottom-2 left-0 text-sm">
              <a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">About</a>

              <a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Support</a>

              <a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Resources</a>

              <a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Signup</a>

              <a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Login </a>
            </div>
          </div>
      </div>
    </div>
  </div>
</div>