templates/mazdashop/nav.html.twig line 1

Open in your IDE?
  1. <section class="navbar">
  2.   <div class="container d-flex">
  3.     <!-- logo -->
  4.     <div class="logo float-left">
  5.       <a href="{{ path('homepage') }}">
  6.         {% if Settings is defined %}
  7.           <img src="{{Settings.logo}}"></a>
  8.       {% endif %}
  9.     </div>
  11.     <!-- main nav -->
  12.     <div class="nav-wrapper text-center" style="">
  13.       {{ custom_navigation('nav_before') }}
  14.       <div class="custom-nav-wrapper model-dropdown">
  15.         {# {{ custom_navigation('nav_main') }} #}
  17.         {% if Settings.language.getLocale == 'nl' %}
  18.         <ul class="custom-nav key-nav_main">
  19.           <li class="drop has-children auto-accessoires ">
  20.             <a href="/auto-accessoires">
  21.               <span>Auto Accessoires&nbsp;<i class="fa fa-angle-down"></i></span></a>
  23.             <ul class="has-parent sub dropdown depth-0">
  24.               <li class="drop has-children mazda2 ">
  25.                 <div class="model-wrapper">
  26.                   <a href="/auto-accessoires/mazda2-2015">
  27.                     <span>Mazda2</span></a>
  28.                   <div class="model-years">
  29.                     <a href="/auto-accessoires/mazda2-2015">2015</a>
  30.                     &nbsp;|&nbsp;
  31.                     <a href="/auto-accessoires/mazda2-2010">2010</a>
  32.                   </div>
  33.                 </div>
  34.               </li>
  36.               <li class="drop has-children mazda3 ">
  37.                 <div class="model-wrapper">
  38.                   <a href="/auto-accessoires/mazda3-2018">
  39.                     <span>Mazda3</span></a>
  40.                   <div class="model-years">
  41.                     <a href="/auto-accessoires/mazda3-2018">2018</a>
  42.                     &nbsp;|&nbsp;
  43.                     <a href="/auto-accessoires/mazda3-2016">2016</a>
  44.                   </div>
  45.                 </div>
  46.               </li>
  48.               <li class="drop has-children mazda6 ">
  49.                 <div class="model-wrapper">
  50.                   <a href="/auto-accessoires/mazda6-2018">
  51.                     <span>Mazda6</span></a>
  52.                   <div class="model-years">
  53.                     <a href="/auto-accessoires/mazda6-2018">2018</a>
  54.                     &nbsp;|&nbsp;
  55.                     <a href="/auto-accessoires/mazda6-2016">2016</a>
  56.                   </div>
  57.                 </div>
  58.               </li>
  60.               <li class="drop has-children mazda-cx3 ">
  61.                 <div class="model-wrapper">
  62.                   <a href="/auto-accessoires/mazda-cx-3-2018">
  63.                     <span>Mazda CX-3</span></a>
  64.                   <div class="model-years">
  65.                     <a href="/auto-accessoires/mazda-cx-3-2018">2018</a>
  66.                     &nbsp;|&nbsp;
  67.                     <a href="/auto-accessoires/mazda-cx-3-2015">2015</a>
  68.                   </div>
  69.                 </div>
  70.               </li>
  72.               <li class="drop has-children mazda-cx30 ">
  73.                 <div class="model-wrapper">
  74.                   <a href="/auto-accessoires/mazda-cx-30">
  75.                     <span>Mazda CX-30</span></a>
  76.                   <div class="model-years">
  77.                     <a href="/auto-accessoires/mazda-cx-30">2019</a>
  78.                   </div>
  79.                 </div>
  80.               </li>
  82.               <li class="drop has-children mazda-cx5">
  83.                 <div class="model-wrapper">
  84.                   <a href="/auto-accessoires/mazda-cx-5-2017">
  85.                     <span>Mazda CX-5</span></a>
  86.                   <div class="model-years">
  87.                     <a href="/auto-accessoires/mazda-cx-5-2017">2017</a>
  88.                     &nbsp;|&nbsp;
  89.                     <a href="/auto-accessoires/mazda-cx-5-2015">2015</a>
  90.                   </div>
  91.                 </div>
  92.               </li>
  94.               <li class="drop has-children mazda-mx-5">
  95.                 <div class="model-wrapper">
  96.                   <a href="/auto-accessoires/mazda-mx-5">
  97.                     <span>Mazda MX-5</span></a>
  98.                   <div class="model-years">
  99.                     <a href="/auto-accessoires/mazda-mx-5">MX-5</a>
  100.                     &nbsp;|&nbsp;
  101.                     <a href="/auto-accessoires/mazda-mx-5-rf">MX-5 RF</a>
  102.                   </div>
  103.                 </div>
  104.               </li>
  106.               <li class="drop has-children mazda-mx-30">
  107.                 <div class="model-wrapper">
  108.                   <a href="/auto-accessoires/mazda-mx-30">
  109.                     <span>Mazda MX-30</span></a>
  110.                   <div class="model-years">
  111.                     <a href="/auto-accessoires/mazda-mx-30">2022</a>
  112.                   </div>
  113.                 </div>
  114.               </li>
  116.               <li class="drop has-children mazda-cx60">
  117.                 <div class="model-wrapper">
  118.                   <a href="/auto-accessoires/mazda-cx-60">
  119.                     <span>Mazda CX-60</span></a>
  120.                   <div class="model-years">
  121.                     <a href="/auto-accessoires/mazda-mx-30">2022</a>
  122.                   </div>
  123.                 </div>
  124.               </li>
  125.             </ul>
  126.           </li>
  127.         </ul>
  128.         {% endif %}
  129.         {% if Settings.language.getLocale == 'gb' %}
  130.         <ul class="custom-nav key-nav_main">
  131.           <li class="drop has-children auto-accessoires ">
  132.             <a href="/car-accessoires">
  133.               <span>Car Accessoires&nbsp;<i class="fa fa-angle-down"></i></span></a>
  135.             <ul class="has-parent sub dropdown depth-0">
  136.               <li class="drop has-children mazda2 ">
  137.                 <div class="model-wrapper">
  138.                   <a href="/car-accessoires/mazda2-2015">
  139.                     <span>Mazda2</span></a>
  140.                   <div class="model-years">
  141.                     <a href="/car-accessoires/mazda2-2015">2015</a>
  142.                     &nbsp;|&nbsp;
  143.                     <a href="/car-accessoires/mazda2-2010">2010</a>
  144.                   </div>
  145.                 </div>
  146.               </li>
  148.               <li class="drop has-children mazda3 ">
  149.                 <div class="model-wrapper">
  150.                   <a href="/car-accessoires/mazda3-2018">
  151.                     <span>Mazda3</span></a>
  152.                   <div class="model-years">
  153.                     <a href="/car-accessoires/mazda3-2018">2018</a>
  154.                     &nbsp;|&nbsp;
  155.                     <a href="/car-accessoires/mazda3-2016">2016</a>
  156.                   </div>
  157.                 </div>
  158.               </li>
  160.               <li class="drop has-children mazda6 ">
  161.                 <div class="model-wrapper">
  162.                   <a href="/car-accessoires/mazda6-2018">
  163.                     <span>Mazda6</span></a>
  164.                   <div class="model-years">
  165.                     <a href="/car-accessoires/mazda6-2018">2018</a>
  166.                     &nbsp;|&nbsp;
  167.                     <a href="/car-accessoires/mazda6-2016">2016</a>
  168.                   </div>
  169.                 </div>
  170.               </li>
  172.               <li class="drop has-children mazda-cx3 ">
  173.                 <div class="model-wrapper">
  174.                   <a href="/car-accessoires/mazda-cx-3-2018">
  175.                     <span>Mazda CX-3</span></a>
  176.                   <div class="model-years">
  177.                     <a href="/car-accessoires/mazda-cx-3-2018">2018</a>
  178.                     &nbsp;|&nbsp;
  179.                     <a href="/car-accessoires/mazda-cx-3-2015">2015</a>
  180.                   </div>
  181.                 </div>
  182.               </li>
  184.               <li class="drop has-children mazda-cx30 ">
  185.                 <div class="model-wrapper">
  186.                   <a href="/car-accessoires/mazda-cx-30">
  187.                     <span>Mazda CX-30</span></a>
  188.                   <div class="model-years">
  189.                     <a href="/car-accessoires/mazda-cx-30">2019</a>
  190.                   </div>
  191.                 </div>
  192.               </li>
  194.               <li class="drop has-children mazda-cx5">
  195.                 <div class="model-wrapper">
  196.                   <a href="/car-accessoires/mazda-cx-5-2017">
  197.                     <span>Mazda CX-5</span></a>
  198.                   <div class="model-years">
  199.                     <a href="/car-accessoires/mazda-cx-5-2017">2017</a>
  200.                     &nbsp;|&nbsp;
  201.                     <a href="/car-accessoires/mazda-cx-5-2015">2015</a>
  202.                   </div>
  203.                 </div>
  204.               </li>
  206.               <li class="drop has-children mazda-mx-5">
  207.                 <div class="model-wrapper">
  208.                   <a href="/car-accessoires/mazda-mx-5">
  209.                     <span>Mazda MX-5</span></a>
  210.                   <div class="model-years">
  211.                     <a href="/car-accessoires/mazda-mx-5">MX-5</a>
  212.                     &nbsp;|&nbsp;
  213.                     <a href="/car-accessoires/mazda-mx-5-rf">MX-5 RF</a>
  214.                   </div>
  215.                 </div>
  216.               </li>
  218.               <li class="drop has-children mazda-mx-30">
  219.                 <div class="model-wrapper">
  220.                   <a href="/car-accessoires/mazda-mx-30">
  221.                     <span>Mazda MX-30</span></a>
  222.                   <div class="model-years">
  223.                     <a href="/car-accessoires/mazda-mx-30">2022</a>
  224.                   </div>
  225.                 </div>
  226.               </li>
  228.               <li class="drop has-children mazda-cx60">
  229.                 <div class="model-wrapper">
  230.                   <a href="/car-accessoires/mazda-cx-60">
  231.                     <span>Mazda CX-60</span></a>
  232.                   <div class="model-years">
  233.                     <a href="/car-accessoires/mazda-mx-30">2022</a>
  234.                   </div>
  235.                 </div>
  236.               </li>
  237.             </ul>
  238.           </li>
  239.         </ul>
  240.         {% endif %}
  241.         {% if Settings.language.getLocale == 'de' %}
  242.           <ul class="custom-nav key-nav_main">
  243.           <li class="drop has-children auto-accessoires ">
  244.             <a href="/auto-zubehor/">
  245.               <span>Auto Zubehor&nbsp;<i class="fa fa-angle-down"></i></span></a>
  247.             <ul class="has-parent sub dropdown depth-0">
  248.               <li class="drop has-children mazda2 ">
  249.                 <div class="model-wrapper">
  250.                   <a href="/auto-zubehor/mazda2-2015">
  251.                     <span>Mazda2</span></a>
  252.                   <div class="model-years">
  253.                     <a href="/auto-zubehor/mazda2-2015">2015</a>
  254.                     &nbsp;|&nbsp;
  255.                     <a href="/auto-zubehor/mazda2-2010">2010</a>
  256.                   </div>
  257.                 </div>
  258.               </li>
  260.               <li class="drop has-children mazda3 ">
  261.                 <div class="model-wrapper">
  262.                   <a href="/auto-zubehor/mazda3-2018">
  263.                     <span>Mazda3</span></a>
  264.                   <div class="model-years">
  265.                     <a href="/auto-zubehor/mazda3-2018">2018</a>
  266.                     &nbsp;|&nbsp;
  267.                     <a href="/auto-zubehor/mazda3-2016">2016</a>
  268.                   </div>
  269.                 </div>
  270.               </li>
  272.               <li class="drop has-children mazda6 ">
  273.                 <div class="model-wrapper">
  274.                   <a href="/auto-zubehor/mazda6-2018">
  275.                     <span>Mazda6</span></a>
  276.                   <div class="model-years">
  277.                     <a href="/auto-zubehor/mazda6-2018">2018</a>
  278.                     &nbsp;|&nbsp;
  279.                     <a href="/auto-zubehor/mazda6-2016">2016</a>
  280.                   </div>
  281.                 </div>
  282.               </li>
  284.               <li class="drop has-children mazda-cx3 ">
  285.                 <div class="model-wrapper">
  286.                   <a href="/auto-zubehor/mazda-cx-3-2018">
  287.                     <span>Mazda CX-3</span></a>
  288.                   <div class="model-years">
  289.                     <a href="/auto-zubehor/mazda-cx-3-2018">2018</a>
  290.                     &nbsp;|&nbsp;
  291.                     <a href="/auto-zubehor/mazda-cx-3-2015">2015</a>
  292.                   </div>
  293.                 </div>
  294.               </li>
  296.               <li class="drop has-children mazda-cx30 ">
  297.                 <div class="model-wrapper">
  298.                   <a href="/auto-zubehor/mazda-cx-30">
  299.                     <span>Mazda CX-30</span></a>
  300.                   <div class="model-years">
  301.                     <a href="/auto-zubehor/mazda-cx-30">2019</a>
  302.                   </div>
  303.                 </div>
  304.               </li>
  306.               <li class="drop has-children mazda-cx5">
  307.                 <div class="model-wrapper">
  308.                   <a href="/auto-zubehor/mazda-cx-5-2017">
  309.                     <span>Mazda CX-5</span></a>
  310.                   <div class="model-years">
  311.                     <a href="/auto-zubehor/mazda-cx-5-2017">2017</a>
  312.                     &nbsp;|&nbsp;
  313.                     <a href="/auto-zubehor/mazda-cx-5-2015">2015</a>
  314.                   </div>
  315.                 </div>
  316.               </li>
  318.               <li class="drop has-children mazda-mx-5">
  319.                 <div class="model-wrapper">
  320.                   <a href="/auto-zubehor/mazda-mx-5">
  321.                     <span>Mazda MX-5</span></a>
  322.                   <div class="model-years">
  323.                     <a href="/auto-zubehor/mazda-mx-5">MX-5</a>
  324.                     &nbsp;|&nbsp;
  325.                     <a href="/auto-zubehor/mazda-mx-5-rf">MX-5 RF</a>
  326.                   </div>
  327.                 </div>
  328.               </li>
  330.               <li class="drop has-children mazda-mx-30">
  331.                 <div class="model-wrapper">
  332.                   <a href="/auto-zubehor/mazda-mx-30">
  333.                     <span>Mazda MX-30</span></a>
  334.                   <div class="model-years">
  335.                     <a href="/auto-zubehor/mazda-mx-30">2022</a>
  336.                   </div>
  337.                 </div>
  338.               </li>
  340.               <li class="drop has-children mazda-cx60">
  341.                 <div class="model-wrapper">
  342.                   <a href="/auto-zubehor/mazda-cx-60">
  343.                     <span>Mazda CX-60</span></a>
  344.                   <div class="model-years">
  345.                     <a href="/auto-zubehor/mazda-mx-30">2022</a>
  346.                   </div>
  347.                 </div>
  348.               </li>
  349.             </ul>
  350.           </li>
  351.         </ul>
  352.         {% endif %}
  353.       </div>
  354.       {{ custom_navigation('nav_after') }}
  356.       <ul class="nav">
  357.         {#
  358.         <li>
  359.           <a href="/">
  360.             <span class="fa fa-home"></span></a>
  361.         </li>
  362.         {{ webshop_navigation('', '', 0) }}
  363.         {{ cms_navigation('', '', 0) }}
  364.         #}
  366.         <li class="d-block d-xl-none">
  367.           <a href="/contact">Contact</a>
  368.         </li>
  369.       </ul>
  370.     </div>
  372.     <!-- mobile toggle -->
  373.     {% if Settings.language.getLocale == 'nl' %}
  374.     <div class="nav-tools">
  375.       <ul class="nav-user">
  376.         {% if app.user %}
  377.           <li>
  378.             <span>
  379.               <i class="far fa-user"></i>
  380.               <!-- <span class="d-none d-md-inline-block">Account</span> -->
  381.               <i class="fa fa-angle-down d-inline"></i>
  382.             </span>
  384.             <ul class="text-left">
  385.               <li>
  386.                 <a href="/mijn-account/mijn-account">
  387.                   <i class="far fa-fw fa-user"></i>
  388.                   {{'Mijn account'|trans({})|raw}}</a>
  389.               </li>
  390.               <li>
  391.                 <a href="/mijn-account/mijn-bestellingen">
  392.                   <i class="fa fa-fw fa-shopping-bag"></i>
  393.                   {{'Mijn bestellingen'|trans({})|raw}}</a>
  394.               </li>
  395.               <li>
  396.                 <a href="/mijn-account/opgeslagen-producten">
  397.                   <i class="far fa-fw fa-list-alt"></i>
  398.                   {{'Mijn lijstjes'|trans({})|raw}}</a>
  399.               </li>
  400.               <li>
  401.                 <a href="/logout">
  402.                   <i class="fa fa-fw fa-power-off"></i>
  403.                   {{'Uitloggen'|trans({})|raw}}</a>
  404.               </li>
  405.             </ul>
  406.           </li>
  407.         {% else %}
  408.           <li>
  409.             <a href="/mijn-account/mijn-account">
  410.               <i class="far fa-user"></i>
  411.               <!-- <span class="d-none d-md-inline-block">Account</span> -->
  412.             </a>
  413.           </li>
  414.         {% endif %}
  415.       </ul>
  417.       <ul>
  418.         {{ webshop_cart('<li>', '</li>') }}
  419.       </ul>
  421.       <ul class="d-inline-block d-xl-none">
  422.         <li>
  423.           <span>
  424.             <div class="toggle">
  425.               <div class="bars">
  426.                 <div class="bar">
  427.                   <span></span>
  428.                 </div>
  429.                 <div class="bar">
  430.                   <span></span>
  431.                 </div>
  432.                 <div class="bar">
  433.                   <span></span>
  434.                 </div>
  435.               </div>
  436.             </div>
  437.           </span>
  438.         </li>
  439.       </ul>
  440.     </div>
  441.     {% elseif Settings.language.getLocale == 'de' %}
  442.     <div class="nav-tools">
  443.       <ul class="nav-user">
  444.         {% if app.user %}
  445.           <li>
  446.             <span>
  447.               <i class="far fa-user"></i>
  448.               <!-- <span class="d-none d-md-inline-block">Account</span> -->
  449.               <i class="fa fa-angle-down d-inline"></i>
  450.             </span>
  452.             <ul class="text-left">
  453.               <li>
  454.                 <a href="/mein-konto/mein-konto">
  455.                   <i class="far fa-fw fa-user"></i>
  456.                   {{'Mijn account'|trans({})|raw}}</a>
  457.               </li>
  458.               <li>
  459.                 <a href="/mein-konto/meine-bestellungen">
  460.                   <i class="fa fa-fw fa-shopping-bag"></i>
  461.                   {{'Mijn bestellingen'|trans({})|raw}}</a>
  462.               </li>
  463.               <li>
  464.                 <a href="/mein-konto/gespeicherte-produkte">
  465.                   <i class="far fa-fw fa-list-alt"></i>
  466.                   {{'Mijn lijstjes'|trans({})|raw}}</a>
  467.               </li>
  468.               <li>
  469.                 <a href="/mein-konto/ausloggen">
  470.                   <i class="fa fa-fw fa-power-off"></i>
  471.                   {{'Uitloggen'|trans({})|raw}}</a>
  472.               </li>
  473.             </ul>
  474.           </li>
  475.         {% else %}
  476.           <li>
  477.             <a href="/mein-konto/mein-konto">
  478.               <i class="far fa-user"></i>
  479.               <!-- <span class="d-none d-md-inline-block">Account</span> -->
  480.             </a>
  481.           </li>
  482.         {% endif %}
  483.       </ul>
  485.       <ul>
  486.         {{ webshop_cart('<li>', '</li>') }}
  487.       </ul>
  489.       <ul class="d-inline-block d-xl-none">
  490.         <li>
  491.           <span>
  492.             <div class="toggle">
  493.               <div class="bars">
  494.                 <div class="bar">
  495.                   <span></span>
  496.                 </div>
  497.                 <div class="bar">
  498.                   <span></span>
  499.                 </div>
  500.                 <div class="bar">
  501.                   <span></span>
  502.                 </div>
  503.               </div>
  504.             </div>
  505.           </span>
  506.         </li>
  507.       </ul>
  508.     </div>
  509.     {% elseif Settings.language.getLocale == 'gb' %}
  510.     <div class="nav-tools">
  511.       <ul class="nav-user">
  512.         {% if app.user %}
  513.           <li>
  514.             <span>
  515.               <i class="far fa-user"></i>
  516.               <!-- <span class="d-none d-md-inline-block">Account</span> -->
  517.               <i class="fa fa-angle-down d-inline"></i>
  518.             </span>
  520.             <ul class="text-left">
  521.               <li>
  522.                 <a href="/my-account/my-account">
  523.                   <i class="far fa-fw fa-user"></i>
  524.                   {{'Mijn account'|trans({})|raw}}</a>
  525.               </li>
  526.               <li>
  527.                 <a href="/my-account/my-orders">
  528.                   <i class="fa fa-fw fa-shopping-bag"></i>
  529.                   {{'Mijn bestellingen'|trans({})|raw}}</a>
  530.               </li>
  531.               <li>
  532.                 <a href="/my-account/saved-products">
  533.                   <i class="far fa-fw fa-list-alt"></i>
  534.                   {{'Mijn lijstjes'|trans({})|raw}}</a>
  535.               </li>
  536.               <li>
  537.                 <a href="/logout">
  538.                   <i class="fa fa-fw fa-power-off"></i>
  539.                   {{'Uitloggen'|trans({})|raw}}</a>
  540.               </li>
  541.             </ul>
  542.           </li>
  543.         {% else %}
  544.           <li>
  545.             <a href="/my-account/my-account">
  546.               <i class="far fa-user"></i>
  547.               <!-- <span class="d-none d-md-inline-block">Account</span> -->
  548.             </a>
  549.           </li>
  550.         {% endif %}
  551.       </ul>
  553.       <ul>
  554.         {{ webshop_cart('<li>', '</li>') }}
  555.       </ul>
  557.       <ul class="d-inline-block d-xl-none">
  558.         <li>
  559.           <span>
  560.             <div class="toggle">
  561.               <div class="bars">
  562.                 <div class="bar">
  563.                   <span></span>
  564.                 </div>
  565.                 <div class="bar">
  566.                   <span></span>
  567.                 </div>
  568.                 <div class="bar">
  569.                   <span></span>
  570.                 </div>
  571.               </div>
  572.             </div>
  573.           </span>
  574.         </li>
  575.       </ul>
  576.     </div>
  577.     {% endif %}
  578.   </div>
  579. </section>
  580. {#
  581. <div id="fixed-buttons" class="three-buttons">
  582.   <ul>
  583.     <li class="btn-call">
  584.       <a href="/contact/contact-formulier">
  585.         <div class="icon">
  586.           <span class="fa fa-phone"></span>
  587.         </div>
  588.         <span class="text">Contact</span>
  589.       </a>
  590.     </li>
  591.     <li class="btn-proefrit">
  592.       <a href="/contact/proefritafspraak">
  593.         <div class="icon">
  594.           <span class="fa fa-car"></span></div>
  595.         <span class="text">Proefrit</span>
  596.       </a>
  597.     </li>
  598.     <li class="btn-offerte">
  599.       <a href="/contact/inruildeal">
  600.       <div class="icon">
  601.         <span class="fa fa-file-alt"></span></div>
  602.       <span class="text">Offerte</span>
  603.       </a>
  604.     </li>
  605.   </ul>
  606. </div>
  607. #}