templates/includes/shared/navigation.html.twig line 1

Open in your IDE?
  1. {# navigation ul #}
  2. {# - item ( Onze oplossingen ) ul>ul #}
  3. {# - subitem ( [icon] koel en vriescellen ) ul>ul>ul #}
  4. {# - subsubitem (Koelen) #}
  5. {# - subsubitem (vriezen) #}
  6. {# - subsubitem (speciale toepassingen) #}
  7. {# - subitem ( [icon] ProcesKoeling ) ul>ul>ul #}
  8. {# - subsubitem (2-a) #}
  9. {# - subsubitem (2-b) #}
  10. {# - subitem ( [icon] Klimaatbeheersing ) ul>ul>ul #}
  11. {# - subsubitem (3-a) #}
  12. {# - subsubitem (3-b) #}
  13. {# - subitem ( [icon] Klimaatbeheersing ) ul>ul>ul #}
  14. {# - subsubitem (4-a) #}
  15. {# - subsubitem (4-b) #}
  16. {# - subsubitem (4-c) #}
  18. {# - item (branches) ul>ul #}
  19. {# - voedingsindustrie #}
  20. {# - subitem #}
  21. {# - subitem #}
  23. {# - item (actueel) #}
  25. {# - item (projecten) #}
  27. {# - item (over Coolworld) ul>ul #}
  28. {# - subitem #}
  29. {# - subitem #}
  30. {# - subitem #}
  32. {#- item (Werken bij) #}
  34. <ul class="{{ editmode ? "" : "lg:flex font-bold text-base" }}">
  35.     {% for mainNavigationItem in pimcore_block('mainNavigationItems', {'limit': 6,'class':"navigation editmode-iterator-styling" }).iterator %}
  36.         <li
  37.             class="px-5 border-b w-full py-2.5 border-b-gray-200 lg:border-none lg:px-0 lg:py-0 lg:mr-4 lg:border-red xl:mr-6 lg:w-auto"
  38.             x-data="{ isOpen: false }"
  39.             @mouseover="window.innerWidth > 1024 ? isOpen = true : ''"
  40.             @mouseover.away = "isOpen = false"
  41.         >
  42.             <div class="flex items-center justify-between lg:justify-start">
  43.                 {{ pimcore_link('link', {'class': "lg:text-white no-underline relative py-2"}) }}
  45.                 {% if pimcore_block('subnavigationitems').getCount %}
  46.                     <button
  47.                         class="ml-2 cursor-pointer text-gray lg:text-white py-1 px-1.5"
  48.                         :class="{ 'rotate-180': isOpen }"
  49.                         @click="isOpen = !isOpen"
  50.                         >
  51.                             <svg xmlns="http://www.w3.org/2000/svg" width="17" height="10"><path fill="currentColor" fill-rule="evenodd" d="m.39 2.36 6.73 6.964c.24.248.575.388.926.388.35 0 .685-.14.925-.388l6.732-6.964a1.206 1.206 0 0 0-.068-1.748l-.114-.09a1.297 1.297 0 0 0-1.669.154L8.045 6.684 2.239.677A1.295 1.295 0 0 0 .456.612 1.205 1.205 0 0 0 .389 2.36Z"/></svg>
  52.                     </button>
  53.                 {% endif %}
  54.             </div>
  56.             {% if editmode or pimcore_block('subnavigationitems').getCount %}
  57.                 <ul
  58.                     class="{{ editmode ?: "subnavigation" }} font-normal pt-2.5 lg:z-30 lg:-ml-6 lg:absolute lg:drop-shadow-2xl lg:bg-white lg:rounded-md lg:py-6 lg:pl-6 lg:min-w-[200px]"
  59.                     x-show="isOpen"
  60.                     {% if not editmode %}{# Anders verspringt dit block bij het openen van de pagina voordat Alpine wordt uitgevoerd. #}
  61.                         style="display:none;"
  62.                     {% endif %}
  63.                 >
  64.                     {% for subNavigationItem in pimcore_block('subnavigationitems', {'class':"subnavigation editmode-iterator-styling"}).iterator %}
  65.                         <li
  66.                             class="flex flex-col items-center py-3.5 text-gray-900 border-t border-b-gray-200 lg:border-none relative lg:py-0.5 lg:pr-6 "
  67.                             x-data="{ isOpen: false }"
  68.                             @mouseover="window.innerWidth > 1024 ? isOpen = true : ''"
  69.                             @mouseover.away = "isOpen = false"
  70.                         >
  71.                             <div class="flex items-center w-full group">
  72.                                 {% if not pimcore_image('inline-icon').isEmpty() or editmode %}
  73.                                     <span class="flex items-center w-8 h-8 mr-2 lg:w-5 lg:h-5 shrink-0">
  74.                                         {{ pimcore_image('inline-icon', {
  75.                                             'class': 'inline-block editor-inline-icon',
  76.                                             "thumbnail": "navigation-icon",
  77.                                             "title": "(optioneel) Icoon",
  78.                                             "width": 32,
  79.                                             "height": 32,
  80.                                             'hidetext': true,
  81.                                             'pictureAttributes':
  82.                                             {
  83.                                                 'class': 'block'
  84.                                             }
  85.                                         }) }}
  86.                                     </span>
  87.                                 {% endif %}
  89.                                 <span class="flex items-center justify-between w-full text-gray-900 group-hover:text-blue">
  90.                                     {{ pimcore_link('sublink', {'class': "lg:w-1/2 lg:grow lg:font-normal font-bold lg:mr-4"}) }}
  92.                                     {% if pimcore_block('subsubnavigationitems').getCount %}
  93.                                         <button
  94.                                             class="py-1 px-1.5 mr-1 lg:mr-0 text-gray lg:rotate-0 cursor-pointer group-hover:text-blue"
  95.                                             :class="isOpen ? '-rotate-90' : 'rotate-90 lg:rotate-0'"
  96.                                             @click="isOpen = !isOpen"
  97.                                         >
  98.                                             <svg xmlns="http://www.w3.org/2000/svg" width="10" height="16"><path fill="currentColor" fill-rule="evenodd" d="m2.406 15.656 6.963-6.731c.249-.24.389-.575.389-.925 0-.35-.14-.685-.389-.925L2.406.343A1.206 1.206 0 0 0 .657.41l-.09.113a1.297 1.297 0 0 0 .154 1.67L6.731 8 .722 13.807a1.295 1.295 0 0 0-.065 1.783c.463.52 1.248.55 1.748.066Z"/></svg>
  99.                                         </button>
  100.                                     {% endif %}
  101.                                 </span>
  102.                             </div>
  104.                             {% if pimcore_block('subsubnavigationitems').getCount %}
  105.                                 <ul
  106.                                     class="subsubnavigation {{ editmode ?: "w-full px-0 mt-3 lg:absolute lg:top-0 bg-white lg:py-6 lg:px-6 lg:-mt-6 lg:translate-x-full lg:rounded-md lg:drop-shadow-2xl" }}"
  107.                                     x-show="isOpen"
  108.                                 >
  109.                             {% endif %}
  111.                                 {% for subSubNavigationItem in pimcore_block('subsubnavigationitems', {'class':"subsubnavigation editmode-iterator-styling"}).iterator %}
  112.                                     <li class="py-3 border-t border-gray-200 lg:border-none lg:py-0">
  113.                                         {{ pimcore_link('subsublink', {'class': "text-gray-900 hover:text-blue py-0.5 block"}) }}
  114.                                     </li>
  115.                                 {% endfor %}
  117.                             {% if pimcore_block('subsubnavigationitems').getCount %}
  118.                                 </ul>
  119.                             {% endif %}
  120.                         </li>
  121.                     {% endfor %}
  122.                 </ul>
  123.             {% endif %}
  124.         </li>
  125.     {% endfor %}
  126. </ul>
  128. <style>
  129.     .editmode-iterator-styling {
  130.         background-color: white;
  131.         font-family: 'Aller', sans-serif;
  132.         padding: 1rem;
  133.     }
  135.     .editmode-iterator-styling a {
  136.         color: #000;
  137.         text-decoration: none;
  138.     }
  140.     .editmode-iterator-styling a:hover {
  141.         text-decoration: underline;
  142.     }
  144.     .editmode-iterator-styling.navigation,
  145.     .editmode-iterator-styling.subnavigation,
  146.     .editmode-iterator-styling.subsubnavigation {
  147.         border: 1px dashed #ccc;
  148.         border-radius: 5px;
  149.         margin-bottom: 10px;
  150.     }
  152.     .editmode-iterator-styling.subnavigation,
  153.     .editmode-iterator-styling.subsubnavigation {
  154.         margin-top: 20px;
  155.     }
  157.     .inline-icon {
  158.         display: inline-block;
  159.     }
  161.     .editor-inline-icon {
  162.         min-width: 125px;
  163.         margin-bottom: 10px;
  164.     }
  166.     .pimcore_block_buttons {
  167.         margin: 5px 0 10px 0;
  168.     }
  170.     /*ul {*/
  171.     /*    list-style: none;*/
  172.     /*    padding: 0;*/
  173.     /*}*/
  175. </style>