templates/components/header.html.twig line 1

Open in your IDE?
  1. <header class="site-header">
  2.   <div class="shell header-inner">
  3.     <a class="logo-link" href="/">
  4.       <img src="/assets/logo.svg" alt="PlayPapa" />
  5.     </a>
  7.     <div class="theme-switch" aria-label="Переключение темы">
  8.       <button class="theme-btn is-active" type="button" data-theme="light" aria-label="Светлая тема" aria-pressed="true">
  9.         <img src="/assets/white-theme.svg" alt="" />
  10.       </button>
  11.       <button class="theme-btn" type="button" data-theme="dark" aria-label="Темная тема" aria-pressed="false">
  12.         <img src="/assets/dark-theme.svg" alt="" />
  13.       </button>
  14.     </div>
  16.     <button class="catalog-btn" type="button" aria-label="Каталог" aria-expanded="false" aria-controls="catalogMegaMenu">
  17.       <img src="/assets/catalog.svg" alt="" />
  18.       <span>Каталог</span>
  19.     </button>
  21.     <form class="search-form" action="#">
  22.       <input type="search" placeholder="Игра, приложение или услуга..." />
  23.       <button class="search-favorite" type="button" aria-label="Избранное">
  24.         <img src="/assets/favorite.svg" alt="" />
  25.       </button>
  26.       <button class="search-submit" type="submit" aria-label="Найти">
  27.         <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
  28.           <path d="m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" />
  29.         </svg>
  30.       </button>
  31.     </form>
  33.     <button class="bonus-btn" aria-label="Бонусы">
  34.       <img src="/assets/bonus.svg" alt="Бонусы" />
  35.     </button>
  37.     <div class="profile-menu">
  38.       <button class="profile-btn" type="button" aria-label="Профиль" aria-expanded="false" aria-controls="profilePopover">
  39.         <img src="/assets/profile.svg" alt="" />
  40.         <span class="profile-toggle-indicator" aria-hidden="true">
  41.           <svg viewBox="0 0 12 8" fill="none">
  42.             <path d="m2 2 4 4 4-4" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
  43.           </svg>
  44.         </span>
  45.       </button>
  47.       <section class="profile-popover" id="profilePopover" aria-hidden="true" aria-label="Меню профиля" inert>
  48.         <div class="profile-popover-heading">
  49.           <h2>Вы не авторизованы</h2>
  50.           <p>
  51.             <span>Войдите, чтобы видеть бонусы и</span>
  52.             <span>рефералов</span>
  53.           </p>
  54.         </div>
  56.         <nav class="profile-popover-nav" aria-label="Разделы профиля">
  57.           <button class="profile-menu-item" type="button" disabled>
  58.             <img class="profile-menu-icon" src="/assets/profile-menu-profile.svg" alt="" />
  59.             <span>Профиль</span>
  60.           </button>
  61.           <button class="profile-menu-item" type="button" disabled>
  62.             <img class="profile-menu-icon" src="/assets/profile-menu-referrals.svg" alt="" />
  63.             <span>Рефералы</span>
  64.           </button>
  65.           <button class="profile-menu-item" type="button" disabled>
  66.             <img class="profile-menu-icon" src="/assets/profile-menu-bonus.svg" alt="" />
  67.             <span>Бонусы</span>
  68.           </button>
  69.           <button class="profile-menu-item" type="button" disabled>
  70.             <img class="profile-menu-icon" src="/assets/profile-menu-topup.svg" alt="" />
  71.             <span>Пополнить</span>
  72.           </button>
  73.           <button class="profile-menu-item profile-help" type="button">
  74.             <img class="profile-menu-icon" src="/assets/profile-menu-help.svg" alt="" />
  75.             <span>Помощь</span>
  76.           </button>
  77.           <button class="profile-menu-item profile-login" type="button" data-auth-open="login">
  78.             <img class="profile-menu-icon" src="/assets/profile-menu-login.svg" alt="" />
  79.             <span>Войти</span>
  80.           </button>
  81.         </nav>
  82.       </section>
  83.     </div>
  84.   </div>
  86.   <div class="catalog-layer" id="catalogMegaMenu" aria-hidden="true" inert>
  87.     <div class="shell catalog-mega" role="dialog" aria-label="Каталог товаров">
  88.       <aside class="catalog-sidebar" aria-label="Разделы каталога">
  89.         <button class="catalog-side-link is-active" type="button">
  90.           <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M7.5 8.2h9a4.5 4.5 0 0 1 4.2 6.1l-1.1 2.8a2.2 2.2 0 0 1-3.7.7l-1.2-1.5H9.3l-1.2 1.5a2.2 2.2 0 0 1-3.7-.7l-1.1-2.8a4.5 4.5 0 0 1 4.2-6.1Z" stroke="currentColor" stroke-width="1.8"/><path d="M8 11v3m-1.5-1.5h3M16.5 11.7h.01m2 2h.01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
  91.           <span>Игры и игровые сервисы</span>
  92.           <span class="catalog-chevron" aria-hidden="true">›</span>
  93.         </button>
  94.         <button class="catalog-side-link" type="button">
  95.           <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m12 2.8 8.1 5.5L12 21.2 3.9 8.3 12 2.8Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="m3.9 8.3 5.1.2 3-5.7 3 5.7 5.1-.2M9 8.5l3 12.7 3-12.7" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
  96.           <span>Игровые ценности</span>
  97.           <span class="catalog-chevron" aria-hidden="true">›</span>
  98.         </button>
  99.         <button class="catalog-side-link" type="button">
  100.           <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="6.2" y="2.5" width="11.6" height="19" rx="2.2" stroke="currentColor" stroke-width="1.8"/><path d="M10 5h4m-2 13.5h.01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
  101.           <span>Мобильные игры</span>
  102.           <span class="catalog-chevron" aria-hidden="true">›</span>
  103.         </button>
  104.         <button class="catalog-side-link" type="button">
  105.           <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/><path d="M3.4 12h17.2M12 3c2.2 2.5 3.3 5.5 3.3 9S14.2 18.5 12 21c-2.2-2.5-3.3-5.5-3.3-9S9.8 5.5 12 3Z" stroke="currentColor" stroke-width="1.5"/></svg>
  106.           <span>Сервисы и соцсети</span>
  107.           <span class="catalog-chevron" aria-hidden="true">›</span>
  108.         </button>
  109.         <button class="catalog-side-link" type="button">
  110.           <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="4.2" width="18" height="12.3" rx="1.8" stroke="currentColor" stroke-width="1.8"/><path d="M8.5 20h7M12 16.5V20" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
  111.           <span>Программы</span>
  112.           <span class="catalog-chevron" aria-hidden="true">›</span>
  113.         </button>
  114.       </aside>
  116.       <div class="catalog-content">
  117.         <section class="catalog-showcase" aria-labelledby="catalogFeaturedTitle">
  118.           <h2 id="catalogFeaturedTitle">Игры и игровые сервисы <span aria-hidden="true">›</span></h2>
  119.           <div class="catalog-showcase-row" id="catalogFeatured"></div>
  120.         </section>
  122.         <section class="catalog-showcase catalog-new" aria-labelledby="catalogNewTitle">
  123.           <h2 id="catalogNewTitle">Новинки и предзаказы <span aria-hidden="true">›</span></h2>
  124.           <div class="catalog-showcase-row" id="catalogNew"></div>
  125.         </section>
  127.         <div class="catalog-platforms">
  128.           <section class="catalog-link-group">
  129.             <h3>Steam <span aria-hidden="true">›</span></h3>
  130.             <a href="#">Игры и DLC</a>
  131.             <a href="#">Пополнение баланса</a>
  132.             <a href="#">Подарочные карты</a>
  133.             <a href="#">Коллекционные карточки</a>
  134.             <a href="#">Смена региона</a>
  135.           </section>
  136.           <section class="catalog-link-group">
  137.             <h3>PlayStation <span aria-hidden="true">›</span></h3>
  138.             <a href="#">Игры и DLC</a>
  139.             <a href="#">Пополнение баланса</a>
  140.             <a href="#">Новые аккаунты</a>
  141.             <a href="#">PS Plus</a>
  142.             <a href="#">EA Play</a>
  143.           </section>
  144.           <section class="catalog-link-group">
  145.             <h3>Xbox <span aria-hidden="true">›</span></h3>
  146.             <a href="#">Игры и DLC</a>
  147.             <a href="#">Пополнение баланса</a>
  148.             <a href="#">Новые аккаунты</a>
  149.             <a href="#">Xbox Game Pass</a>
  150.             <a href="#">Услуги</a>
  151.           </section>
  152.           <section class="catalog-link-group">
  153.             <h3>Nintendo <span aria-hidden="true">›</span></h3>
  154.             <a href="#">Игры и DLC</a>
  155.             <a href="#">Подарочные карты</a>
  156.             <a href="#">Новые аккаунты</a>
  157.             <a href="#">NS Online</a>
  158.           </section>
  159.           <section class="catalog-link-group">
  160.             <h3>Battle.net <span aria-hidden="true">›</span></h3>
  161.             <a href="#">World of Warcraft</a>
  162.             <a href="#">Подарочные карты</a>
  163.             <a href="#">Прямое пополнение</a>
  164.             <a href="#">Новые аккаунты</a>
  165.             <a href="#">Смена региона</a>
  166.           </section>
  167.         </div>
  168.       </div>
  169.     </div>
  170.   </div>
  171. </header>