navbar.html

{% load static wagtailimages_tags wagtailcore_tags %}

{% if page.root_page.light_logo %}
  {% image page.root_page.light_logo max-256x256 as light_logo %}
{% endif %}

{% if page.root_page.dark_logo %}
  {% image page.root_page.dark_logo max-256x256 as dark_logo %}
{% endif %}

<!-- Navbar -->
<nav
  id="navbar"
  class="
    fixed left-0 top-[-1px] z-20 w-full duration-200 navbar

    {% if is_transparent and page.root_page.has_expanded_navbar %}
      xl:sticky sticky
    {% else %}
      xl:absolute
    {% endif %}

    {% block extra_classes %}
      {% if is_transparent %}navbar--transparent{% endif %}
      {% if is_on_dark_background %}navbar--on-dark-bg{% endif %}
    {% endblock %}
  "
>
  <div
    class="
      __navbar-inner container--wide py-3 xl:py-6 flex justify-between items-center
    "
  >
    <div class="flex items-center xl:items-start">
      {% if page.root_page.show_logo is not False %}
        <!-- BEGIN Logo-->
        <a
          href="{{ page.root_page.url }}"
          class="__navbar-logo-wrapper z-20 xl:mt-2 hover:no-underline"
        >
          {% block navbar_logo_images %}
            <img
              class="navbar__logo--white w-[150px] lg:w-[180px]"
              src="{% if light_logo %}{{ light_logo.url }}{% else %}{% static 'styleguide2/images/logo-full-white.svg' %}{% endif %}"
              alt="{% if light_logo %}{{ light_logo.alt }}{% else %}Pirátské logo{% endif %}"
            >
            <img
              class="navbar__logo--black w-[150px] lg:w-[180px]"
              src="{% if dark_logo %}{{ dark_logo.url }}{% else %}{% static 'styleguide2/images/logo-full-black.svg' %}{% endif %}"
              alt="{% if dark_logo %}{{ dark_logo.alt }}{% else %}Pirátské logo{% endif %}"
            >
          {% endblock %}
        </a>
        <!-- END Logo -->
      {% endif %}
    </div>

    <div class="flex-col gap-3 xl:flex hidden">

      <!-- BEGIN Social media-->
      <div class="__navbar-social-media flex gap-7 justify-end items-center">
        <div class="flex gap-5 text-lg">
          {% for social_link_block in page.root_page.social_links %}
            <a href="{{ social_link_block.value.link }}" class="hover:no-underline">
              <i class="{{ social_link_block.value.icon }}"></i>
            </a>
          {% endfor %}
        </div>

        {% if page.root_page.search_page %}
          <form method="GET" action="{{ page.root_page.search_page.url }}">
            {% include 'styleguide2/includes/atoms/form_fields/form_input.html' with placeholder='Hledej' classes='text-black p-3 w-60' name='q' value=global_search_query %}
          </form>
        {% endif %}

        {% block after_desktop_search %}{% endblock %}
      </div>
      <!-- END Social media -->

      <!-- BEGIN Menu -->
      <div
        class="__navbar-menu flex text-2xl gap-4 font-alt items-center justify-end"
      >
        {% if page.root_page.important_item_name %}
          {% firstof page.root_page.important_item_page.url page.root_page.important_item_url as target %}

          <a
            href="{{ target }}"
            class="
              __js-root mx-2 flex gap-1 items-center decoration-1 underline-offset-4

              navbar__menu-item

              {% if selected_item == page.root_page.important_item_name %}navbar__menu-item--selected{% endif %}
            "
          >
            <div class="mb-1">
              {% if not is_transparent %}
                {% include 'styleguide2/includes/atoms/icons/arrow.html' with width='27' height='28.35' fill='#fff' %}
              {% else %}
                <ui-animated-arrow
                  mobile-width="38.1"
                  mobile-height="40"

                  desktop-width="27"
                  desktop-height="28.35"
                ></ui-animated-arrow>
              {% endif %}
            </div>

            <span>
              {{ page.root_page.important_item_name }}
            </span>
          </a>
        {% endif %}

        {% for menu_item in page.root_page.menu %}
          {% if menu_item.block_type == "menu_item" %}
            {% firstof menu_item.value.page.url menu_item.value.link as target %}

            <a
              href="{{ target }}"
              class="
                mx-2 decoration-1 underline-offset-4

                navbar__menu-item

                {% if menu_item.value.title == selected_item %}navbar__menu-item--selected{% endif %}
              "
            >{{ menu_item.value.title }}</a>
          {% else %}
            {% include_block menu_item %}
          {% endif %}
        {% endfor %}

        {% if page.root_page.menu_button_content or page.root_page.popout_button_content %}
          {% block navbar_menu_button %}
            <div
              class="group uppercase cursor-pointer relative"
            >
              <div class="w-24 h-11 min-w-[9rem]">
                <div
                  class="
                    navbar__border-button

                    flex items-center justify-center border-none border-4 w-24 h-11 py-4 px-6 duration-150

                    xl:w-auto
                  "
                >{% if page.root_page.menu_button_name %}{{ page.root_page.menu_button_name }}{% else %}Zapoj se{% endif %}</div>
              </div>

              <div
                class="
                  absolute w-full top-[2.75rem] left-0 opacity-0 duration-150 pointer-events-none

                  group group-hover:opacity-100 group-hover:pointer-events-auto
                "
              >
                {% for button in page.root_page.menu_button_content %}
                  {% include_block button %}
                {% endfor %}
              </div>
            </div>
          {% endblock %}
        {% endif %}
      </div>
      <!-- END Menu -->

    </div>

    <!-- Hamburger Icon -->
    <input class="hidden navbar__mobile-menu__toggle" type="checkbox" id="navbar__mobile-menu__toggle">

    <label class="z-30 hamb text-black xl:hidden" for="navbar__mobile-menu__toggle">
      <span>
        <span class="bar1"></span>
        <span class="bar2"></span>
        <span class="bar3"></span>
      </span>
    </label>

    <div
      class="
        navbar__mobile-menu

        absolute top-0 left-0 w-full bg-grey-100 text-black pb-16 font-alt text-4xl drop-shadow-lg
        flex-col gap-3
      "
    >
      <div class="grid-container">
        <div class="grid-left-side">
          {% if page.root_page.show_logo is not False %}
            {% block popout_logo_image %}
              <img
                class="w-[150px] mt-3"
                src="{% if dark_logo %}{{ dark_logo.url }}{% else %}{% static 'styleguide2/images/logo-full-black.svg' %}{% endif %}"
                alt="Pirátské logo"
              >
            {% endblock %}
          {% endif %}
        </div>
      </div>

      <div
        class="
          __navbar-search

          flex flex-col gap-8 md:flex-row pt-6 px-8
          md:justify-between
          xl:pl-32
        "
      >
        <div class="flex flex-col gap-1.5 items-start">
          {% if page.root_page.search_page %}
            <form
              method="GET"
              action="{{ page.root_page.search_page.url }}"
              class="block w-full mb-8 flex"
            >
              {% include 'styleguide2/includes/atoms/form_fields/form_input.html' with placeholder='Hledej' classes='text-black px-2 py-1 w-full' name='q' value=global_search_query %}
            </form>
          {% endif %}

          {% if page.root_page.important_item_name %}
            {% firstof page.root_page.important_item_page.url page.root_page.important_item_url as target %}

            <a
              href="{{ target }}"
              class="
                __js-root flex items-center decoration-1 underline-offset-4

                navbar__menu-item

                {% if selected_item == page.root_page.important_item_name %}navbar__menu-item--selected{% endif %}
              "
            >
              <div class="mb-1">
                <ui-animated-arrow
                  :mobile-width="40"
                  :mobile-height="42"
                ></ui-animated-arrow>
              </div>

              {{ page.root_page.important_item_name }}
            </a>
          {% endif %}

          {% for menu in page.root_page.menu %}
            {% if menu.block_type == "menu_item" %}
              {% firstof menu.value.page.url menu.value.link as target %}

              <a
                href="{{ target }}"
                class="
                  decoration-1 underline-offset-4

                  navbar__menu-item

                  {% if menu.value.title == selected_item %}navbar__menu-item--selected{% endif %}
                "
              >{{ menu.value.title }}</a>
            {% elif menu.block_type == "menu_parent" %}
              {% for child_item in menu.value.menu_items %}
                {% firstof child_item.page.url child_item.link as target %}

                <a
                  href="{{ target }}"
                  class="
                    decoration-1 underline-offset-4

                    navbar__menu-item

                    {% if child_item.title == selected_item %}navbar__menu-item--selected{% endif %}
                  "
                >{{ child_item.title }}</a>
              {% endfor %}
            {% endif %}
          {% endfor %}

          <div class="mt-6"></div>

          {% if page.root_page.menu_button_content %}
            <div class="mb-6 flex flex-col gap-1.5">
              {% for button in page.root_page.menu_button_content %}
                <a
                  href="{{ button.value.button_link }}"
                  class="
                    decoration-1 underline-offset-4

                    navbar__menu-item

                    {% if button.value.button_text == selected_item %}navbar__menu-item--selected{% endif %}
                  "
                >{{ button.value.button_text }}</a>
              {% endfor %}
            </div>
          {% endif %}

          {% if page.root_page.popout_button_content %}
            <div class="mb-6 flex flex-col gap-1.5">
              {% for button in page.root_page.popout_button_content %}
                <a
                  href="{{ button.value.button_link }}"
                  class="
                    decoration-1 underline-offset-4

                    navbar__menu-item

                    {% if button.value.button_text == selected_item %}navbar__menu-item--selected{% endif %}
                  "
                >{{ button.value.button_text }}</a>
              {% endfor %}
            </div>
          {% endif %}
        </div>

        <div class="flex gap-5 text-lg md:justify-end">
          {% for social_link_block in page.root_page.social_links %}
            <a href="{{ social_link_block.value.link }}" class="hover:no-underline">
              <i class="{{ social_link_block.value.icon }}"></i>
            </a>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</nav>

{% block observer_script %}
  <script>
    const navbar = document.querySelector("#navbar")

    const transparentClass = "{% block observer_script_toggled_class %}navbar--transparent{% endblock %}"
    let initiallyHadTransparentClass = false

    if (navbar.classList.contains(transparentClass)) {
      initiallyHadTransparentClass = true
    }

    console.log(initiallyHadTransparentClass)

    window.onscroll = () => {
      const screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)

      {% if not page.root_page.has_expanded_navbar %}
        if (screenWidth > 1199) {
          return
        }
      {% endif %}

      if (window.scrollY === 0) {
        if (initiallyHadTransparentClass) {
          navbar.classList.add(transparentClass)
        }
      } else {
        navbar.classList.remove(transparentClass)
      }
    }

    const menuItems = document.querySelectorAll(".navbar__menu-item")

    menuItems.forEach(
      (element) => {
        element.addEventListener(
          "click",
          (event) => {
            document.getElementById("navbar__mobile-menu__toggle").checked = false
          }
        )
      }
    )
  </script>
{% endblock %}