Select Git revision
-
Andrej Ramašeuski authoredAndrej Ramašeuski authored
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 %}