templates/components/navbar.html.twig line 1

Open in your IDE?
  1. {% set lastNavItem = sulu_navigation_root_tree('main', 2)|last %}
  2. <div class="nav-wrapper">
  3.     <div class="menu position-fixed top-0 w-100 bg-white d-flex align-items-center shadow-sm">
  4.         <div class="container">
  5.             <div class="row d-flex align-items-center">
  6.                 <div class="col-2">
  7.                     <a href="{{ sulu_content_root_path() }}">
  8.                         <img class="header-logo" src="{{ webspaceSettings.content.headerLogo.url|default('/website/images/placeholder-image.png') }}" alt="Logo">
  9.                     </a>
  10.                 </div>
  11.                 <div class="col-10 d-flex justify-content-end">
  12.                     <ul class="desktop-navbar d-none w-100 m-0 d-xl-inline-flex justify-content-end align-items-center">
  13.                         {% for item in sulu_navigation_root_tree('main', 4)|slice(0, -1) %}
  14.                             {% if item.title == 'Kontakt' %}
  15.                                 <li class="custom-dropdown-menu d-flex align-items-center position-relative">
  16.                                     <a class="{{ active_route(app.request.attributes.get( '_route' ), item.template) ? 'active' }}"
  17.                                         href="{{ sulu_content_path(item.url) }}"
  18.                                         {% if item.nodeType == 4 %}target="_blank" rel="noopener"{% endif %}>
  19.                                         <span>{{ item.title }}</span>
  20.                                         <i class="custom-dropdown-menu-icon fa-solid fa-chevron-down"></i>
  21.                                     </a>
  22.                                     <div class="custom-dropdown-menu-wrapper top-space-relative">
  23.                                         <ul class="custom-dropdown-menu-item shadow">
  24.                                             <a class="d-block px-4 py-3 dropdown-link" href="{{ sulu_content_path(item.url) }}#contact-form">Kontaktformular</a>
  25.                                             <a class="d-block px-4 py-3 dropdown-link" href="{{ sulu_content_path(item.url) }}#contact-persons">Ansprechpartner</a>
  26.                                         </ul>
  27.                                     </div>
  28.                                 </li>
  29.                             {% else %}
  30.                                 {% if item.children|length > 0 %}
  31.                                     <li class="custom-dropdown-menu d-flex align-items-center">
  32.                                         <a class="{{ active_route(app.request.attributes.get( '_route' ), item.template) ? 'active' }}" href="{{ sulu_content_path(item.url) }}">
  33.                                             <span>{{ item.title }}</span>
  34.                                             <i class="custom-dropdown-menu-icon fa-solid fa-chevron-down"></i>
  35.                                         </a>
  36.                                         <div class="custom-dropdown-menu-wrapper top-space w-100 ">
  37.                                             <div class="custom-dropdown-menu-item shadow py-3">
  38.                                                 <div class="container">
  39.                                                     <div class="row g-3">
  40.                                                         {% for child in item.children %}
  41.                                                             <div class="col-lg-3 col-6">
  42.                                                                 <ul class="list-unstyled">
  43.                                                                     <li>
  44.                                                                         <a class="noto-sans-bold d-inline-flex {{ active_route(app.request.attributes.get( '_route' ), child.template) ? 'active' }}" href="{{ sulu_content_path(child.url) }}">
  45.                                                                             {{ child.title }}
  46.                                                                         </a>
  47.                                                                     </li>
  48.                                                                     {% if (child.children|length > 0) %}
  49.                                                                         {% for subchild in child.children %}
  50.                                                                             <li><a class="d-inline-flex {{ active_route(app.request.attributes.get( '_route' ), subchild.template) ? 'active' }}" href="{{ sulu_content_path(subchild.url) }}">{{ subchild.title }}</a></li>
  51.                                                                         {% endfor %}
  52.                                                                     {% endif %}
  53.                                                                 </ul>
  54.                                                             </div>
  55.                                                         {% endfor %}
  56.                                                     </div>
  57.                                                 </div>
  58.                                             </div>
  59.                                         </div>
  60.                                     </li>
  61.                                 {% else %}
  62.                                     <li>
  63.                                         <a  {% if item.nodeType == 4 %}target="_blank" rel="noopener"{% endif %} class="{{ active_route(app.request.attributes.get( '_route' ), item.template) ? 'active' }}" href="{{ sulu_content_path(item.url, item.webspaceKey) }}" title="{{ item.title }}">
  64.                                             {{ item.title }}
  65.                                         </a>
  66.                                     </li>
  67.                                 {% endif %}
  68.                             {% endif %}
  69.                         {% endfor %}
  70.                         <li class="me-0">
  71.                             <a class="nav-button py-0" href="{{ sulu_content_path(lastNavItem.url, lastNavItem.webspaceKey) }}">
  72.                                 <span class="button fw-normal btn-nav d-inline-flex align-items-center justify-content-center darker-blue">
  73.                                     <span>{{ lastNavItem.title|default('Mehr erfahren') }}</span>
  74.                                 </span>
  75.                             </a>
  76.                         </li>
  77.                     </ul>
  78.                     <div data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" class="hamburger-menu d-xl-none d-inline-flex">
  79.                         <i class="fa-solid fa-bars fa-2x"></i>
  80.                     </div>
  81.                 </div>
  82.             </div>
  83.         </div>
  84.     </div>
  86.     <div class="offcanvas offcanvas-end d-flex flex-column justify-content-between" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  87.         <div class="px-3 navbar-mobile-header shadow-sm">
  88.             <div class="d-flex align-items-center justify-content-between">
  89.                 <a href="{{ sulu_content_root_path() }}">
  90.                     <img class="header-logo" src="{{ webspaceSettings.content.headerLogo.url|default('/website/images/placeholder-image.png') }}" alt="Logo">
  91.                 </a>
  92.                 <i data-bs-dismiss="offcanvas" aria-label="Close" class="navbar-close-button fa-solid fa-xmark fa-2x"></i>
  93.             </div>
  94.         </div>
  95.         <div class="navbar-mobile-body">
  96.             <ul class="ul-body">
  97.                 {% for item in sulu_navigation_root_tree('main', 4)|slice(0, -1) %}
  98.                     <li>
  99.                         {% if item.title == 'Kontakt' %}
  100.                             <a class="d-inline-flex align-items-center contact-collapse-mobile-button" data-bs-toggle="collapse" href="#contactCollapse" role="button" aria-expanded="false" aria-controls="contactCollapse">
  101.                                 <span class="me-2">{{ item.title }}</span>
  102.                                 <i class="arrow-right fa-solid fa-angle-down"></i>
  103.                             </a>
  104.                             <div class="collapse" id="contactCollapse">
  105.                                 <ul class="ms-4 list-unstyled">
  106.                                     <li>
  107.                                         <a class="d-inline-flex noto-sans-bold {{ active_route(app.request.attributes.get( '_route' ), item.template) ? 'active' }}" href="{{ sulu_content_path(item.url) }}">Übersicht</a>
  108.                                     </li>
  109.                                     <li data-bs-dismiss="offcanvas" class="collapse-contact-accordion-button">
  110.                                         <a class="d-inline-flex" href="{{ sulu_content_path(item.url) }}#contact-form">Kontaktformular</a>
  111.                                     </li>
  112.                                     <li data-bs-dismiss="offcanvas" class="collapse-contact-accordion-button">
  113.                                         <a class="d-inline-flex" href="{{ sulu_content_path(item.url) }}#contact-persons">Ansprechpartner</a>
  114.                                     </li>
  115.                                 </ul>
  116.                             </div>
  117.                         {% else %}
  118.                             {% if (item.children|length > 0) %}
  119.                                 <a class="d-inline-flex align-items-center services-collapse-mobile-button" data-bs-toggle="collapse" href="#menuAccordion" role="button" aria-expanded="false" aria-controls="menuAccordion">
  120.                                     <span class="me-2">{{ item.title }}</span>
  121.                                     <i class="arrow-right fa-solid fa-angle-down"></i>
  122.                                 </a>
  123.                                 <div class="ms-4 collapse" id="menuAccordion">
  124.                                     {% if (item.title == 'Leistungen') %}
  125.                                         <ul class="list-unstyled">
  126.                                             <li data-bs-dismiss="offcanvas" class="collapse-services-accordion-button">
  127.                                                 <a class="noto-sans-bold d-inline-flex {{ active_route(app.request.attributes.get( '_route' ), item.template) ? 'active' }}" href="{{ sulu_content_path(item.url) }}">Übersicht</a>
  128.                                             </li>
  129.                                         </ul>
  130.                                     {% endif %}
  131.                                     {% for item in sulu_navigation_root_tree('main', 4)|slice(0, -1) %}
  132.                                         {% for child in item.children %}
  133.                                             <ul class="list-unstyled">
  134.                                                 <li data-bs-dismiss="offcanvas" class="collapse-services-accordion-button">
  135.                                                     <a class="noto-sans-bold d-inline-flex {{ active_route(app.request.attributes.get( '_route' ), child.template) ? 'active' }}" href="{{ sulu_content_path(child.url) }}">
  136.                                                         {{ child.title }}
  137.                                                     </a>
  138.                                                 </li>
  139.                                                 {% if (child.children|length > 0) %}
  140.                                                     {% for subchild in child.children %}
  141.                                                         <li data-bs-dismiss="offcanvas" class="collapse-services-accordion-button"><a class="d-inline-flex {{ active_route(app.request.attributes.get( '_route' ), subchild.template) ? 'active' }}" href="{{ sulu_content_path(subchild.url) }}">{{ subchild.title }}</a></li>
  142.                                                     {% endfor %}
  143.                                                 {% endif %}
  144.                                             </ul>
  145.                                         {% endfor %}
  146.                                     {% endfor %}
  147.                                 </div>
  148.                             {% else %}
  149.                                 <a
  150.                                     id="item-{{ item.id }}"
  151.                                     class="d-inline-flex {{ active_route(app.request.attributes.get( '_route' ), item.template) ? 'active' }}"
  152.                                     href="{{ sulu_content_path(item.url) }}"
  153.                                     {% if item.nodeType == 4 %}target="_blank" rel="noopener"{% endif %}
  154.                                 >
  155.                                     {{ item.title }}
  156.                                 </a>
  157.                             {% endif %}
  158.                         {% endif %}
  159.                     </li>
  160.                 {% endfor %}
  161.             </ul>
  162.             <a class="navbar-mobile-button nav-button" href="{{ sulu_content_path(lastNavItem.url, lastNavItem.webspaceKey) }}">
  163.                 <span class="button fw-normal btn-nav d-inline-flex align-items-center justify-content-center darker-blue w-100">
  164.                     {{ include('@components/icons/person-circle.html.twig', {
  165.                         color: 'text-yellow'
  166.                     }) }}
  167.                     <span class="ms-2">{{ lastNavItem.title|default('Mehr erfahren') }}</span>
  168.                 </span>
  169.             </a>
  170.         </div>
  171.     </div>
  172. </div>