<header-menu ref="headerMenuRef">
<!-- MOBILE HEADER -->
<div class="header-mobile h-[80px] lg:hidden items-center justify-center backdrop-blur-md bg-white/90 sm-text-card">
<div class="container flex flex-row items-center h-full justify-between">
<div class="header-mobile__logo-player-section flex flex-row w-full items-center gap-20">
<div class="header-mobile__page-logo b-r">
<a href="{{ path('homepage') }}"><img src="{{ asset('vue/icons/funRadioLogo.svg', 'img') }}?v={{ cache_busting }}" width="110" height="56" alt="{{ site_title }}"></a>
</div>
<div class="w-0 h-40 border-r border-frDarkBlue"></div>
<mobile-header-radio-player></mobile-header-radio-player>
</div>
<div class="header-mobile__hamburger-menu">
<div id="hamburger-menu-button" class="hamburger-menu-button ml-auto flex items-center">
<img
id="header-mobile__hamburger-menu-button"
src="{{ asset('vue/icons/hamburger-menu.svg', 'img') }}?v={{ cache_busting }}"
height="22"
alt=""
>
<img
id="header-mobile__close-search-button"
class="hidden"
src="{{ asset('vue/icons/close.svg', 'img') }}?v={{ cache_busting }}"
height="22"
alt=""
>
</div>
</div>
</div>
</div>
<!-- DESKTOP HEADER -->
<div class="header-desktop h-[80px] hidden lg:flex items-center justify-center backdrop-blur-md bg-white/90 sm-text-card">
<div class="container flex items-center justify-between">
<div class="page-logo flex-0" ref="headerRef">
<a href="{{ path('homepage') }}"><img src="{{ asset('vue/icons/funRadioLogo.svg', 'img') }}?v={{ cache_busting }}" width="110" height="56" alt="{{ site_title }}"></a>
</div>
<nav id="header-desktop-search" class="hidden flex flex-row justify-end items-center gap-20">
<form>
<input class="header-desktop__search-input" placeholder="Vyhľadávanie" type="text" />
<button class="header-desktop__search-action-button">
<img src="{{ asset('vue/icons/search.svg', 'img') }}" alt="">
</button>
</form>
<div id="header-desktop__close-search-button" class="header-desktop__close-search-button">
<img src="{{ asset('vue/icons/close.svg', 'img') }}" alt="">
</div>
</nav>
<nav id="header-desktop-menu" class="flex flex-row justify-end items-center">
{% if header_menu is defined and header_menu != null %}
<ul class="header-desktop-menu space-x-10 text-frDarkBlue font-bold desktop-nav-l1">
{% for item in header_menu %}
{% if item.title == "Videá" %} {# Hardcoded part of header menu OLR DESIGN #}
<li class="header-desktop-link">
<a href="{{ path('homepage') }}#playlist-section" class="custom-video-scroll top-bar__link">Videá</a>
</li>
<li class="header-desktop-link">
<a href="{{ path('homepage') }}#playlist-section" class="custom-video-scroll top-bar__link" @click="menuToggle">Videá</a>
</li>
{% else %}
{% if item.type == "folder" %}
{% set slug = path('folder', {folder: item.slug}) %}
{% elseif item.type == "custom" %}
{% set slug = item.url %}
{% elseif item.type == "category" %}
{% set slug = path('category', {category: item.slug}) %}
{% elseif item.type == "broadcast" %}
{% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
{% else %}
{% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
{% endif %}
{% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
{% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
{% set activeSlug = slug|trim('/')|split('/')|last %}
<li class="
header-desktop-link
{% if item.submenu is not empty %}
has-submenu
{% if slug is not empty %}
cursor-pointer
{% endif %}
{% else %}
{# Those with a sub-menu cannot has .active (because sub-menu bar would then be displayed) #}
{% if lastSegmentUrl == activeSlug %}
active
{% endif %}
{% endif %}
">
<a {% if slug is not empty %} href="{{ slug }}" {% endif %}
{{ rel|raw }}
{{ target|raw }}
>
{{ item.title }}
</a>
{% if item.submenu is not empty %}
<div class="submenu font-normal">
<ul>
{% for subitem in item.submenu %}
{% if subitem.type == "folder" %}
{% set slug = path('folder', {folder: subitem.slug}) %}
{% elseif subitem.type == "custom" %}
{% set slug = subitem.url %}
{% elseif subitem.type == "category" %}
{% set slug = path('category', {category: subitem.slug}) %}
{% elseif subitem.type == "broadcast" %}
{% set slug = path('broadcast', {id: subitem.item, slug: subitem.slug}) %}
{% else %}
{% set slug = path('staticPage', {id: subitem.item, slug: subitem.slug}) %}
{% endif %}
{% set rel = subitem.rel ? ' rel="' ~ subitem.rel ~ '"' : '' %}
{% set target = subitem.target ? ' target="' ~ subitem.target ~ '"' : '' %}
{% set activeSlug = slug|trim('/')|split('/')|last %}
<li class="{% if lastSegmentUrl == activeSlug %}active{% endif %}">
<a href="{{ slug }}"{{ rel|raw }}{{ target|raw }}>
{{ subitem.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
<div class="divider border-r border-frDarkBlue w-0 h-40 ml-20"></div>
<div class="search ml-40 w-15 lg:w-25">
<div id="header-desktop__toggle-search-button" class="search-button cursor-pointer">
<img src="{{ asset('vue/icons/search.svg', 'img') }}" alt="">
</div>
</div>
{# Decoration #}
<img src="{{ asset('vue/decor/header-line.svg', 'img') }}" class="relative top-[-25px] hidden lg:block w-[150px] z-10" alt="">
{% endif %}
</nav>
</div>
</div>
<div id="hamburger-menu-container" class="hamburger-menu-container flex gap-5 items-center justify-center flex-col bg-white hidden lg:hidden p-20 sm-text-card">
{% if header_menu is defined and header_menu != null %}
<ul class="hamburger-menu text-frDarkBlue flex flex-col items-center justify-start divide-y w-full">
{% for item in header_menu %}
{% if item.type == "folder" %}
{% set slug = path('folder', {folder: item.slug}) %}
{% elseif item.type == "custom" %}
{% set slug = item.url %}
{% elseif item.type == "category" %}
{% set slug = path('category', {category: item.slug}) %}
{% elseif item.type == "broadcast" %}
{% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
{% else %}
{% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
{% endif %}
{% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
{% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
{% set activeSlug = slug|trim('/')|split('/')|last %}
<li class="
hamburger-menu__link relative
{% if item.submenu is not empty %}has-submenu-mobile cursor-pointer{% endif %}
{% if lastSegmentUrl == activeSlug %}active{% endif %}
">
<a
href="{{ slug }}"
{{ rel|raw }}
{{ target|raw }}
>
{{ item.title }}
</a>
{% if item.submenu is not empty %}
<img
class="
arrow-icon
{% if lastSegmentUrl == activeSlug %}hidden{% else %}block{% endif %}
"
src="{{ asset('vue/icons/menu-arrow-down.svg', 'img') }}"
width="11" height="6" alt=""
/>
<img
class="
arrow-icon
{% if lastSegmentUrl == activeSlug %}block{% else %}hidden{% endif %}
"
src="{{ asset('vue/icons/menu-arrow-up.svg', 'img') }}"
width="11" height="6" alt=""
/>
{% endif %}
{% if item.submenu is not empty %}
<div class="hamburger-menu__submenu">
<ul>
{% for subitem in item.submenu %}
{% if subitem.type == "folder" %}
{% set slug = path('folder', {folder: subitem.slug}) %}
{% elseif subitem.type == "custom" %}
{% set slug = subitem.url %}
{% elseif subitem.type == "category" %}
{% set slug = path('category', {category: subitem.slug}) %}
{% elseif subitem.type == "broadcast" %}
{% set slug = path('broadcast', {id: subitem.item, slug: subitem.slug}) %}
{% else %}
{% set slug = path('staticPage', {id: subitem.item, slug: subitem.slug}) %}
{% endif %}
{% set rel = subitem.rel ? ' rel="' ~ subitem.rel ~ '"' : '' %}
{% set target = subitem.target ? ' target="' ~ subitem.target ~ '"' : '' %}
{% set activeSlug = slug|trim('/')|split('/')|last %}
<li class="{% if lastSegmentUrl == activeSlug %}active{% endif %}">
<a href="{{ slug }}" {{ rel|raw }} {{ target|raw }}>
{{ subitem.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
<div class="flex search-mobile-container items-center justify-center w-full">
<form class="flex w-full">
<input class="search-mobile-input" placeholder="Vyhľadávanie" type="text" />
<button class="search-mobile-action-button">
<img src="{{ asset('vue/icons/search.svg', 'img') }}" width="18px" alt="">
</button>
</form>
</div>
<!-- end hamburger menu -->
</div>
</header-menu>