website-v2/templates/includes/_header.html

{% load static %}
{% load account socialaccount %}


<div class="relative z-50 bg-gray-200 md:fixed md:top-0 md:right-0 md:left-0 dark:bg-black">

  <div class="relative mx-auto">
    <div class="px-6 mx-auto">
      <div class="hidden items-center py-1 px-2 border-b-2 border-gray-300 md:flex dark:border-charcoal">
        <div class="w-[100px]">
          <a href="{% url 'home' %}">
              <img class="hidden w-auto dark:inline-block h-[25px] -mb-[1px]"
                   src="{{ request.scheme }}://{{ request.get_host }}{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}"
                   alt="Boost">

              <img class="inline-block w-auto dark:hidden h-[25px] -mb-[1px]"
                   src="{{ request.scheme }}://{{ request.get_host }}{% static 'img/Boost_Brandmark_BlackBoost_Transparent.svg' %}"
                   alt="Boost">
          </a>
        </div>

        <div class="flex pt-1 w-full">
          <nav class="relative items-center pl-6 space-x-4 w-full text-lg text-left md:space-x-8 lg:space-x-10">
            <a href="{% url 'news' %}" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">News</a>
            <a href="{% url 'docs' %}" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Learn</a>
            <a href="{% url 'community' %}" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Community</a>
            <a href="{% url 'libraries' %}" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Libraries</a>
            <a href="{% url 'releases-most-recent' %}" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Releases</a>
          </nav>
          <nav class="float-right items-center space-x-3 w-44 text-right lg:space-x-5" x-data="{ 'searchOpen': false }">
            <span class="relative">
              <i class="inline -mt-1 cursor-pointer text-slate fas fa-search link"
                 @click="searchOpen = true; $nextTick(() => { setTimeout(() => { document.getElementById('hq').focus(); }, 300);});"
              ></i>
              <div x-show="searchOpen"
                   @click.away="searchOpen = false"
                   x-transition:enter="transition ease-out duration-100"
                   x-transition:enter-start="transform opacity-0 scale-95"
                   x-transition:enter-end="transform opacity-100 scale-100"
                   x-transition:leave="transition ease-in duration-75"
                   x-transition:leave-start="transform opacity-100 scale-100"
                   x-transition:leave-end="transform opacity-0 scale-95"
                   class="absolute -right-2 z-10 -top-[2px]"
                   x-ref="search-form"
                   x-description="Search"
                   role="menu"
                   aria-orientation="vertical"
                   aria-labelledby="search-button"
                   tabindex="-1"
                   style="display: none;"
              >
                <form action="https://www.google.com/search" method="get" name="searchform" target="_blank">
                  <input name="sitesearch" type="hidden" value="boost.org">
                  <input autocomplete="on"
                         class="py-2 px-3 text-xs bg-white rounded-lg border-gray-300 text-charcoal dark:text-charcoal dark:border-slate dark:bg-charcoal"
                         name="q"
                         id="hq"
                         placeholder="Search Boost.org"
                         required="required"
                         type="text"
                  >
                </form>
              </div>
            </span>

            <a href="{% url 'support' %}" class="inline"><i class="text-slate fas fa-question-circle link"></i></a>

            <!-- theme switcher -->
            <span x-data="{ 'modeOpen': false }" class="relative">
              <span class="dark:hidden">
                <i class="inline-block cursor-pointer fas fa-sun link" @click="modeOpen = !modeOpen"></i>
              </span>
              <span class="hidden dark:inline">
                <i class="inline-block cursor-pointer fas fa-moon link" @click="modeOpen = !modeOpen"></i>
              </span>

              <div
                x-show="modeOpen" x-cloak
                @click.away="modeOpen = false"
                x-transition:enter="transition ease-out duration-100"
                x-transition:enter-start="transform opacity-0 scale-95"
                x-transition:enter-end="transform opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-75"
                x-transition:leave-start="transform opacity-100 scale-100"
                x-transition:leave-end="transform opacity-0 scale-95"
                x-data="{
                    mode: '',
                    setColorMode: m => {
                        if (m === 'dark') {
                            document.documentElement.classList.add('dark')
                            localStorage.setItem('colorMode', 'dark')
                        } else {
                            document.documentElement.classList.remove('dark')
                            localStorage.setItem('colorMode', 'light')
                        }
                        document.head.querySelectorAll('.meta-theme').forEach((el) => {
                          el.setAttribute('content', el.getAttribute('data-' + m));
                        });
                    }
                }"

                class="absolute right-0 z-10 py-1 px-2 mt-2 w-32 text-left bg-white rounded-md divide-y divide-gray-300 ring-1 ring-gray-300 shadow-lg origin-top-right dark:ring-gray-500 dark:bg-charcoal"
              >
                <a
                  @click="mode='light'; setColorMode('light'); modeOpen = false;"
                  :class="{'font-bold': mode === 'light', 'font-medium': mode !== 'light' }"
                  class="block py-2 text-xs cursor-pointer dark:text-white text-charcoal dark:hover:text-orange hover:text-orange"
                  >
                  <i class="inline-block mr-1 font-semibold fas fa-sun text-gold"></i>
                  Light Mode
                </a>

                <a
                  @click="mode = 'dark'; setColorMode('dark'); modeOpen = false;"
                  :class="{'font-bold': mode === 'dark', 'font-medium': mode !== 'dark' }"
                  class="block py-2 text-xs cursor-pointer dark:text-white text-charcoal dark:hover:text-orange hover:text-orange"
                  >
                  <i class="inline-block mr-1 fas fa-moon text-sky-600"></i>
                  Dark Mode
                </a>
              </div>
            </span>

            <span x-data="{ 'userOpen': false }" class="relative">
              {% if not user.is_authenticated %}
                <a href="{% url 'account_signup' %}" class="inline font-medium dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">Join</a>
              {% else %}
                {% if user.image %}
                  <img src="{{ user.image.url }}" alt="user" class="inline -mt-1 rounded cursor-pointer w-[30px]" @click="userOpen = !userOpen" />
                {% else %}
                  <i class="inline mr-2 cursor-pointer fas fa-user text-charcoal dark:text-white/60" @click="userOpen = !userOpen"></i>
                {% endif %}
              {% endif %}

              {% if user.is_authenticated %}
              <div x-show="userOpen"
                   @click.away="userOpen = false"
                   x-transition:enter="transition ease-out duration-100"
                   x-transition:enter-start="transform opacity-0 scale-95"
                   x-transition:enter-end="transform opacity-100 scale-100"
                   x-transition:leave="transition ease-in duration-75"
                   x-transition:leave-start="transform opacity-100 scale-100"
                   x-transition:leave-end="transform opacity-0 scale-95"
                   class="absolute right-0 z-10 py-1 px-2 mt-2 w-32 text-left bg-white rounded-md divide-y divide-gray-300 ring-1 ring-gray-300 shadow-lg origin-top-right dark:ring-gray-500 darK:divide-gray-500 dark:bg-charcoal"
                   x-ref="menu-items"
                   x-description="Profile Menu"
                   role="menu"
                   aria-orientation="vertical"
                   aria-labelledby="user-menu-button"
                   tabindex="-1"
                   style="display: none;"
              >
                <a href="{% url 'profile-account' %}" class="block py-2 text-xs font-medium dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">My Profile</a>
                <a href="{% url 'account_logout' %}" class="block py-2 text-xs font-medium dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">Log Out</a>
              </div>
            {% endif %}
            </span>
          </nav>
        </div>
      </div>

      <!-- Mobile menu, show/hide based on menu open state. -->
      <div class="relative z-10 transition transform origin-top-right md:hidden" x-data="{ isOpen: false }">

        <div class="pb-1 border-b border-slate">
          <div class="inline-block relative pt-2 pl-2 mx-auto h-full">
            <a href="{% url 'home' %}"><img class="inline w-auto h-[30px]"
                                            src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}"
                                            alt="Boost"></a>
          </div>
          <button type="button"
                  class="inline-flex float-right justify-center items-center p-2 rounded-md hover:text-white focus:outline-none"
                  aria-controls="mobile-menu" @click="isOpen = !isOpen" aria-expanded="false"
                  x-bind:aria-expanded="open.toString()">
            <span class="sr-only">Open main menu</span>
            <svg x-description="Icon when menu is closed." x-state:on="Menu open" x-state:off="Menu closed"
                 class="block w-6 h-6"
                 :class="{ 'hidden': isOpen, 'block': !(isOpen) }" xmlns="http://www.w3.org/2000/svg" fill="none"
                 viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round"
                    d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
            </svg>
            <svg x-description="Icon when menu is open." x-state:on="Menu open" x-state:off="Menu opened"
                 class="hidden w-6 h-6"
                 :class="{ 'block': isOpen, 'hidden': !(isOpen) }" xmlns="http://www.w3.org/2000/svg" fill="none"
                 viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>
        <div x-show="isOpen" class="absolute inset-x-0 top-10 z-50 h-screen bg-charcoal">
          <div class="px-2 pt-2 pb-3 text-2xl">
            <a href="{% url 'news' %}" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">News</a>

            <a href="{% url 'docs' %}" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">Learn</a>

            <a href="{% url 'community' %}" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">Community</a>

            <a href="/libraries/" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">Libraries</a>

            <a href="{% url 'releases-most-recent' %}" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">Releases</a>
          </div>
          <div class="absolute left-0 bottom-10 px-2 pt-2 pb-3 text-sm">
            <a href="{% url 'support' %}" class="block py-2 px-3 text-gray-700 text-thin">Support</a>

            <a href="{% url 'account_signup' %}" class="block py-2 px-3 text-gray-700 text-thin">Sign Up</a>

            <a href="#" class="block py-2 px-3 text-gray-700 text-thin">Log In </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>