188 lines
8.2 KiB
HTML
188 lines
8.2 KiB
HTML
<header class="w-full bg-white dark:bg-gray-900 shadow-sm">
|
|
<nav
|
|
class="fixed w-full z-20 top-0 left-1/2 -translate-x-1/2 max-w-6xl bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800"
|
|
>
|
|
<div class="flex items-center justify-between px-4 py-3 sm:px-6">
|
|
<!-- Logo -->
|
|
<a
|
|
[routerLink]="['/']"
|
|
class="flex items-center space-x-2 group"
|
|
aria-label="Accueil TrouveTonProfile"
|
|
>
|
|
<span
|
|
class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
|
|
>
|
|
TrouveTonProfile
|
|
</span>
|
|
</a>
|
|
|
|
<!-- Actions utilisateur -->
|
|
<div class="flex items-center gap-2 sm:gap-4">
|
|
<!-- Toggle thème -->
|
|
<button
|
|
type="button"
|
|
(click)="toggleDarkMode()"
|
|
class="p-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
|
[attr.aria-label]="
|
|
themeService.darkModeSignal() === 'dark'
|
|
? 'Passer en mode clair'
|
|
: 'Passer en mode sombre'
|
|
"
|
|
>
|
|
@if (themeService.darkModeSignal() === 'dark') {
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
|
|
/>
|
|
</svg>
|
|
} @else {
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 -960 960 960"
|
|
fill="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"
|
|
/>
|
|
</svg>
|
|
}
|
|
</button>
|
|
|
|
@if (isAuthenticated() && isEmailVerified()) {
|
|
<!-- Menu utilisateur connecté -->
|
|
<div class="flex items-center gap-2">
|
|
<!-- Lien Mon Profil - visible sur desktop -->
|
|
<a
|
|
[routerLink]="['my-profile']"
|
|
[state]="{ user: user() }"
|
|
class="hidden sm:flex items-center gap-2 px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors font-medium"
|
|
aria-label="Mon profil"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
|
|
/>
|
|
</svg>
|
|
<span class="text-sm">Mon Profil</span>
|
|
</a>
|
|
|
|
<!-- Icône Mon Profil - visible sur mobile uniquement -->
|
|
<a
|
|
[routerLink]="['my-profile']"
|
|
[state]="{ user: user() }"
|
|
class="sm:hidden p-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
|
aria-label="Mon profil"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Séparateur (desktop seulement) -->
|
|
<div class="hidden sm:block h-6 w-px bg-gray-300 dark:bg-gray-700"></div>
|
|
|
|
<!-- Bouton Déconnexion - version desktop -->
|
|
<a
|
|
[routerLink]="['/auth']"
|
|
(click)="authFacade.logout()"
|
|
class="hidden sm:flex items-center gap-2 px-4 py-2 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors font-medium border border-red-200 dark:border-red-800"
|
|
aria-label="Se déconnecter"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75"
|
|
/>
|
|
</svg>
|
|
<span class="text-sm">Déconnexion</span>
|
|
</a>
|
|
|
|
<!-- Icône Déconnexion - version mobile -->
|
|
<a
|
|
[routerLink]="['/auth']"
|
|
(click)="authFacade.logout()"
|
|
class="sm:hidden p-2 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors border border-red-200 dark:border-red-800"
|
|
aria-label="Se déconnecter"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
} @else {
|
|
<!-- Boutons pour utilisateur non connecté -->
|
|
<div class="flex items-center gap-2">
|
|
<!-- Bouton Connexion mis en valeur -->
|
|
<a
|
|
[routerLink]="['/auth']"
|
|
class="flex items-center gap-2 px-4 py-2 rounded-lg bg-indigo-600 dark:bg-indigo-500 text-white hover:bg-indigo-700 dark:hover:bg-indigo-600 transition-colors font-medium shadow-md hover:shadow-lg"
|
|
aria-label="Se connecter"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 -960 960 960"
|
|
fill="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"
|
|
/>
|
|
</svg>
|
|
<span class="text-sm">Connexion</span>
|
|
</a>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|