templates/header/index.html.twig line 1

Open in your IDE?
  1. <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.5/font/bootstrap-icons.css" rel="stylesheet">
  2. <style>
  3. /* Ajusta el badge del carrito para que se posicione correctamente */
  4. .cart-icon {
  5.     position: relative;
  6.     display: inline-block;
  7. }
  8. .cart-icon .badge {
  9.     position: absolute;
  10.     top: -5px;
  11.     right: -10px;
  12.     font-size: 0.75rem;
  13. }
  16. </style>
  19. <style>
  20. /* Ajusta el badge del carrito para que se posicione correctamente */
  21. .cart-icon {
  22.     position: relative;
  23.     display: inline-block;
  24. }
  25. .cart-icon .badge {
  26.     position: absolute;
  27.     top: -5px;
  28.     right: -10px;
  29.     font-size: 0.75rem;
  30. }
  31. .header .logo{
  32.     height: 46px;
  33.     width: 46px;
  34. }
  35. .header .btn-category{
  36.     border-start-start-radius: 30px;
  37.     border-end-start-radius: 30px;
  38.     background: white;
  39.     border: 0px;
  40. }
  41. .header .btn-category:hover{
  42.     border-start-start-radius: 30px;
  43.     border-end-start-radius: 30px;
  44.     background: white;
  45.     border: 0px;
  46.     color: #E63946;
  47. }
  48. .header .btn-search{
  49.     border-start-end-radius: 30px;
  50.     border-end-end-radius: 30px;
  51.     background: white;
  52.     border: 0px;
  53. }
  54. .header .btn-search:hover{
  55.     border-start-end-radius: 30px;
  56.     border-end-end-radius: 30px;
  57.     background: white;
  58.     border: 0px;
  59.     color: #E63946;
  60. }
  61. .header .customer-service-icon{
  62.     background: white;
  63.     border: 0px;
  64. }
  65. .header .customer-service-icon:hover{
  66.     background: white;
  67.     border: 0px;
  68.     color: #E63946;
  69. }
  70. .header .bar-search-mobile{
  71.     border-start-start-radius: 30px;
  72.     border-end-start-radius: 30px;
  73. }
  74. .header .btn-buy{
  75.     border-radius:30px;
  76. }
  77. .header .bar-search{
  78.     height: 46px;
  79. }
  80. .header{
  81.     background-color: #333333;
  82.     color: white;
  83. }
  84. .header .btn.show{
  85.     color: #E63946;
  86. }
  87. .offcanvas .list-group-item a {
  88.     color: inherit;       /* Toma el color heredado (puedes definir otro, por ejemplo, #333) */
  89.     text-decoration: none; /* Elimina el subrayado */
  90. }
  92. .offcanvas .list-group-item a:hover,
  93. .offcanvas .list-group-item a:focus {
  94.     color: inherit;       /* Mantiene el color al pasar el mouse */
  95.     text-decoration: none; /* Sin subrayado en hover o foco */
  96. }
  97. .w-150px{
  98.     width: 150px;
  99. }
  101. </style>
  102. <header class="header border-bottom sticky-top">
  103.     <!-- desktop -->
  104.     <div class="container container-custom d-lg-flex d-none justify-content-between align-items-center py-4">
  105.         <h5 class="text-white pointer me-4 mb-0" onclick="window.location.href='/'">TcgBunker</h5> 
  106.         <form class="d-flex w-75" role="search" action="/order">
  107.             <div class="input-group input-group-lg">
  108.                 <!-- Botón de categorías -->
  109.                 <button class="btn btn-outline-primary dropdown-toggle btn-category fs-6" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
  110.                     Categorías
  111.                 </button>
  112.                 <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  113.                     {% for category in categories %}
  114.                         <li><a class="dropdown-item" href="/order?category={{category.id}}">{{ category.name }}</a></li>
  115.                     {% endfor %}
  116.                 </ul>
  118.                 <!-- Input de búsqueda -->
  119.                 <input type="search" name="search" class="form-control fs-6 bar-search" placeholder="Buscar..." aria-label="Buscar">
  120.                 <button class="btn btn-outline-primary btn-search fs-5" type="submit">
  121.                     <i class="bi bi-search"></i>
  122.                 </button>
  123.             </div>
  124.         </form>
  125.         <!-- Icono de Atención al Cliente -->
  126.         <a class="customer-service-icon ms-3 me-3 btn btn-outline-primary rounded-pill" href="/customer-service">
  127.             <i class="bi bi-headset fs-4"></i>
  128.         </a>
  129.         <div class="d-flex justify-content-between align-items-center w-150px ms-auto cartIconView">
  130.             {{ render(controller('App\\Controller\\HeaderController::cartIconView')) }}
  131.         </div>    
  132.     </div>
  133.     <!-- mobile -->
  134.     <div class="container container-custom d-lg-none d-block justify-content-between align-items-center">
  136.         <div class="py-3 d-flex w-100 alight-items-center justify-content-between">
  137.                 <button class="navbar-toggler fs-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCategories" aria-controls="offcanvasCategories">
  138.                     <i class="bi bi-list"></i>
  139.                 </button>
  140.                 <h5 class="text-white pointer mt-2 mb-0" onclick="window.location.href='/'">TcgBunker</h6> 
  141.                 <div class="cartIconView" width="27px">
  142.                     {{ render(controller('App\\Controller\\HeaderController::cartIconView')) }}
  143.                 </div>
  144.         </div>
  145.         
  146.         <div class="row pb-3">
  147.             <div class="col-12">
  148.                 <form class="d-flex w-100" role="search" action="/order">
  149.                     <div class="input-group">
  150.                         <!-- Input de búsqueda -->
  151.                         <input type="search" name="search" class="form-control fs-6 bar-search bar-search-mobile" placeholder="Buscar..." aria-label="Buscar">
  152.                         <button class="btn btn-outline-primary btn-search fs-5" type="submit">
  153.                             <i class="bi bi-search"></i>
  154.                         </button>
  155.                     </div>
  156.                 </form>
  157.             </div>
  158.         </div>
  160.     </div>
  162. </header>
  163. <!-- Offcanvas para Categorías -->
  164. <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasCategories" aria-labelledby="offcanvasCategoriesLabel">
  165.   <div class="offcanvas-header">
  166.     <h5 class="offcanvas-title" id="offcanvasCategoriesLabel">Categorías</h5>
  167.     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Cerrar"></button>
  168.   </div>
  169.   <div class="offcanvas-body">
  170.     <!-- Lista de categorías -->
  171.     <ul class="list-group">
  172.         {% for category in categories %}
  173.             <li class="list-group-item">
  174.                 <a href="/order?category={{category.id}}" class="text-decoration-none d-flex align-items-center">
  175.                 {% if category.imageName %} 
  176.                     <img src="/uploads/images/categories/{{ category.imageName }}" alt="{{ category.name }}" class="me-2" style="width: 30px; height: 30px; object-fit: cover; border-radius: 50%;">
  177.                 {% endif %}
  178.                 {{ category.name }}
  179.                 </a>
  180.             </li>
  181.         {% endfor %}
  182.         <!-- Agregar acceso a Atención al Cliente -->
  183.         <li class="list-group-item">
  184.             <a href="/customer-service" class="text-decoration-none d-flex align-items-center">
  185.                 <i class="bi bi-headset me-2 fs-4"></i> Atención al Cliente
  186.             </a>
  187.         </li>
  188.     </ul>
  189.   </div>
  190. </div>