templates/bundles/SyliusShopBundle/Menu/_security.html.twig line 1

Open in your IDE?
  2. {% if urlpath == "/" %}
  3. <style>
  4.     #nav-menu{
  5.         background-color: transparent !important;
  6.     }
  7.     /*@media only screen and (max-width: 768px){*/
  8.     /*    #nav-menu{*/
  9.     /*        background-color: black !important;*/
  10.     /*    }*/
  11.     /*}*/
  12. </style>
  13. {% else %}
  14. <style>
  15.     #nav-menu{
  16.         background-color: black !important;
  17.     }
  18. </style>
  19. {% endif %}
  20. <div id="nav-menu">
  21.         <nav>
  22.             <ul>
  23.                 <li>
  24.                     <a href="{{ path('sylius_shop_homepage') }}" class="item" >
  25.                         <img class="ui fluid image" id="logo-header" src="{{ asset('logo.png', 'shop') }}" alt="Sylius">
  26.                     </a>
  27.                 </li>
  28.             </ul>
  29.             <ul>
  30.                     <li><a href="{{ path('sylius_shop_product_index', {slug : 'categories'}) }}" class="item">Catégories</a></li>
  31. {#
  32.                     <li><a href="{{ path('sylius_service')}}" class="item">Services</a></li>
  33. #}
  34.                     <li><a href="{{ path('odiseo_sylius_blog_plugin_shop_article_index') }}" class="item">Blog</a></li>
  35.                     <li><a href="{{ path('odiseo_sylius_blog_plugin_shop_evenement_pages') }}" class="item">Événement</a></li>
  36.                     <li><a href="{{ path('sylius_contact') }}" class="item">Contact</a></li>
  37.             </ul>
  38.             <ul>
  39.                     {% if app.user is not null  and app.user.vendor is not null%}
  40.                             <li><a href="{{ path('open_marketplace_vendor_product_listing_create_product') }}" class="item" id="nav-annonce">Déposer une annonce</a></li>
  41.                     {% elseif app.user is null%}
  42.                                 <li><a href="{{ path('sylius_no_connected_product') }}" class="item" id="nav-annonce">Déposer une annonce</a></li>
  43.                     {% else%}
  44.                             <li><a href="{{ path('sylius_no_connected_product') }}" class="item" id="nav-annonce">Déposer une annonce</a></li>
  45.                     {% endif %}
  46.             </ul>
  47.             <ul>
  48.                     {% if is_granted('ROLE_USER') %}
  49.                             {#        <div class="item" {{ sylius_test_html_attribute('full-name') }}>#}
  50.                             {#                {{ 'sylius.ui.hello'|trans }} {{ app.user.customer.fullName }}!</div>#}
  51.                             <a href="" class="item"><i class="envelope outline icon"></i> </a>
  52.                             <a href="{{ path('sylius_shop_account_dashboard') }}" class="item"><i class="user outline icon"></i> </a>
  53. {#                                <a href="{{ path('sylius_shop_logout') }}" class="item sylius-logout-button" {{ sylius_test_html_attribute('logout-button') }}><i class="user outline icon"></i></a>#}
  54.                             <a href="{{ path('sylius_shop_cart_summary') }}" class="item cart">{{ count }} <i class="cart icon"></i></a>
  55.                             <a href="" class="item cart"> <i class="heart outline icon"></i> </a>
  56.                     {% else %}+
  57.                             <a href="{{ path('sylius_shop_login') }}" class="item"><i class="user outline icon"></i></a>
  58.                             <a href="{{ path('sylius_shop_cart_summary') }}" class="item cart">{{ count }} <i class="cart icon"></i></a>
  59.                     {% endif %}
  60.             </ul>
  61.         </nav>
  62.         <nav class="mobile-nav">
  63.             <div class="mobile-icon">
  64.                 <ul>
  65.                     <li>
  66.                         <a href="{{ path('sylius_shop_homepage') }}" class="item" id="logo-header-link">
  67.                             <img class="ui fluid image" id="logo-header" src="{{ asset('logo.png', 'shop') }}" alt="Sylius">
  68.                         </a>
  69.                     </li>
  70.                 </ul>
  71.                 <ul>
  72.                     {% if is_granted('ROLE_USER') %}
  73.                         {#        <div class="item" {{ sylius_test_html_attribute('full-name') }}>#}
  74.                         {#                {{ 'sylius.ui.hello'|trans }} {{ app.user.customer.fullName }}!</div>#}
  75.                         <a href="" class="items"><i class="envelope outline icon"></i> </a>
  76.                         <a href="{{ path('sylius_shop_account_dashboard') }}" class="items"><i class="user outline icon"></i> </a>
  77.                         {#                                <a href="{{ path('sylius_shop_logout') }}" class="item sylius-logout-button" {{ sylius_test_html_attribute('logout-button') }}><i class="user outline icon"></i></a>#}
  78.                         <a href="{{ path('sylius_shop_cart_summary') }}" class="items cart">{{ count }} <i class="cart icon"></i></a>
  79.                         <a href="" class="items cart"> <i class="heart outline icon"></i> </a>
  80.                     {% else %}
  81.                         <a href="{{ path('sylius_shop_login') }}" class="items"><i class="user outline icon"></i></a>
  82.                         <a href="{{ path('sylius_shop_cart_summary') }}" class="items cart">{{ count }} <i class="cart icon"></i></a>
  83.                     {% endif %}
  84.                 </ul>
  85.                 <ul>
  86.                     <i class="bars icon" id="burger-icon"></i>
  87.                 </ul>
  88.             </div>
  89.         </nav>
  90.         <div class="mobile-menu">
  91.            <div class="nav-mobile-menu">
  92.                <ul>
  93.                    <li>
  94.                        <a href="{{ path('sylius_shop_homepage') }}" class="item" id="logo-header-link">
  95.                            <img class="ui fluid image" id="logo-header" src="{{ asset('logo.png', 'shop') }}" alt="Sylius">
  96.                        </a>
  97.                    </li>
  98.                </ul>
  99.                <ul>
  100.                    <i class="x icon" id="close-icon"></i>
  101.                </ul>
  102.            </div>
  103.             <div class="link-other-pages-mobile">
  104.                <ul>
  105.                    <li><a href="{{ path('sylius_shop_product_index', {slug : 'categories'}) }}" class="item">Catégories</a></li>
  106.                    <li><a href="{{ path('sylius_service')}}" class="item">Services</a></li>
  107.                    <li><a href="{{ path('odiseo_sylius_blog_plugin_shop_article_index') }}" class="item">Blog</a></li>
  108.                    <li><a href="{{ path('odiseo_sylius_blog_plugin_shop_evenement_pages') }}" class="item">Événement</a></li>
  109.                    <li><a href="{{ path('sylius_contact') }}" class="item">Contact</a></li>
  110.                </ul>
  111.             </div>
  112.         </div>
  114. </div>
  115. <script>
  116.   // Sélectionnez les éléments du menu
  117.   var burgerIcon = document.querySelector('.bars.icon');
  118.   var CloseIcon = document.querySelector('.x.icon');
  119.   var mobileMenu = document.querySelector('.mobile-menu');
  121.   // Ajoutez un gestionnaire d'événements pour le clic sur l'icône du burger
  122.   burgerIcon.addEventListener('click', function() {
  123.       mobileMenu.classList.add('show-menu');
  124.   });
  125.   CloseIcon.addEventListener('click', function() {
  126.     mobileMenu.classList.remove('show-menu');
  127.   });
  128. </script>
  129. <style>
  130.         /*#nav-menu nav{*/
  131.         /*    max-width: 1432px;*/
  132.         /*    margin: 0 auto;*/
  133.         /*    display: flex;*/
  134.         /*    flex-direction: row;*/
  135.         /*    justify-content: space-between;*/
  136.         /*    height: 75px;*/
  137.         /*}*/
  138.         /*#nav-menu*/
  139.         /*{*/
  140.         /*background-color: #131212;*/
  141.         /*width: 100%;*/
  143.         /*}*/
  144.         /*#nav-menu ul{*/
  145.         /*    display: flex;*/
  146.         /*    flex-direction: row;*/
  147.         /*    list-style: none;*/
  148.         /*    margin: 0;*/
  149.         /*    padding: 0;*/
  150.         /*}*/
  151.         /*#nav-menu li{*/
  152.         /*    display: flex;*/
  153.         /*    align-items: center;*/
  154.         /*}*/
  157.         /*#nav-menu .item{*/
  158.         /*    height: 100%;*/
  160.         /*}*/
  161.         /*#nav-annonce{*/
  162.         /*    background-color: #E35E31;*/
  163.         /*    color: white;*/
  164.         /*    padding: 1.25rem;*/
  165.         /*    height: fit-content !important;*/
  166.         /*    !*border-radius: 5px;*!*/
  167.         /*}*/
  168.         /*.item.cart{*/
  169.         /*        gap: 0.5rem;*/
  170.         /*}*/
  171.         /*.item.cart i, .item{*/
  172.         /*        font-size: var(--xs-fz);*/
  173.         /*}*/
  174.         /*#logo-header{*/
  175.         /*    width: 50px;*/
  176.         /*    height: 50px;*/
  177.         /*}*/
  179. </style>