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