public/themes/karen/modules/header.html.twig line 1

Open in your IDE?
  1. <header class="header">
  2.     <div class="container mt-5 hidden flex-col gap-y-6 lg:flex">
  3.         <div class="flex-between">
  4.             <div class="relative z-20">
  5.                 <form action="{{ path('app_shop_site_products') }}" method="get"
  6.                       class="search-btn-open flex gap-x-2 app-border bg-gray-50 dark:bg-gray-700 p-1 rounded-full cursor-pointer ring-blue-400 w-84 transition-all">
  7.                     <svg class="size-6 p-1.5 flex-center text-gray-100 bg-blue-600 rounded-full w-9 h-9">
  8.                         <use href="#search"/>
  9.                     </svg>
  10.                     <input name="s" placeholder="جستجو در {{ getSettings('general_info_siteName') }}..." type="text">
  11.                     <button type="submit">جستجو</button>
  12.                 </form>
  13.             </div>
  14.             <a href="{{ path('app_shop_site_index') }}" class="flex flex-col text-center ml-20">
  15.                     <span class="font-MorabbaMedium text-4xl flex items-center text-center m-auto">
  16.                         {% set title = getSettings('general_info_siteName') %}
  17.                         {% set parts = title|split(' ') %}
  18.                         <span class="text-blue-500">
  19.                             {{ parts|slice(0, parts|length - 1)|join(' ') }}
  20.                         </span>  {{ parts|last }}
  21.                     </span>
  22.             </a>
  23.             <div class="flex items-center gap-x-3">
  24.                 {% if app.user %}
  25.                     <button class="group relative flex-center py-2 px-4 app-border rounded-full app-hover delay-75">
  26.                         <a href="{{ path('shop_customer_panel_dashboard') }}" class="flex items-center gap-x-1">
  27.                             <svg class="size-5">
  28.                                 <use href="#user"/>
  29.                             </svg>
  30.                             <p>حساب کاربری</p>
  31.                         </a>
  32.                         <div
  33.                                 class="absolute dark:border-none border border-gray-100 w-52 p-2 bg-white text-gray-900 dark:text-gray-100 flex flex-col gap-y-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible group-hover:top-12 transition-all delay-100 dark:bg-gray-700 top-20 rounded-lg text-base shadow child:transition-all duration-300 child:py-1.5 child:px-2 z-30 child:rounded-lg child:w-full">
  34.                             <a href="{{ path('app_shop_user_order_orders_index') }}"
  35.                                class="flex items-center gap-x-2  hover:bg-blue-500 hover:text-gray-100">
  36.                                 <svg class="h-5 w-5">
  37.                                     <use href="#user"></use>
  38.                                 </svg>
  39.                                 سفارشات من
  40.                             </a>
  41.                             <a href="{{ path('app_shop_auth_profile') }}"
  42.                                class="flex items-center gap-x-2  hover:bg-blue-500 hover:text-gray-100">
  43.                                 <svg class="h-5 w-5">
  44.                                     <use href="#cog"></use>
  45.                                 </svg>
  46.                                 اطلاعات کاربری
  47.                             </a>
  48.                             <a href="{{ path('customer_panel_logout') }}"
  49.                                class="flex items-center gap-x-2  hover:bg-red-500 dark:hover:bg-red-500 hover:text-gray-100">
  50.                                 <svg class="h-5 w-5">
  51.                                     <use href="#arrow-left-end"></use>
  52.                                 </svg>
  53.                                 خروج از حساب
  54.                             </a>
  55.                         </div>
  56.                     </button>
  57.                 {% else %}
  58.                     <button class=" flex-center py-2 px-4  app-border rounded-full app-hover">
  59.                         <a href="{{ path('customer_panel_login') }}" class="flex items-center gap-x-2">
  60.                             <p>ورود | ثبت‌نام</p>
  61.                             <svg class="size-5">
  62.                                 <use href="#arrow-left-end"/>
  63.                             </svg>
  64.                         </a>
  65.                     </button>
  66.                 {% endif %}
  67.                 <button class="toggle-theme flex-center p-2 app-border rounded-full app-hover">
  68.                     <svg class="inline-block dark:hidden size-6">
  69.                         <use href="#moon"/>
  70.                     </svg>
  71.                     <svg class="hidden dark:inline size-6">
  72.                         <use href="#sun"/>
  73.                     </svg>
  74.                 </button>
  75.                 <button class="flex-center p-2 bg-blue-600 text-gray-100 rounded-full open-cart relative">
  76.                     <svg class="size-6">
  77.                         <use href="#shopping-bag"/>
  78.                     </svg>
  79.                     <span class="absolute -top-1 -right-1 flex h-4 w-4">
  80.                                 {% set cart = getUserCartItems() %}
  81.                         {% if cart['order'] is defined and cart['order'] is not null %}
  82.                             {% set cartLength = cart['order'].orderItems|length %}
  83.                         {% else %}
  84.                             {% set cartLength = 0 %}
  85.                         {% endif %}
  86.                             <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-600 opacity-75"></span>
  87.                             <span class="relative inline-flex rounded-full h-4 w-4 bg-red-500 text-xs pt-1 flex-center text-white">{{ cartLength }}</span>
  88.                         </span>
  89.                 </button>
  90.                 <div class="cart ">
  91.                     <div
  92.                             class="flex items-center justify-between pb-2 border-b-2 border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-300">
  93.                         <h2 class="font-DanaMedium text-lg">سبد خرید <span class="text-sm text-gray-400 font-Dana">
  94.                                     ({{ cartLength }}
  95.                                     مورد)</span></h2>
  96.                         <svg class="size-5 cursor-pointer close-cart mb-.5">
  97.                             <use href="#x-mark"/>
  98.                         </svg>
  99.                     </div>
  100.                     <div class="flex flex-col divide-y-2 divide-gray-200 dark:divide-gray-600 my-4">
  101.                         {% if cart['order'] is defined and cart['order'] is not null %}
  102.                             {% for item in cart['order'].orderItems %}
  103.                                 <div class="grid grid-cols-12 gap-x-2 w-full py-4 cursor-pointer">
  104.                                     <div class="col-span-4 w-24 h-20">
  105.                                         {% if item.product.imageUrl is defined and item.product.imageUrl is not null %}
  106.                                             <img class="rounded-lg" src="{{ item.product.imageUrl }}" alt="">
  107.                                         {% elseif item.product.productImages[0] is defined %}
  108.                                             <img class="rounded-lg" src="{{ item.product.productImages[0].imageUrl }}"
  109.                                                  alt="">
  110.                                         {% endif %}
  111.                                     </div>
  113.                                     <div class="col-span-8 flex flex-col justify-between">
  114.                                         <h2 class="font-DanaMedium line-clamp-2">
  115.                                             {{ item.product.name }}
  116.                                         </h2>
  117.                                         <div class="flex items-center justify-between gap-x-2 mt-2">
  118.                                             <button
  119.                                                     class="w-20 flex items-center justify-between gap-x-1 rounded-lg border border-gray-200 dark:border-white/20 py-1 px-2">
  120.                                                 {{ item.quantity }} x
  121.                                             </button>
  122.                                             {#                                    <p class="text-lg text-blue-500 dark:text-blue-400 font-DanaMedium">1,130,000 #}
  123.                                             {#                                        <span class="font-Dana text-sm">تومان</span> #}
  124.                                             {#                                    </p> #}
  125.                                         </div>
  126.                                     </div>
  127.                                 </div>
  128.                             {% endfor %}
  129.                         {% else %}
  130.                             سبد خرید خالی می باشد
  131.                         {% endif %}
  132.                     </div>
  133.                     {% if cartLength > 0 %}
  134.                         <div class="w-[90%] fixed bottom-2 flex items-center justify-between border-t-2 border-gray-200 dark:border-gray-600 pt-4">
  135.                             <div>
  136.                                 <p class="text-gray-500 dark:text-gray-300 text-sm">مبلغ قابل پرداخت :</p>
  137.                                 <p class="text-lg text-blue-500 dark:text-blue-400 font-DanaDemiBold">{{ cart.total|number_format }}
  138.                                     <span class="font-Dana text-sm">تومان</span>
  139.                                 </p>
  140.                             </div>
  141.                             <a href="{{ path('app_shop_site_cart') }}"
  142.                                class="py-2 px-4 bg-blue-600 flex-center hover:bg-blue-700 transition-all rounded-lg text-gray-200">
  143.                                 ثبت سفارش
  144.                             </a>
  145.                         </div>
  146.                     {% endif %}
  147.                 </div>
  148.             </div>
  149.         </div>
  150.         <div class="relative flex-between h-16 bg-gray-900 dark:bg-gray-800 rounded-full text-gray-200 px-10">
  151.             {% set menu = get_menu_data('headerMenu') %}
  152.             {% if menu['items'] is defined %}
  153.                 <ul class="flex items-center gap-x-8 m-auto">
  154.                     {% for item in menu['items'] %}
  155.                         {% if item['children'] is defined and item['children']|length > 0 %}
  156.                             <li class="menu-item group">
  157.                                 <a href="{{ item['link'] }}" class="menu-item_link cursor-pointer">
  158.                                     {{ item['title'] }}
  159.                                 </a>
  160.                                 <ul class="solid-menu">
  161.                                     {% for children in item['children'] %}
  162.                                         <li>
  163.                                             <a href="{{ children['link'] }}">{{ children['title'] }}</a>
  164.                                         </li>
  165.                                     {% endfor %}
  166.                                 </ul>
  167.                             </li>
  168.                         {% else %}
  169.                             <li class="menu-item">
  170.                                 <a href="{{ item['link'] }}">{{ item['title'] }}</a>
  171.                             </li>
  172.                         {% endif %}
  173.                     {% endfor %}
  174.                 </ul>
  175.             {% endif %}
  176.         </div>
  177.     </div>
  178.     <div class="flex justify-center lg:hidden">
  179.         <nav class="absolute top-0 inset-x-0 w-full h-16 px-4 shadow-sm dark:bg-gray-800 flex items-center justify-between">
  180.             <button class="open-menu-mobile flex-center p-2 app-border rounded-full">
  181.                 <svg class=" size-6">
  182.                     <use href="#bars"/>
  183.                 </svg>
  184.             </button>
  185.             <div class="mobile-menu z-50 flex flex-col">
  186.                 <div class="flex w-full items-center justify-between border-b-normal pb-4  {% if app.user is defined and app.user is not null and app.user.hasRole('ROLE_SHOP_ADMIN') %}  mt-10 {% endif%} ">
  187.                     <a href="{{ path('app_shop_site_index') }}" class="text-xl font-MorabbaMedium">
  188.                         {% set title = getSettings('general_info_siteName') %}
  189.                         {% set parts = title|split(' ') %}
  190.                         <span class="text-blue-500">
  191.                             {{ parts|slice(0, parts|length - 1)|join(' ') }}
  192.                         </span> {{ parts|last }}
  193.                     </a>
  194.                     <button class="close-menu-mobile">
  195.                         <svg class="size-5 text-gray-500 dark:text-gray-200">
  196.                             <use href="#x-mark"/>
  197.                         </svg>
  198.                     </button>
  199.                 </div>
  200.                 {% set menu = get_menu_data('headerMenu') %}
  201.                 {% if menu['items'] is defined %}
  202.                     <ul class="flex flex-col gap-y-2 text-gray-800 dark:text-gray-100 mt-4">
  203.                         {% for item in menu['items'] %}
  204.                             <li class="mobile-menu-item">
  205.                                 <a href="{{ item['link'] }}">{{ item['title'] }}</a>
  206.                             </li>
  207.                         {% endfor %}
  208.                     </ul>
  209.                 {% endif %}
  210.             </div>
  211.             <a href="{{ path('app_shop_site_index') }}" class="flex flex-col text-center">
  212.                     <span class="font-MorabbaMedium text-3xl flex items-center">
  213.                  {% set title = getSettings('general_info_siteName') %}
  214.                         {% set parts = title|split(' ') %}
  215.                         <span class="text-blue-500">
  216.                             {{ parts|slice(0, parts|length - 1)|join(' ') }}
  217.                         </span>  {{ parts|last }}
  218.                     </span>
  219.             </a>
  220.             <button class="toggle-theme flex-center p-2 app-border rounded-full ">
  221.                 <svg class="inline-block dark:hidden size-6">
  222.                     <use href="#moon"/>
  223.                 </svg>
  224.                 <svg class="hidden dark:inline size-6">
  225.                     <use href="#sun"/>
  226.                 </svg>
  227.             </button>
  228.         </nav>
  229.         <button class="open-mobile_search-modal">
  230.             <svg class=" size-6">
  231.                 <use href="#search"/>
  232.             </svg>
  233.             <p>جستجو در
  234.                 {% set title = getSettings('general_info_siteName') %}
  235.                 {% set parts = title|split(' ') %}
  236.                 <span class="text-blue-500">
  237.                             {{ parts|slice(0, parts|length - 1)|join(' ') }}
  238.                         </span> {{ parts|last }}
  239.             </p>
  240.         </button>
  241.         <div class="mobile_search-modal">
  242.             <div class="w-full flex items-center gap-x-2">
  243.                 <form action="{{ path('app_shop_site_products') }}" method="get"
  244.                       class="w-full flex items-center gap-x-1 bg-gray-200 dark:bg-gray-800 text-gray-500 py-2 px-4 rounded-3xl">
  245.                     <svg class="size-6">
  246.                         <use href="#search"/>
  247.                     </svg>
  248.                     <input name="s" type="text" placeholder="جستجو در همه کالاها">
  249.                     <button type="submit">جستجو</button>
  250.                 </form>
  251.                 <svg class="size-6 close-mobile_search-modal">
  252.                     <use href="#x-mark"/>
  253.                 </svg>
  254.             </div>
  255.         </div>
  257.         <ul class="bottom-navbar">
  258.             <li {% if app.request.attributes.get('_route') == 'app_shop_site_index' %} class="dark:text-sky-400 text-blue-500 font-DanaMedium" {% endif %}>
  259.                 <svg class="size-5">
  260.                     <use href="#home"/>
  261.                 </svg>
  262.                 <a href="{{ path('app_shop_site_index') }}">خانه</a>
  263.             </li>
  264.             <li {% if app.request.attributes.get('_route') == 'app_shop_site_products' %} class="dark:text-sky-400 text-blue-500 font-DanaMedium" {% endif %}>
  265.                 <svg class="size-5">
  266.                     <use href="#squares"/>
  267.                 </svg>
  268.                 <a href="{{ path('app_shop_site_products') }}">فروشگاه</a>
  269.             </li>
  270.             <li {% if app.request.attributes.get('_route') == 'cart_checkout' %} class="dark:text-sky-400 text-blue-500 font-DanaMedium" {% endif %}>
  271.                 <svg class="size-5">
  272.                     <use href="#shopping-bag"/>
  273.                 </svg>
  274.                 <a href="{{ path('cart_checkout') }}">سبد خرید</a>
  275.             </li>
  276.             <li {% if app.request.attributes.get('_route') == 'customer_panel_user_handler' %} class="dark:text-sky-400 text-blue-500 font-DanaMedium" {% endif %}>
  277.                 <svg class="size-5">
  278.                     <use href="#user"/>
  279.                 </svg>
  280.                 <a href="{{ path('customer_panel_user_handler') }}">حساب من</a>
  281.             </li>
  282.         </ul>
  283.     </div>
  284. </header>