Skip to content
Snippets Groups Projects
Select Git revision
  • e5ac34c0a03ce2cf1939bbcbf68b0ffc40465e93
  • master default protected
  • set-sast-config-1
  • v2.2.3
  • v2.2.2
  • v1.4.0
  • v1.3.0
  • v1.2.1
  • v1.2.0
  • v1.1.2
  • v1.1.1
11 results

nginx.conf

Blame
  • navbar.html 8.82 KiB
    <!-- 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">
            {% 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.html' with form_placeholder='Hledej' classes='text-black px-2 py-1 w-80' %}
            {% endblock %}
          </div>
          <!-- END Social media -->
    
          <!-- BEGIN Menu -->
          <div
            class="flex text-2xl gap-8 font-alt items-center justify-end"
          >
            {% if important_item %}
              <a
                href="{{ important_item_url }}"
                class="__js-root 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 %}
                    {% 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 %}
    
            {% for item in menu_items %}
              <a
                href="{{ item.url }}"
                class="decoration-1 underline-offset-4 {% if item == selected_item %}navbar__menu-item--selected{% endif %}"
              >{{ item.name }}</a>
            {% endfor %}
    
            {% 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.html' with form_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>
        window.onscroll = () => {
          const screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
    
          if (screenWidth > 1199) {
            return
          }
    
          const navbar = document.querySelector("#navbar")
          const transparentClass = "{% block observer_script_toggled_class %}navbar--transparent{% endblock %}"
    
          if (window.scrollY === 0) {
            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 %}