Skip to content
Snippets Groups Projects
Select Git revision
  • d58883bc610607a5151f0c5ce6aae179854c4978
  • master default protected
  • feat/new-image-formats
  • clickable-select-chevron
  • 2.20.0
  • 2.19.0
  • 2.18.0
  • 2.17.0
  • 2.16.1
  • 2.16.0
  • 2.15.0
  • 2.14.0
  • 2.13.0
  • 2.12.1
  • 2.11.0
  • 2.10.0
  • 2.9.1
  • 2.9.0
  • 2.8.0
  • 2.7.1
  • 2.7.0
  • 2.6.0
  • 2.5.2
  • 2.5.1
24 results

screens.js

Blame
  • navbar.html 11.16 KiB
    {% 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
    
        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="
          __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_name and page.root_page.menu_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
                      "
                    >{{ page.root_page.menu_button_name }}</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 %}
    
              {% if page.root_page.menu_button_content %}
                <div class="mt-8 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 %}
            </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 (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 %}