templates/application/whileresume/application/enterprises/components/header.html.twig line 1

Open in your IDE?
  1. {# =========================================================
  2.    HEADER WhileResume — thème Sociala (v2)
  3.    - Utilise les classes natives Sociala (.nav-menu, .menu-icon,
  4.      .center-menu-icon) → pas de conflit avec le JS qui toggle .active
  5.    - CTA login : pill noire bien placée (mobile + desktop)
  6.    - User connecté : avatar + nom dans une pill grise (desktop)
  7.    - Plus de doublon de bouton login (séparation propre mobile/desktop)
  8.    - Hamburger animé natif Sociala respecté
  9.    - iOS / Android : dropdown vers le bas avec liste pays + search
  10.    ========================================================= #}
  12. {# Liens stores : source unique = table cvs_app_store_links #}
  13. {% set _hdrStoreData = getAppStoreCountries() %}
  14. {% set _hdrStorePrimary = _hdrStoreData.primary|default({}) %}
  15. {% set _hdrStoreOthers = _hdrStoreData.others|default({}) %}
  17. <style>
  18.     /* ============================================================
  19.        FIX rightbar Sociala
  20.        ------------------------------------------------------------
  21.        Le CSS Sociala met `.right-chat { display: none }` par défaut.
  22.        La classe `.active-sidebar` (ajoutée par scripts.js ≥1600px,
  23.        ou par le toggle au clic) DEVRAIT débloquer l'affichage,
  24.        mais dans notre install ça ne se fait pas (override CSS).
  25.        On force ici l'affichage quand active-sidebar est présente.
  26.        ============================================================ */
  27.     .right-chat.active-sidebar {
  28.         display: block !important;
  29.     }
  31.     /* ---------- Tweaks Sociala header ---------- */
  33.     /* Le `<a>` logo a un line-height:90px et width:280px par défaut Sociala
  34.        (sert d'ancre pour la sidebar) — on garde ça mais on neutralise sur mobile */
  35.     .whr-header .whr-logo-link img {
  36.         max-width: 160px;
  37.         height: auto;
  38.         display: block;
  39.     }
  40.     @media (max-width: 991.98px) {
  41.         .whr-header .whr-logo-link img { max-width: 130px; }
  42.     }
  44.     /* CTA Connexion : pill noire propre */
  45.     .whr-cta-login {
  46.         display: inline-flex;
  47.         align-items: center;
  48.         gap: 6px;
  49.         padding: 8px 14px;
  50.         background: #111;
  51.         color: #fff !important;
  52.         font-weight: 600;
  53.         font-size: 13px;
  54.         line-height: 1;
  55.         border-radius: 999px;
  56.         text-decoration: none !important;
  57.         transition: transform .15s ease, background .2s ease;
  58.         white-space: nowrap;
  59.     }
  60.     .whr-cta-login:hover { background: #2c2c46; transform: translateY(-1px); color: #fff; }
  61.     .whr-cta-login i { font-size: 14px; }
  62.     @media (max-width: 480px) {
  63.         .whr-cta-login .whr-cta-label { display: none; }
  64.         .whr-cta-login { padding: 8px 10px; }
  65.     }
  67.     /* User pill (avatar + prénom) — desktop uniquement */
  68.     .whr-user-menu {
  69.         display: inline-flex;
  70.         align-items: center;
  71.         gap: 8px;
  72.         padding: 4px 12px 4px 4px;
  73.         background: #f5f6fa;
  74.         border-radius: 999px;
  75.         text-decoration: none !important;
  76.         transition: background .2s ease;
  77.         margin-left: 8px;
  78.     }
  79.     .whr-user-menu:hover { background: #ececf3; }
  80.     .whr-user-menu img {
  81.         width: 32px; height: 32px;
  82.         border-radius: 50%;
  83.         object-fit: cover;
  84.     }
  85.     .whr-user-menu .whr-user-name {
  86.         font-weight: 600;
  87.         font-size: 13px;
  88.         color: #2c2c46;
  89.         max-width: 140px;
  90.         overflow: hidden;
  91.         text-overflow: ellipsis;
  92.         white-space: nowrap;
  93.     }
  94.     .theme-dark .whr-user-menu { background: #2a2a3c; }
  95.     .theme-dark .whr-user-menu:hover { background: #34344a; }
  96.     .theme-dark .whr-user-menu .whr-user-name { color: #fff; }
  98.     /* Wrapper actions mobile (chat ou login) — visible <992px uniquement */
  99.     .whr-mobile-actions {
  100.         display: none;
  101.         align-items: center;
  102.         gap: 8px;
  103.         margin-left: auto;
  104.         margin-right: 12px;
  105.     }
  106.     @media (max-width: 991.98px) {
  107.         .whr-mobile-actions { display: inline-flex; }
  108.     }
  110.     /* Wrapper actions desktop — visible >=992px uniquement */
  111.     .whr-desktop-actions {
  112.         display: none;
  113.         align-items: center;
  114.         gap: 8px;
  115.         margin-left: auto;
  116.     }
  117.     @media (min-width: 992px) {
  118.         .whr-desktop-actions { display: inline-flex; }
  119.     }
  121.     /* Icône bouton ronde (chat mobile) */
  122.     .whr-icon-btn {
  123.         width: 38px; height: 38px;
  124.         border-radius: 12px;
  125.         background: #f5f6fa;
  126.         display: inline-flex;
  127.         align-items: center;
  128.         justify-content: center;
  129.         color: #2c2c46;
  130.         text-decoration: none !important;
  131.         transition: background .2s ease;
  132.     }
  133.     .whr-icon-btn:hover { background: #ececf3; }
  134.     .whr-icon-btn i { font-size: 18px; }
  135.     .theme-dark .whr-icon-btn { background: #2a2a3c; color: #fff; }
  137.     /* ============================================================
  138.        === Stores dropdowns (header) — version "icône ronde" ===
  139.        ============================================================ */
  141.     /* Wrapper du bouton store (icône) + dropdown */
  142.     .whr-hdr-store-wrap {
  143.         position: relative;
  144.         display: inline-block;
  145.     }
  147.     /* Le bouton "icône ronde" du header — version <button> stylée pour
  148.        ressembler au <a class="menu-icon center-menu-icon"> existant */
  149.     .whr-hdr-store-btn {
  150.         background: transparent;
  151.         border: none;
  152.         padding: 0.5rem;
  153.         text-align: center;
  154.         cursor: pointer;
  155.         font-family: inherit;
  156.     }
  157.     .whr-hdr-store-btn:focus { outline: none; }
  158.     .whr-hdr-store-btn:focus-visible {
  159.         outline: 2px solid var(--theme-color, #6C3AED);
  160.         outline-offset: 2px;
  161.         border-radius: 12px;
  162.     }
  164.     /* Dropdown vers le BAS (puisque le bouton est en haut) */
  165.     .whr-hdr-store-dropdown {
  166.         position: absolute;
  167.         top: calc(100% + 6px);
  168.         left: 50%;
  169.         transform: translateX(-50%);
  170.         width: 380px;
  171.         max-width: calc(100vw - 32px);
  172.         background: #fff;
  173.         border-radius: 12px;
  174.         box-shadow: 0 8px 24px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.08);
  175.         z-index: 1050;
  176.         display: none;
  177.         overflow: hidden;
  178.     }
  179.     .theme-dark .whr-hdr-store-dropdown {
  180.         background: #34344a;
  181.         box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.2);
  182.     }
  183.     .whr-hdr-store-wrap.is-open .whr-hdr-store-dropdown {
  184.         display: flex;
  185.         flex-direction: column;
  186.         animation: whrHdrFadeInDown .15s ease;
  187.     }
  188.     @keyframes whrHdrFadeInDown {
  189.         from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  190.         to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  191.     }
  193.     /* Petite flèche "tail" en haut du dropdown (pointe vers le bouton) */
  194.     .whr-hdr-store-dropdown::before {
  195.         content: '';
  196.         position: absolute;
  197.         top: -6px;
  198.         left: 50%;
  199.         transform: translateX(-50%) rotate(45deg);
  200.         width: 12px;
  201.         height: 12px;
  202.         background: #fff;
  203.         border-radius: 2px;
  204.     }
  205.     .theme-dark .whr-hdr-store-dropdown::before { background: #34344a; }
  207.     /* Zone search en haut */
  208.     .whr-hdr-store-search-wrap {
  209.         padding: 10px 10px 6px;
  210.         border-bottom: 1px solid rgba(0,0,0,.06);
  211.         flex-shrink: 0;
  212.     }
  213.     .theme-dark .whr-hdr-store-search-wrap { border-bottom-color: rgba(255,255,255,.08); }
  215.     .whr-hdr-store-search {
  216.         width: 100%;
  217.         height: 34px;
  218.         padding: 0 12px 0 32px;
  219.         border: 1px solid rgba(0,0,0,.1);
  220.         border-radius: 8px;
  221.         background: #f5f5f8 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 10px center;
  222.         font-size: 13px;
  223.         color: #2c2c46;
  224.         outline: none;
  225.         transition: border-color .15s ease, background-color .15s ease;
  226.         font-family: inherit;
  227.     }
  228.     .whr-hdr-store-search:focus {
  229.         border-color: var(--theme-color, #6C3AED);
  230.         background-color: #fff;
  231.     }
  232.     .theme-dark .whr-hdr-store-search {
  233.         background-color: #2a2a3c;
  234.         border-color: rgba(255,255,255,.1);
  235.         color: #e9e9ef;
  236.     }
  237.     .theme-dark .whr-hdr-store-search:focus { background-color: #3c3c52; }
  238.     .whr-hdr-store-search::placeholder { color: #999; }
  240.     /* Featured pinné */
  241.     .whr-hdr-store-featured {
  242.         padding: 8px 8px 4px;
  243.         flex-shrink: 0;
  244.         border-bottom: 1px solid rgba(0,0,0,.06);
  245.     }
  246.     .theme-dark .whr-hdr-store-featured { border-bottom-color: rgba(255,255,255,.08); }
  248.     /* Zone "Other regions" (scrollable) */
  249.     .whr-hdr-store-others {
  250.         padding: 8px;
  251.         max-height: 280px;
  252.         overflow-y: auto;
  253.         flex: 1;
  254.     }
  255.     .whr-hdr-store-others::-webkit-scrollbar { width: 6px; }
  256.     .whr-hdr-store-others::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }
  257.     .theme-dark .whr-hdr-store-others::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }
  259.     /* Header de section */
  260.     .whr-hdr-store-dropdown-header {
  261.         font-size: 10px;
  262.         font-weight: 700;
  263.         text-transform: uppercase;
  264.         letter-spacing: .5px;
  265.         opacity: .55;
  266.         padding: 4px 8px 6px;
  267.         color: #2c2c46;
  268.     }
  269.     .theme-dark .whr-hdr-store-dropdown-header { color: #e9e9ef; }
  271.     /* Grille 2 colonnes */
  272.     .whr-hdr-store-grid {
  273.         display: grid;
  274.         grid-template-columns: 1fr 1fr;
  275.         gap: 2px;
  276.     }
  278.     /* Item pays */
  279.     .whr-hdr-store-country {
  280.         display: flex;
  281.         align-items: center;
  282.         gap: 8px;
  283.         padding: 7px 9px;
  284.         border-radius: 6px;
  285.         text-decoration: none !important;
  286.         color: #2c2c46 !important;
  287.         font-size: 12.5px;
  288.         transition: background .15s ease;
  289.         min-width: 0;
  290.     }
  291.     .theme-dark .whr-hdr-store-country { color: #e9e9ef !important; }
  292.     .whr-hdr-store-country:hover {
  293.         background: rgba(108, 58, 237, .08);
  294.         color: var(--theme-color, #6C3AED) !important;
  295.     }
  296.     .theme-dark .whr-hdr-store-country:hover { background: rgba(108, 58, 237, .2); }
  297.     .whr-hdr-store-country .whr-flag {
  298.         font-size: 16px;
  299.         line-height: 1;
  300.         width: 18px;
  301.         text-align: center;
  302.         flex-shrink: 0;
  303.     }
  304.     .whr-hdr-store-country .whr-country-name {
  305.         flex: 1;
  306.         font-weight: 500;
  307.         white-space: nowrap;
  308.         overflow: hidden;
  309.         text-overflow: ellipsis;
  310.         min-width: 0;
  311.     }
  313.     /* Featured = pleine largeur, mis en avant */
  314.     .whr-hdr-store-featured .whr-hdr-store-country {
  315.         background: linear-gradient(135deg, rgba(108, 58, 237, .08), rgba(108, 58, 237, .03));
  316.         font-weight: 600;
  317.         padding: 9px 10px;
  318.     }
  319.     .theme-dark .whr-hdr-store-featured .whr-hdr-store-country {
  320.         background: linear-gradient(135deg, rgba(108, 58, 237, .25), rgba(108, 58, 237, .1));
  321.     }
  323.     /* Message "aucun résultat" */
  324.     .whr-hdr-store-empty {
  325.         text-align: center;
  326.         padding: 20px 12px;
  327.         font-size: 12px;
  328.         color: #999;
  329.         font-style: italic;
  330.     }
  331.     .theme-dark .whr-hdr-store-empty { color: #aaa; }
  333.     /* Item caché par la recherche */
  334.     .whr-hdr-store-country.is-hidden { display: none; }
  336.     /* Responsive : sur mobile, ajuster la position et la largeur */
  337.     @media (max-width: 575.98px) {
  338.         .whr-hdr-store-dropdown {
  339.             width: calc(100vw - 24px);
  340.             max-width: 360px;
  341.             /* Sur mobile, on cale à gauche pour ne pas déborder à droite */
  342.             left: 0;
  343.             transform: none;
  344.         }
  345.         .whr-hdr-store-wrap.is-open .whr-hdr-store-dropdown {
  346.             animation: whrHdrFadeInDownMobile .15s ease;
  347.         }
  348.         @keyframes whrHdrFadeInDownMobile {
  349.             from { opacity: 0; transform: translateY(-4px); }
  350.             to   { opacity: 1; transform: translateY(0); }
  351.         }
  352.         .whr-hdr-store-dropdown::before {
  353.             left: 22px;
  354.             transform: rotate(45deg);
  355.         }
  356.         .whr-hdr-store-grid { grid-template-columns: 1fr; }
  357.     }
  358. </style>
  360. <div class="nav-header bg-white shadow-xs border-0 whr-header">
  362.     {# === Bandeau supérieur (mobile : tout, desktop : juste le logo qui sert d'ancre sidebar) === #}
  363.     <div class="nav-top">
  364.         <a href="{% if app.request.locale == 'en' %}{{ path('whileresume_homepage') }}{% else %}{{ path('locale_whileresume_homepage', {'_locale': app.request.locale}) }}{% endif %}"
  365.            class="whr-logo-link"
  366.            aria-label="{{ websitename }}">
  367.             <img src="/uploads/logo.png" alt="{{ websitename }}" />
  368.         </a>
  370.         {# --- Actions visibles uniquement <992px --- #}
  371.         {% if connectUser %}
  372.             {# Structure native Sociala : mob-menu + chat-active-btn → ouvre .right-chat #}
  373.             <a href="#" class="mob-menu ms-auto me-2 chat-active-btn" aria-label="Messages">
  374.                 <i class="feather-message-circle text-grey-900 font-sm btn-round-md bg-greylight"></i>
  375.             </a>
  376.         {% else %}
  377.             <div class="whr-mobile-actions">
  378.                 <a href="{% if app.request.locale == 'en' %}{{ path('app_login') }}{% else %}{{ path('locale_app_login', {'_locale': app.request.locale}) }}{% endif %}"
  379.                    class="whr-cta-login">
  380.                     <i class="feather-log-in"></i>
  381.                     <span class="whr-cta-label">{{ 'layout.signin'|trans({}, 'whr-public') }}</span>
  382.                 </a>
  383.             </div>
  384.         {% endif %}
  386.         {# Hamburger natif Sociala : on NE TOUCHE PAS, son JS gère .active #}
  387.         <button class="nav-menu me-0 ms-2" aria-label="Menu"></button>
  388.     </div>
  390.     {# === Icônes centrales (desktop uniquement, masquées <1200px par Sociala) === #}
  391.     <a href="{% if app.request.locale == 'en' %}{{ path('whileresume_homepage') }}{% else %}{{ path('locale_whileresume_homepage', {'_locale': app.request.locale}) }}{% endif %}"
  392.        class="p-2 text-center ms-3 menu-icon center-menu-icon"
  393.        aria-label="{{ 'layout.home'|trans({}, 'whr-public')|default('Accueil') }}">
  394.         <i class="feather-home font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500"></i>
  395.     </a>
  397.     {# ============================================================
  398.        === Bouton iOS / App Store ===
  399.        - Version FR : lien direct vers le store FR (pas de dropdown)
  400.        - Version EN : bouton qui ouvre le dropdown pays
  401.        ============================================================ #}
  402.     {% set _hdrHasIos = false %}
  403.     {% for c in _hdrStorePrimary %}{% if c.ios %}{% set _hdrHasIos = true %}{% endif %}{% endfor %}
  404.     {% for c in _hdrStoreOthers %}{% if c.ios %}{% set _hdrHasIos = true %}{% endif %}{% endfor %}
  406.     {% if _hdrHasIos %}
  407.         {# === Dropdown pays (FR & EN) === #}
  408.         <div class="whr-hdr-store-wrap menu-icon center-menu-icon" data-whr-hdr-store="ios">
  409.             <button type="button" class="whr-hdr-store-btn" aria-haspopup="true" aria-expanded="false" aria-label="App Store - Choose your country">
  410.                     <span class="font-lg bg-greylight btn-round-lg theme-dark-bg d-inline-flex align-items-center justify-content-center">
  411.                         <svg fill="#adb5bc" width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  412.                             <path d="M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 17 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z"/>
  413.                         </svg>
  414.                     </span>
  415.             </button>
  416.             <div class="whr-hdr-store-dropdown" role="menu">
  418.                 {# Search bar (apparaît si > 20 pays "others") #}
  419.                 {% set _hdrIosOthersCount = 0 %}
  420.                 {% for c in _hdrStoreOthers %}{% if c.ios %}{% set _hdrIosOthersCount = _hdrIosOthersCount + 1 %}{% endif %}{% endfor %}
  421.                 {% if _hdrIosOthersCount > 20 %}
  422.                     <div class="whr-hdr-store-search-wrap">
  423.                         <input type="text"
  424.                                class="whr-hdr-store-search"
  425.                                placeholder="{{ 'layout.search_country'|trans({}, 'whr-public')|default('Search country...') }}"
  426.                                aria-label="Search country"
  427.                                autocomplete="off">
  428.                     </div>
  429.                 {% endif %}
  431.                 {# Featured pinné #}
  432.                 {% set _hdrIosPrimaryCount = 0 %}
  433.                 {% for c in _hdrStorePrimary %}{% if c.ios %}{% set _hdrIosPrimaryCount = _hdrIosPrimaryCount + 1 %}{% endif %}{% endfor %}
  434.                 {% if _hdrIosPrimaryCount > 0 %}
  435.                     <div class="whr-hdr-store-featured">
  436.                         <div class="whr-hdr-store-dropdown-header">
  437.                             {{ 'layout.featured'|trans({}, 'whr-public')|default('Featured') }}
  438.                         </div>
  439.                         {% for code, country in _hdrStorePrimary %}
  440.                             {% if country.ios %}
  441.                                 <a href="{{ country.ios }}"
  442.                                    class="whr-hdr-store-country"
  443.                                    data-search="{{ country.label|lower }} {{ code|lower }}"
  444.                                    target="_blank" rel="noopener" role="menuitem">
  445.                                     {% if country.flag %}<span class="whr-flag">{{ country.flag }}</span>{% endif %}
  446.                                     <span class="whr-country-name">{{ country.label }}</span>
  447.                                 </a>
  448.                             {% endif %}
  449.                         {% endfor %}
  450.                     </div>
  451.                 {% endif %}
  453.                 {# Other regions (grille 2 cols) #}
  454.                 {% if _hdrStoreOthers is not empty %}
  455.                     <div class="whr-hdr-store-others">
  456.                         <div class="whr-hdr-store-dropdown-header">
  457.                             {{ 'layout.other_regions'|trans({}, 'whr-public')|default('Other regions') }}
  458.                         </div>
  459.                         <div class="whr-hdr-store-grid">
  460.                             {% for code, country in _hdrStoreOthers %}
  461.                                 {% if country.ios %}
  462.                                     <a href="{{ country.ios }}"
  463.                                        class="whr-hdr-store-country"
  464.                                        data-search="{{ country.label|lower }} {{ code|lower }}"
  465.                                        target="_blank" rel="noopener" role="menuitem">
  466.                                         {% if country.flag %}<span class="whr-flag">{{ country.flag }}</span>{% endif %}
  467.                                         <span class="whr-country-name">{{ country.label }}</span>
  468.                                     </a>
  469.                                 {% endif %}
  470.                             {% endfor %}
  471.                         </div>
  472.                         <div class="whr-hdr-store-empty" style="display: none;">
  473.                             {{ 'layout.no_country_found'|trans({}, 'whr-public')|default('No country found') }}
  474.                         </div>
  475.                     </div>
  476.                 {% endif %}
  477.             </div>
  478.         </div>
  479.     {% endif %}
  481.     {# ============================================================
  482.        === Bouton Android / Google Play ===
  483.        ============================================================ #}
  484.     {% set _hdrHasAndroid = false %}
  485.     {% for c in _hdrStorePrimary %}{% if c.android %}{% set _hdrHasAndroid = true %}{% endif %}{% endfor %}
  486.     {% for c in _hdrStoreOthers %}{% if c.android %}{% set _hdrHasAndroid = true %}{% endif %}{% endfor %}
  488.     {% if _hdrHasAndroid %}
  489.         {# === Dropdown pays (FR & EN) === #}
  490.         <div class="whr-hdr-store-wrap menu-icon center-menu-icon" data-whr-hdr-store="android">
  491.             <button type="button" class="whr-hdr-store-btn" aria-haspopup="true" aria-expanded="false" aria-label="Google Play - Choose your country">
  492.                     <span class="font-lg bg-greylight btn-round-lg theme-dark-bg d-inline-flex align-items-center justify-content-center">
  493.                         <svg height="20" width="20" viewBox="0 0 512 512" aria-hidden="true">
  494.                             <path style="fill:#3A9BC8;" d="M225.656,256.052L14.016,485.451l-6.442,7.052c-4.005-5.919-6.704-12.972-7.313-20.806C0.087,470.305,0,468.91,0,467.518V44.499c0-9.488,2.873-18.02,7.574-24.987L225.656,256.052z"/>
  495.                             <path style="fill:#9BCD83;" d="M320.811,152.8l-95.155,103.253L7.574,19.512C19.936,1.405,45.183-6.342,66.6,6.02L320.811,152.8z"/>
  496.                             <path style="fill:#EEB84C;" d="M455.056,257.27c-0.348,14.453-7.748,28.904-22.113,37.174l-112.132,64.771l-95.155-103.163L320.811,152.8l70.518,40.745l41.614,24.026C448.178,226.366,455.579,241.861,455.056,257.27z"/>
  497.                             <path style="fill:#B43F70;" d="M7.591,492.492c12.368,18.116,37.599,25.838,58.976,13.496L320.775,359.22l-95.156-103.209L7.591,492.492z"/>
  498.                         </svg>
  499.                     </span>
  500.             </button>
  501.             <div class="whr-hdr-store-dropdown" role="menu">
  503.                 {# Search bar (apparaît si > 20 pays "others") #}
  504.                 {% set _hdrAndroidOthersCount = 0 %}
  505.                 {% for c in _hdrStoreOthers %}{% if c.android %}{% set _hdrAndroidOthersCount = _hdrAndroidOthersCount + 1 %}{% endif %}{% endfor %}
  506.                 {% if _hdrAndroidOthersCount > 20 %}
  507.                     <div class="whr-hdr-store-search-wrap">
  508.                         <input type="text"
  509.                                class="whr-hdr-store-search"
  510.                                placeholder="{{ 'layout.search_country'|trans({}, 'whr-public')|default('Search country...') }}"
  511.                                aria-label="Search country"
  512.                                autocomplete="off">
  513.                     </div>
  514.                 {% endif %}
  516.                 {# Featured pinné #}
  517.                 {% set _hdrAndroidPrimaryCount = 0 %}
  518.                 {% for c in _hdrStorePrimary %}{% if c.android %}{% set _hdrAndroidPrimaryCount = _hdrAndroidPrimaryCount + 1 %}{% endif %}{% endfor %}
  519.                 {% if _hdrAndroidPrimaryCount > 0 %}
  520.                     <div class="whr-hdr-store-featured">
  521.                         <div class="whr-hdr-store-dropdown-header">
  522.                             {{ 'layout.featured'|trans({}, 'whr-public')|default('Featured') }}
  523.                         </div>
  524.                         {% for code, country in _hdrStorePrimary %}
  525.                             {% if country.android %}
  526.                                 <a href="{{ country.android }}"
  527.                                    class="whr-hdr-store-country"
  528.                                    data-search="{{ country.label|lower }} {{ code|lower }}"
  529.                                    target="_blank" rel="noopener" role="menuitem">
  530.                                     {% if country.flag %}<span class="whr-flag">{{ country.flag }}</span>{% endif %}
  531.                                     <span class="whr-country-name">{{ country.label }}</span>
  532.                                 </a>
  533.                             {% endif %}
  534.                         {% endfor %}
  535.                     </div>
  536.                 {% endif %}
  538.                 {# Other regions (grille 2 cols) #}
  539.                 {% if _hdrStoreOthers is not empty %}
  540.                     <div class="whr-hdr-store-others">
  541.                         <div class="whr-hdr-store-dropdown-header">
  542.                             {{ 'layout.other_regions'|trans({}, 'whr-public')|default('Other regions') }}
  543.                         </div>
  544.                         <div class="whr-hdr-store-grid">
  545.                             {% for code, country in _hdrStoreOthers %}
  546.                                 {% if country.android %}
  547.                                     <a href="{{ country.android }}"
  548.                                        class="whr-hdr-store-country"
  549.                                        data-search="{{ country.label|lower }} {{ code|lower }}"
  550.                                        target="_blank" rel="noopener" role="menuitem">
  551.                                         {% if country.flag %}<span class="whr-flag">{{ country.flag }}</span>{% endif %}
  552.                                         <span class="whr-country-name">{{ country.label }}</span>
  553.                                     </a>
  554.                                 {% endif %}
  555.                             {% endfor %}
  556.                         </div>
  557.                         <div class="whr-hdr-store-empty" style="display: none;">
  558.                             {{ 'layout.no_country_found'|trans({}, 'whr-public')|default('No country found') }}
  559.                         </div>
  560.                     </div>
  561.                 {% endif %}
  562.             </div>
  563.         </div>
  564.     {% endif %}
  566.     {# === Action desktop (>=992px), à droite ===
  567.        Structure native Sociala : .menu-icon + .chat-active-btn + ms-auto
  568.        → le JS Sociala ouvre .right-chat (la rightbar messagerie) #}
  569.     {% if connectUser %}
  570.         <a href="#" class="p-2 text-center ms-auto menu-icon chat-active-btn" aria-label="Messages">
  571.             <i class="feather-message-square font-xl text-current"></i>
  572.         </a>
  573.     {% else %}
  574.         <div class="whr-desktop-actions">
  575.             <a href="{% if app.request.locale == "fr"  %}{{ path('locale_cv_public_entry', {'_locale': app.request.locale}) }}{% else %}{{ path('cv_public_entry') }}{% endif %}" class="whr-cta-login">
  576.                 <i class="feather-plus-circle"></i>
  577.                 {{ 'sidebar.moncv'|trans({}, 'whr-public') }}
  578.             </a>
  579.         </div>
  580.     {% endif %}
  582. </div>
  584. {# ====== JS dropdown stores HEADER (vanilla, autonome, pas de dépendance) ====== #}
  585. <script>
  586.     (function() {
  587.         'use strict';
  589.         function closeAllHdrDropdowns() {
  590.             document.querySelectorAll('.whr-hdr-store-wrap.is-open').forEach(function(w) {
  591.                 w.classList.remove('is-open');
  592.                 var b = w.querySelector('.whr-hdr-store-btn');
  593.                 if (b) b.setAttribute('aria-expanded', 'false');
  594.                 var input = w.querySelector('.whr-hdr-store-search');
  595.                 if (input) {
  596.                     input.value = '';
  597.                     applyHdrFilter(w, '');
  598.                 }
  599.             });
  600.         }
  602.         function applyHdrFilter(wrap, query) {
  603.             query = (query || '').trim().toLowerCase();
  604.             var items = wrap.querySelectorAll('.whr-hdr-store-country');
  605.             var emptyMsg = wrap.querySelector('.whr-hdr-store-empty');
  606.             var grid = wrap.querySelector('.whr-hdr-store-grid');
  607.             var visibleInOthers = 0;
  609.             items.forEach(function(item) {
  610.                 var searchData = item.dataset.search || '';
  611.                 var matches = query === '' || searchData.indexOf(query) !== -1;
  612.                 if (matches) {
  613.                     item.classList.remove('is-hidden');
  614.                     if (grid && grid.contains(item)) {
  615.                         visibleInOthers++;
  616.                     }
  617.                 } else {
  618.                     item.classList.add('is-hidden');
  619.                 }
  620.             });
  622.             if (emptyMsg && grid) {
  623.                 if (query !== '' && visibleInOthers === 0) {
  624.                     grid.style.display = 'none';
  625.                     emptyMsg.style.display = 'block';
  626.                 } else {
  627.                     grid.style.display = '';
  628.                     emptyMsg.style.display = 'none';
  629.                 }
  630.             }
  631.         }
  633.         function initWhrHdrStoreDropdowns() {
  634.             var wraps = document.querySelectorAll('.whr-hdr-store-wrap');
  635.             if (!wraps.length) return;
  637.             wraps.forEach(function(wrap) {
  638.                 var btn = wrap.querySelector('.whr-hdr-store-btn');
  639.                 if (!btn || btn.dataset.whrHdrInit === '1') return;
  640.                 btn.dataset.whrHdrInit = '1';
  642.                 // Toggle au clic sur le bouton
  643.                 btn.addEventListener('click', function(e) {
  644.                     e.preventDefault();
  645.                     e.stopPropagation();
  646.                     var isOpen = wrap.classList.contains('is-open');
  648.                     closeAllHdrDropdowns();
  650.                     if (!isOpen) {
  651.                         wrap.classList.add('is-open');
  652.                         btn.setAttribute('aria-expanded', 'true');
  654.                         // Auto-focus search à l'ouverture (desktop seulement)
  655.                         var input = wrap.querySelector('.whr-hdr-store-search');
  656.                         if (input && window.innerWidth >= 768) {
  657.                             setTimeout(function() { input.focus(); }, 50);
  658.                         }
  659.                     }
  660.                 });
  662.                 // Filtrage live
  663.                 var input = wrap.querySelector('.whr-hdr-store-search');
  664.                 if (input) {
  665.                     input.addEventListener('input', function() {
  666.                         applyHdrFilter(wrap, this.value);
  667.                     });
  669.                     input.addEventListener('click', function(e) {
  670.                         e.stopPropagation();
  671.                     });
  673.                     input.addEventListener('keydown', function(e) {
  674.                         if (e.key === 'Escape') {
  675.                             if (this.value !== '') {
  676.                                 this.value = '';
  677.                                 applyHdrFilter(wrap, '');
  678.                                 e.stopPropagation();
  679.                             }
  680.                         }
  681.                     });
  682.                 }
  683.             });
  685.             // Listeners globaux (1 seule fois pour tout le doc)
  686.             if (!document.body.dataset.whrHdrStoreOutsideInit) {
  687.                 document.body.dataset.whrHdrStoreOutsideInit = '1';
  689.                 document.addEventListener('click', function(e) {
  690.                     if (!e.target.closest('.whr-hdr-store-wrap')) {
  691.                         closeAllHdrDropdowns();
  692.                     }
  693.                 });
  695.                 document.addEventListener('keydown', function(e) {
  696.                     if (e.key === 'Escape') {
  697.                         closeAllHdrDropdowns();
  698.                     }
  699.                 });
  700.             }
  701.         }
  703.         if (document.readyState === 'loading') {
  704.             document.addEventListener('DOMContentLoaded', initWhrHdrStoreDropdowns);
  705.         } else {
  706.             initWhrHdrStoreDropdowns();
  707.         }
  708.     })();
  709. </script>