templates/partials/laptopHeader.html.twig line 1

  1. {% block laptopHeader %}
  3. <header
  4.   class=" bg-center bg-cover text-white dark:bg-transparent sticky-header-first-content"
  5.   style="
  6.     background-image: linear-gradient(
  7.         177.37deg,
  8.         #000000 2.19%,
  9.         rgba(75, 82, 93, 0) 77.2%
  10.       ),
  11.       url('../img/bg-header.jpg');
  12.   "
  13. >
  16. <div class="w-full navbar h-20 flex items-center hero-sticky-header -top-20">
  17.   <nav
  18.     class="container-menu mx-auto lg:px-0 px-5 flex items-center justify-between transition-all"
  19.   >
  20.     <button type="button" class="lg:hidden block menu-btn">
  21.       <svg
  22.         xmlns="http://www.w3.org/2000/svg"
  23.         class="h-6 w-6"
  24.         fill="none"
  25.         viewBox="0 0 24 24"
  26.         stroke="currentColor"
  27.         stroke-width="2"
  28.       >
  29.         <path
  30.           stroke-linecap="round"
  31.           stroke-linejoin="round"
  32.           d="M4 6h16M4 12h16M4 18h16"
  33.         />
  34.       </svg>
  35.     </button>
  36. <a href="/" class="flex items-center" id="logo">
  37.   <img class="w-auto h-12 mr-3" src="../img/bos_logo_white.png" alt="" />
  38. </a>
  39.     <button
  40.       type="button"
  41.       class="text-white hover:text-blue-500 flex items-center lg:hidden"
  42.     >
  43.       {% set path = is_granted('ROLE_COMMERCE') ? path('admin') : path('app_login') %}
  44.        <a href="{{ path }}">
  45.         <span class="lg:mr-3 mr-0 relative">
  46.         <img
  47.           class="w-8 h-8 rounded-full border border-white"
  48.           src="{{ '../images/user/' ~ app.user.imageNameUser ?? 'default.jpg'}}"
  49.           alt="{{ app.user.imageNameUser ?? 'image par défaut' }}"
  50.         />
  51.               {% if app.user %}
  52.                   <span class="w-2 h-2 bg-green-500 rounded-full border absolute bottom-0 left-0"></span>
  53.               {% else %}
  54.                   <span class="w-2 h-2 red-button rounded-full border absolute bottom-0 left-0"></span>
  55.               {% endif %}
  56.       </span>
  57.       </a>
  58.     </button>
  59.     <div class="hidden lg:flex items-center">
  60.       <ul class="flex items-center">
  61.               <li class="">
  62.           <div
  63.   class="relative [&>div] [&>div]:hover:visible [&>div]:hover:transition-all [&>div]:hover:pt-3 [&>div]:hover:h-full [&>div]:hover:opacity-100 [&>div]:hover:top-auto [&>div]:hover:z-10 pr-9"
  64. >
  65.   <button class="link hover:text-blue-500 flex items-center">
  66.     <a href="{{ path('app_home_list') }}">Accéder à la carte</a>
  67.   </button>
  68.         <li class="">
  69.           <div
  70.   class="relative [&>div] [&>div]:hover:visible [&>div]:hover:transition-all [&>div]:hover:pt-3 [&>div]:hover:h-full [&>div]:hover:opacity-100 [&>div]:hover:top-auto [&>div]:hover:z-10 pr-9"
  71. >
  72.   <button class="link hover:text-blue-500 flex items-center">
  73.     Categories
  74.     <svg
  75.       data-dropdown-button
  76.       class="w-3 h-auto ml-2"
  77.       width="10"
  78.       height="6"
  79.       viewBox="0 0 10 6"
  80.       fill="none"
  81.       xmlns="http://www.w3.org/2000/svg"
  82.     >
  83.       <path
  84.         d="M4.99982 6.00001C4.79513 6.00001 4.59034 5.92467 4.43435 5.774L0.434558 1.91686C0.122074 1.61552 0.122074 1.12735 0.434558 0.826011C0.747042 0.524671 1.25327 0.524671 1.56575 0.826011L4.99982 4.13893L8.43464 0.826613C8.74712 0.525274 9.25335 0.525274 9.56583 0.826613C9.87831 1.12795 9.87831 1.61612 9.56583 1.91746L5.56604 5.7746C5.4098 5.92527 5.20481 6.00001 4.99982 6.00001Z"
  85.         fill="currentColor"
  86.       />
  87.     </svg>
  88.   </button>
  89.   <div class="absolute top-9 invisible opacity-0 whitespace-nowrap pt-0">
  90.     <div
  91.       class="rounded-lg whitespace-nowrap shadow-front-3 bg-white dark:bg-foreground dark:text-gray-300 text-gray-700"
  92.     >
  93.       <ul
  94.         class="h-full rounded-lg relative bg-white dark:bg-foreground dark:text-gray-300 text-gray-700"
  95.       >
  96.       <!-- ALL CATEGORIES IN MENU START -->
  97.       {% for category in categorieNavbar() %}
  98.         <li
  99.           class="flex rounded-t-lg [&>a_h6]:hover:text-blue-500 [&>a:first-child]:hover:border-blue-200 [&>a:first-child]:hover:rounded-t-lg [&>a:first-child]:hover:bg-blue-50 [&>a:last-child]:hover:block bg-white dark:bg-foreground"
  100.         >
  101.           <a
  102.             href="{{ path('app_home_list_category', {id:category.id}) }}"
  103.             class="link px-3 py-2 border-b text-sm border-grey-200 dark:border-gray-800 w-full"
  104.           >
  105.             <h6 class="font-medium text-gray-600 dark:text-gray-200">
  106.               {{category.name}}
  107.             </h6>
  108.             <p class="font-normal text-gray-500 dark:text-gray-400 text-xs">
  109.               {{category.subtitle}}
  110.             </p>
  111.           </a>
  112.         </li>
  113.         {% endfor %}
  114.         <!-- ALL CATEGORIES IN MENU END -->
  115.         </li>
  116.       </ul>
  117. </div>
  118.   </div>
  119. </div>
  121.         </li>
  122.         <li class="">
  123. <div
  124.   class="dropdown relative [&>div]:hover:visible [&>div]:hover:transition-all [&>div]:hover:pt-3 [&>div]:hover:h-full [&>div]:hover:block [&>div]:hover:opacity-100 [&>div]:hover:top-auto [&>div]:hover:z-10 pr-9"
  125. >
  126.   <button class="link hover:text-blue-500 flex items-center">
  127.     Blog
  128.     </svg>
  129.   </button>
  130.           </li>
  132.           <li class="">
  133. <div
  134.   class="dropdown relative [&>div]:hover:visible [&>div]:hover:transition-all [&>div]:hover:pt-3 [&>div]:hover:h-full [&>div]:hover:block [&>div]:hover:opacity-100 [&>div]:hover:top-auto [&>div]:hover:z-10 pr-9"
  135. >
  136.   <button class="link hover:text-blue-500 flex items-center">
  137.     Nos valeurs
  138.     </svg>
  139.   </button>
  140. </li>
  141.         <li class="mr-9">
  142.           <svg
  143.             xmlns="http://www.w3.org/2000/svg"
  144.             class="h-5 w-5 text-gray-300 cursor-pointer darkMode"
  145.             viewBox="0 0 20 20"
  146.             fill="currentColor"
  147.           >
  148.             <path
  149.               d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
  150.             />
  151.           </svg>
  152.           <svg
  153.             xmlns="http://www.w3.org/2000/svg"
  154.             class="h-5 w-5 text-yellow-500 cursor-pointer lightMode hidden"
  155.             viewBox="0 0 20 20"
  156.             fill="currentColor"
  157.           >
  158.             <path
  159.               fill-rule="evenodd"
  160.               d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
  161.               clip-rule="evenodd"
  162.             />
  163.           </svg>
  164.         </li>
  165.         <li class="mr-9">
  166.           <div class="dropdown" data-dropdown>
  167.             <button
  168.               class="link hover:text-blue-500 flex items-center"
  169.               data-dropdown-button
  170.             >
  171.                 <img
  172.                   class="w-8 h-8 rounded-full border border-white mr-3"
  173.                   src="{{ '../images/user/' ~ app.user.imageNameUser ?? 'default.jpg'}}"
  174.                   data-dropdown-button
  175.                   alt="{{ app.user.imageNameUser ?? 'image par défaut' }}"
  176.                 />
  178.               {% if app.user %}
  179.                   <span class="w-2 h-2 bg-green-500 rounded-full border absolute bottom-0 left-0"></span>
  180.               {% else %}
  181.                   <span class="w-2 h-2 red-button rounded-full border absolute bottom-0 left-0"></span>
  182.               {% endif %}
  183.               Espace professionnel
  184.               <svg
  185.                 class="w-3 h-auto ml-2"
  186.                 width="10"
  187.                 height="6"
  188.                 data-dropdown-button
  189.                 viewBox="0 0 10 6"
  190.                 fill="none"
  191.                 xmlns="http://www.w3.org/2000/svg"
  192.               >
  193.                 <path
  194.                   d="M4.99982 6.00001C4.79513 6.00001 4.59034 5.92467 4.43435 5.774L0.434558 1.91686C0.122074 1.61552 0.122074 1.12735 0.434558 0.826011C0.747042 0.524671 1.25327 0.524671 1.56575 0.826011L4.99982 4.13893L8.43464 0.826613C8.74712 0.525274 9.25335 0.525274 9.56583 0.826613C9.87831 1.12795 9.87831 1.61612 9.56583 1.91746L5.56604 5.7746C5.4098 5.92527 5.20481 6.00001 4.99982 6.00001Z"
  195.                   fill="currentColor"
  196.                 />
  197.               </svg>
  198.             </button>
  199.             <div
  200.               class="dropdown-menu bg-white dark:bg-foreground dark:text-gray-300 text-gray-700"
  201.             >
  202.               <div>
  203.                 <div class="dropdown-links max-w-xs w-48 rounded-md py-3">
  204.                   {% set path = is_granted('ROLE_COMMERCE') or is_granted('ROLE_ADMIN') ? path('admin') : path('app_login') %}
  205.                   <a
  206.                     href="{{ path }}"
  207.                     class="link hover:text-blue-500 px-4 py-1 flex items-center text-sm text-gray-700 dark:text-gray-300"
  208.                     ><svg
  209.                       xmlns="http://www.w3.org/2000/svg"
  210.                       class="w-4 h-4 mr-2"
  211.                       fill="none"
  212.                       viewBox="0 0 24 24"
  213.                       stroke="currentColor"
  214.                       stroke-width="2"
  215.                     >
  216.                       <path
  217.                         stroke-linecap="round"
  218.                         stroke-linejoin="round"
  219.                         d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
  220.                       /></svg
  221.                     >Mon compte
  222.                   </a>
  223.                   <a
  224.                     href="#"
  225.                     class="link hover:text-blue-500 px-4 py-1 flex items-center text-sm text-gray-700 dark:text-gray-300"
  226.                   >
  227.                     <svg
  228.                       xmlns="http://www.w3.org/2000/svg"
  229.                       class="h-4 w-4 mr-2"
  230.                       fill="none"
  231.                       viewBox="0 0 24 24"
  232.                       stroke="currentColor"
  233.                       stroke-width="2"
  234.                     >
  235.                       <path
  236.                         stroke-linecap="round"
  237.                         stroke-linejoin="round"
  238.                         d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
  239.                       />
  240.                     </svg>
  241.                     Nos offres
  242.                   </a>
  243.                   {% if app.user %}
  244.                   <a
  245.                     href="{{ path('app_logout') }}"
  246.                     class="link hover:text-blue-500 px-4 py-1 flex items-center text-sm text-gray-700 dark:text-gray-300"
  247.                   >
  248.                     <svg
  249.                       xmlns="http://www.w3.org/2000/svg"
  250.                       class="w-4 h-4 mr-2"
  251.                       fill="none"
  252.                       viewBox="0 0 24 24"
  253.                       stroke="currentColor"
  254.                       stroke-width="2"
  255.                     >
  256.                       <path
  257.                         stroke-linecap="round"
  258.                         stroke-linejoin="round"
  259.                         d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
  260.                       />
  261.                     </svg>
  262.                     Déconnexion
  263.                   </a>
  264.                   {% endif %}
  265.                 </div>
  266.               </div>
  267.             </div>
  268.           </div>
  269.         </li>
  270.       </ul>
  271.       <a href="{{ path('app_shop_new') }}">
  272.       <button
  273.         type="button"
  274.         class="inline-flex hover:bg-blue-500 hover:text-white items-center px-3 py-[9px] rounded-lg border hover:border-blue-100"
  275.       >
  276.         <svg
  277.           xmlns="http://www.w3.org/2000/svg"
  278.           class="h-4 w-4 xl:mr-2 mr-0"
  279.           viewBox="0 0 20 20"
  280.           fill="currentColor"
  281.         >
  282.           <path
  283.             fill-rule="evenodd"
  284.             d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
  285.             clip-rule="evenodd"
  286.           />
  287.         </svg>
  288.         <span class="xl:block hidden">Ajouter un commerce</span>
  289.       </button>
  290.       </a>
  291.     </div>
  292.   </nav>
  293. </div>
  295.   <div class="pt-32 lg:px-0 px-5 lg:pt-35 text-center">
  296.     <h1 class="text-4xl lg:text-6xl font-bold mb-4 uppercase">
  297.       Best of Sarlat
  298.     </h1>
  299.     <p class="text-sm lg:text-lg font-medium block pb-16">
  300.       Nous avons trouvé pour vous les bonnes adresses du Sarladais pour la vie de tous les jours ou pour visiter la Dordogne en toute simplicité.
  301.     </p>
  302.     <!-- header-search  -->
  305. {{ form_start(form, {'action': path('app_home_list')}) }}
  306. <div
  307.       class="md:inline-flex py-3 bg-white dark:bg-background overflow-hidden rounded-2xl mb-6 text-gray-900"
  308.     > 
  309.   <!-- Search bar Start-->
  310.     {{ form_row(form.q, { 'attr': {'class': 'px-7 pt-3 text-center md:text-left dark:bg-background dark:placeholder:text-gray-100 dark:text-gray-100 border-gray-200 focus:outline-none'} })}}
  311.   <!-- Search bar END-->
  313.   <!-- Category filter Start-->
  314.   <div class="hidden">
  316.       {% block _category_widget %}
  317.           {% for child in form.Category %}
  318.               {{ form_widget(child) }}
  319.               {{ form_label(child) }}
  320.               <br>
  321.           {% endfor %}
  322.       {% endblock %}
  324.     </div>
  325.   <!-- Category filter END-->
  326.     
  327.     <!-- Vefified filter Start-->
  328.       <div class="hidden">
  330.       <label class="pl-7 py-2 border-r pr-4 dark:bg-background dark:placeholder:text-gray-100 dark:text-gray-100 border-gray-200 focus:outline-none">
  331.           {{ form_widget(form.verified) }}
  332.           <span class="ml-2 text-gray-700 text-[12px] dark:text-gray-300">
  333.               Vérifié par Best of Sarlat
  334.           </span>
  335.       </label>
  336.     </div>
  337.     <!-- Vefified filter END-->
  339.     <!-- Submit Start-->
  340.       <button
  341.       type="submit"
  342.       class="bg-blue-500 hover:bg-blue-600 rounded-2xl text-white px-8 py-3 mx-3"
  343.     >
  344.       Lancer la recherche
  345.     </button>
  346.     <!-- Submit END-->
  347. </div>
  348. {{ form_end(form) }}
  350.     <div class="text-base font-normal mb-3 lg:block">
  351.       ou consultez directement une catégorie :
  352.     </div>
  354.     <div class="md:flex justify-center flex-wrap pb-20">
  355.       {% for category in allCategory %}
  356.         <a
  357.           href="{{ path('app_home_list_category', {id:category.id}) }}" 
  358.           class="inline-block bg-gray-100 hover:bg-gray-200 hover:text-gray-600 text-gray-500 text-xs font-medium items-center py-1 px-2 rounded mr-2"
  359.         >
  360.           {{ category.name }}
  361.         </a>
  362.       {% endfor %}    
  363.     </div>
  364.   </div>
  365. </header>
  367. {% endblock %}
  369. <script>
  370.   window.addEventListener('scroll', function() {
  371.     var logo = document.getElementById('logo');
  372.     if (window.pageYOffset > 0) {
  373.       logo.querySelector('img').src = '../img/bos_logo.png';
  374.       logo.style.backgroundColor = 'transparent';
  375.     } else {
  376.       logo.querySelector('img').src = '../img/bos_logo_white.png';
  377.       logo.style.backgroundColor = 'transparent';
  378.     }
  379.   });
  380. </script>