Pattern Library

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

    xl:absolute
    xl:bg-transparent

    {% block extra_classes %}
      {% if is_transparent %}navbar--transparent{% endif %}
      {% if is_on_dark_background %}navbar--on-dark-bg{% endif %}
    {% endblock %}
  "
>
  <div class="container--wide py-3 xl:py-6 flex justify-between items-center">

    <div class="flex items-center xl:items-start">
      <!-- BEGIN Logo-->
      <a href="{{ logo_url }}" class="z-20 xl:mt-2 hover:no-underline">
        {% block navbar_logo_images %}
          <img class="navbar__logo--white w-[150px] lg:w-[180px]" src="{{ white_logo_image_url }}" alt="">
          <img class="navbar__logo--black w-[150px] lg:w-[180px]" src="{{ black_logo_image_url }}" alt="">
        {% endblock %}
      </a>
      <!-- END Logo -->
    </div>

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

      <!-- BEGIN Social media-->
      <div class="flex gap-7 justify-end items-center">
        <div class="flex gap-5 text-lg">
          {% for social_media in social_media_links %}
            <a href="{{ social_media.url }}" class="hover:no-underline">
              <i class="{{ social_media.icon }}"></i>
            </a>
          {% endfor %}
        </div>

        {% block desktop_search %}
          {% include 'patterns/atoms/form_fields/form_input_backgroundless.html' with placeholder='Hledej' classes='text-black px-2 py-1 w-60' %}
        {% endblock %}

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

      <!-- BEGIN Menu -->
      <div
        class="flex text-2xl gap-4 font-alt items-center justify-end"
      >
        {% if important_item %}
          <a
            href="{{ important_item_url }}"
            class="
              __js-root mx-2 flex gap-1 items-center decoration-1 underline-offset-4
              
              {% if selected_item == important_item %}navbar__menu-item--selected{% endif %}
            "
          >
            <div class="mb-1">
              {% if not is_transparent or is_on_dark_background %}
                {% include 'patterns/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>
              {{ important_item }}
            </span>
          </a>
        {% endif %}

        {% block menu_items %}
          {% for item in menu_items %}
            <a
              href="{{ item.url }}"
              class="
                decoration-1 underline-offset-4 mx-2
                
                {% if item == selected_item %}navbar__menu-item--selected{% endif %}
              "
            >{{ item.name }}</a>
          {% endfor %}
        {% endblock %}

        {% if menu_button %}
          {% if additional_buttons or menu_button_url %}
            {% block navbar_menu_button %}
              <div
                class="group uppercase cursor-pointer relative"
              >
                <div class="w-24 h-11 min-w-[9rem]">
                  <{% if menu_button_url %}a{% else %}div{% endif %}
                    class="
                      navbar__border-button

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

                      hover:no-underline

                      xl:w-auto
                    "

                    {% if menu_button_url %}href="{{ menu_button_url }}"{% endif %}
                  >
                    {{ menu_button }}
                  </{% if menu_button_url %}a{% else %}div{% endif %}>
                </div>

                {% if additional_buttons %}
                  <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
                    "
                  >
                    {% block navbar_menu_button_additional_buttons %}
                      {% for button in additional_buttons %}
                        {% include 'patterns/molecules/navbar/additional_button.html' %}
                      {% endfor %}
                    {% endblock %}
                  </div>
                {% endif %}
              </div>
            {% endblock %}
          {% endif %}
        {% 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">
          {% block popout_logo_image %}
            <img
              class="w-[150px] mt-3"
              src="../../../../../static/images/logo-full-black.svg"
              alt=""
            >
          {% endblock %}
        </div>
      </div>

      <div
        class="
          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">
          {% block mobile_search %}
            <div class="w-full mb-8 flex">
              {% include 'patterns/atoms/form_fields/form_input_backgroundless.html' with placeholder='Hledej' classes='w-full text-black px-2 py-1' %}
            </div>
          {% endblock %}

          {% if important_item %}
            <a
              href="{{ important_item_url }}"
              class="
                __js-root flex items-center decoration-1 underline-offset-4

                navbar__menu-item

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

              {{ important_item }}
            </a>
          {% endif %}

          {% for item in menu_items %}
            <a
              href="{{ item.url }}"
              class="
                decoration-1 underline-offset-4

                navbar__menu-item

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

          {% if additional_buttons %}
            <div class="mt-8 mb-6 flex flex-col gap-1.5">
              {% for button in additional_buttons %}
                <a
                  href="{{ button.url }}"
                  class="
                    decoration-1 underline-offset-4

                    navbar__menu-item

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

          {% if menu_button and not additional_buttons and menu_button_url %}
            <div class="mt-8 mb-6 flex flex-col gap-1.5">
              <a
                href="{{ menu_button_url }}"
                class="
                  decoration-1 underline-offset-4

                  navbar__menu-item

                  {% if menu_button == selected_item %}navbar__menu-item--selected{% endif %}
                "
              >{{ menu_button }}</a>
            </div>
          {% endif %}
        </div>

        <div class="flex gap-5 text-lg md:justify-end">
          {% for social_media in social_media_links %}
            <a href="{{ social_media.url }}" class="hover:no-underline">
              <i class="{{ social_media.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 (screenWidth > 1199) {
        return
      }

      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 %}