app/Resources/views/includes/header_menu.html.twig line 1

Open in your IDE?
  1. <header-menu ref="headerMenuRef">
  2.     <!-- MOBILE HEADER -->
  3.     <div class="header-mobile h-[80px] lg:hidden items-center justify-center backdrop-blur-md bg-white/90 sm-text-card">
  4.         <div class="container flex flex-row items-center h-full justify-between">
  5.             <div class="header-mobile__logo-player-section flex flex-row w-full items-center gap-20">
  6.                 <div class="header-mobile__page-logo b-r">
  7.                     <a href="{{ path('homepage') }}"><img src="{{ asset('vue/icons/funRadioLogo.svg', 'img') }}?v={{ cache_busting }}" width="110" height="56" alt="{{ site_title }}"></a>
  8.                 </div>
  9.                 <div class="w-0 h-40 border-r border-frDarkBlue"></div>
  10.                 <mobile-header-radio-player></mobile-header-radio-player>
  11.             </div>
  12.             <div class="header-mobile__hamburger-menu">
  13.                 <div id="hamburger-menu-button" class="hamburger-menu-button ml-auto flex items-center">
  14.                     <img
  15.                         id="header-mobile__hamburger-menu-button"
  16.                         src="{{ asset('vue/icons/hamburger-menu.svg', 'img') }}?v={{ cache_busting }}"
  17.                         height="22"
  18.                         alt=""
  19.                     >
  20.                     <img
  21.                         id="header-mobile__close-search-button"
  22.                         class="hidden"
  23.                         src="{{ asset('vue/icons/close.svg', 'img') }}?v={{ cache_busting }}"
  24.                         height="22"
  25.                         alt=""
  26.                     >
  27.                 </div>
  28.             </div>
  29.         </div>
  30.     </div>
  31.     <!-- DESKTOP HEADER  -->
  32.     <div class="header-desktop h-[80px] hidden lg:flex items-center justify-center backdrop-blur-md bg-white/90 sm-text-card">
  33.         <div class="container flex items-center justify-between">
  34.             <div class="page-logo flex-0" ref="headerRef">
  35.                 <a href="{{ path('homepage') }}"><img src="{{ asset('vue/icons/funRadioLogo.svg', 'img') }}?v={{ cache_busting }}" width="110" height="56" alt="{{ site_title }}"></a>
  36.             </div>
  37.             <nav id="header-desktop-search" class="hidden flex flex-row justify-end items-center gap-20">
  38.                 <form>
  39.                     <input class="header-desktop__search-input" placeholder="Vyhľadávanie" type="text" />
  40.                     <button class="header-desktop__search-action-button">
  41.                         <img src="{{ asset('vue/icons/search.svg', 'img') }}" alt="">
  42.                     </button>
  43.                 </form>
  44.                 <div id="header-desktop__close-search-button" class="header-desktop__close-search-button">
  45.                     <img src="{{ asset('vue/icons/close.svg', 'img') }}" alt="">
  46.                 </div>
  47.             </nav>
  48.             <nav id="header-desktop-menu" class="flex flex-row justify-end items-center">
  49.                 {% if header_menu is defined and header_menu != null %}
  50.                     <ul class="header-desktop-menu space-x-10 text-frDarkBlue font-bold desktop-nav-l1">
  51.                         {% for item in header_menu %}
  52.                             {% if item.title == "Videá" %} {# Hardcoded part of header menu OLR DESIGN #}
  53.                                 <li class="header-desktop-link">
  54.                                     <a href="{{ path('homepage') }}#playlist-section" class="custom-video-scroll top-bar__link">Videá</a>
  55.                                 </li>
  56.                                 <li class="header-desktop-link">
  57.                                     <a href="{{ path('homepage') }}#playlist-section" class="custom-video-scroll top-bar__link" @click="menuToggle">Videá</a>
  58.                                 </li>
  59.                             {% else %}
  60.                                 {% if item.type == "folder" %}
  61.                                     {% set slug = path('folder', {folder: item.slug}) %}
  62.                                 {% elseif item.type == "custom" %}
  63.                                     {% set slug = item.url %}
  64.                                 {% elseif item.type == "category" %}
  65.                                     {% set slug = path('category', {category: item.slug}) %}
  66.                                 {% elseif item.type == "broadcast" %}
  67.                                     {% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
  68.                                 {% else %}
  69.                                     {% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
  70.                                 {% endif %}
  71.                                 {% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
  72.                                 {% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
  73.                                 {% set activeSlug = slug|trim('/')|split('/')|last %}
  74.                                 <li class="
  75.                                     header-desktop-link
  76.                                     {% if item.submenu is not empty %}
  77.                                         has-submenu
  78.                                         {% if slug is not empty %}
  79.                                             cursor-pointer
  80.                                         {% endif %}
  81.                                     {% else %}
  82.                                         {# Those with a sub-menu cannot has .active (because sub-menu bar would then be displayed) #}
  83.                                         {% if lastSegmentUrl == activeSlug %}
  84.                                             active
  85.                                         {% endif %}
  86.                                     {% endif %}
  87.                                 ">
  88.                                     <a {% if slug is not empty %} href="{{ slug }}" {% endif %}
  89.                                         {{ rel|raw }}
  90.                                         {{ target|raw }}
  91.                                     >
  92.                                         {{ item.title }}
  93.                                     </a>
  94.                                     {% if item.submenu is not empty %}
  95.                                         <div class="submenu font-normal">
  96.                                             <ul>
  97.                                                 {% for subitem in item.submenu %}
  98.                                                     {% if subitem.type == "folder" %}
  99.                                                         {% set slug = path('folder', {folder: subitem.slug}) %}
  100.                                                     {% elseif subitem.type == "custom" %}
  101.                                                         {% set slug = subitem.url %}
  102.                                                     {% elseif subitem.type == "category" %}
  103.                                                         {% set slug = path('category', {category: subitem.slug}) %}
  104.                                                     {% elseif subitem.type == "broadcast" %}
  105.                                                         {% set slug = path('broadcast', {id: subitem.item, slug: subitem.slug}) %}
  106.                                                     {% else %}
  107.                                                         {% set slug = path('staticPage', {id: subitem.item, slug: subitem.slug}) %}
  108.                                                     {% endif %}
  109.                                                     {% set rel = subitem.rel ? ' rel="' ~ subitem.rel ~ '"' : '' %}
  110.                                                     {% set target = subitem.target ? ' target="' ~ subitem.target ~ '"' : '' %}
  111.                                                     {% set activeSlug = slug|trim('/')|split('/')|last %}
  112.                                                     <li class="{% if lastSegmentUrl == activeSlug %}active{% endif %}">
  113.                                                         <a href="{{ slug }}"{{ rel|raw }}{{ target|raw }}>
  114.                                                             {{ subitem.title }}
  115.                                                         </a>
  116.                                                     </li>
  117.                                                 {% endfor %}
  118.                                             </ul>
  119.                                         </div>
  120.                                     {% endif %}
  121.                                 </li>
  122.                             {% endif %}
  123.                         {% endfor %}
  124.                     </ul>
  125.                     <div class="divider border-r border-frDarkBlue w-0 h-40 ml-20"></div>
  126.                     <div class="search ml-40 w-15 lg:w-25">
  127.                         <div id="header-desktop__toggle-search-button" class="search-button cursor-pointer">
  128.                             <img src="{{ asset('vue/icons/search.svg', 'img') }}" alt="">
  129.                         </div>
  130.                     </div>
  131.                     {# Decoration #}
  132.                     <img src="{{ asset('vue/decor/header-line.svg', 'img') }}" class="relative top-[-25px] hidden lg:block w-[150px] z-10" alt="">
  133.                 {% endif %}
  134.             </nav>
  135.         </div>
  136.     </div>
  137. <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">
  138.     {% if header_menu is defined and header_menu != null %}
  139.         <ul class="hamburger-menu text-frDarkBlue flex flex-col items-center justify-start divide-y w-full">
  140.             {% for item in header_menu %}
  141.                 {% if item.type == "folder" %}
  142.                     {% set slug = path('folder', {folder: item.slug}) %}
  143.                 {% elseif item.type == "custom" %}
  144.                     {% set slug = item.url %}
  145.                 {% elseif item.type == "category" %}
  146.                     {% set slug = path('category', {category: item.slug}) %}
  147.                 {% elseif item.type == "broadcast" %}
  148.                     {% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
  149.                 {% else %}
  150.                     {% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
  151.                 {% endif %}
  152.                 {% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
  153.                 {% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
  154.                 {% set activeSlug = slug|trim('/')|split('/')|last %}
  155.                 <li class="
  156.                 hamburger-menu__link relative
  157.                     {% if item.submenu is not empty %}has-submenu-mobile cursor-pointer{% endif %}
  158.                     {% if lastSegmentUrl == activeSlug %}active{% endif %}
  159.                 ">
  160.                     <a
  161.                         href="{{ slug }}"
  162.                         {{ rel|raw }}
  163.                         {{ target|raw }}
  164.                     >
  165.                         {{ item.title }}
  166.                     </a>
  167.                     {% if item.submenu is not empty %}
  168.                         <img
  169.                             class="
  170.                                 arrow-icon
  171.                                 {% if lastSegmentUrl == activeSlug %}hidden{% else %}block{% endif %}
  172.                             "
  173.                             src="{{ asset('vue/icons/menu-arrow-down.svg', 'img') }}"
  174.                             width="11" height="6" alt=""
  175.                         />
  176.                         <img
  177.                             class="
  178.                                 arrow-icon
  179.                                 {% if lastSegmentUrl == activeSlug %}block{% else %}hidden{% endif %}
  180.                             "
  181.                             src="{{ asset('vue/icons/menu-arrow-up.svg', 'img') }}"
  182.                             width="11" height="6" alt=""
  183.                         />
  184.                     {% endif %}
  185.                 {% if item.submenu is not empty %}
  186.                     <div class="hamburger-menu__submenu">
  187.                         <ul>
  188.                             {% for subitem in item.submenu %}
  189.                                 {% if subitem.type == "folder" %}
  190.                                     {% set slug = path('folder', {folder: subitem.slug}) %}
  191.                                 {% elseif subitem.type == "custom" %}
  192.                                     {% set slug = subitem.url %}
  193.                                 {% elseif subitem.type == "category" %}
  194.                                     {% set slug = path('category', {category: subitem.slug}) %}
  195.                                 {% elseif subitem.type == "broadcast" %}
  196.                                     {% set slug = path('broadcast', {id: subitem.item, slug: subitem.slug}) %}
  197.                                 {% else %}
  198.                                     {% set slug = path('staticPage', {id: subitem.item, slug: subitem.slug}) %}
  199.                                 {% endif %}
  200.                                 {% set rel = subitem.rel ? ' rel="' ~ subitem.rel ~ '"' : '' %}
  201.                                 {% set target = subitem.target ? ' target="' ~ subitem.target ~ '"' : '' %}
  202.                                 {% set activeSlug = slug|trim('/')|split('/')|last %}
  203.                                 <li class="{% if lastSegmentUrl == activeSlug %}active{% endif %}">
  204.                                     <a href="{{ slug }}" {{ rel|raw }} {{ target|raw }}>
  205.                                         {{ subitem.title }}
  206.                                     </a>
  207.                                 </li>
  208.                             {% endfor %}
  209.                         </ul>
  210.                     </div>
  211.                 {% endif %}
  212.             </li>
  213.             {% endfor %}
  214.         </ul>
  215.     {% endif %}
  216.     <div class="flex search-mobile-container items-center justify-center w-full">
  217.         <form class="flex w-full">
  218.             <input class="search-mobile-input" placeholder="Vyhľadávanie" type="text" />
  219.             <button class="search-mobile-action-button">
  220.                 <img src="{{ asset('vue/icons/search.svg', 'img') }}" width="18px" alt="">
  221.             </button>
  222.         </form>
  223.     </div>
  224.     <!-- end hamburger menu -->
  225. </div>
  226. </header-menu>