You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
255 lines
9.1 KiB
255 lines
9.1 KiB
<nav class="bg-white border-gray-200 dark:bg-gray-900">
|
|
<div
|
|
class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-3"
|
|
>
|
|
<a routerLink="/" class="flex items-center space-x-3 rtl:space-x-reverse">
|
|
<img src="./logo.png" class="h-12" alt="Memory Map Logo" />
|
|
<span
|
|
class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white hidden lg:inline"
|
|
>Memory Map</span
|
|
>
|
|
</a>
|
|
|
|
<!-- Partie droite du menu -->
|
|
<div class="flex lg:order-2 items-center space-x-4">
|
|
<!-- Bouton pour afficher la barre de recherche en mobile -->
|
|
<button
|
|
(click)="toggleSearch()"
|
|
class="lg:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
|
|
>
|
|
<svg
|
|
*ngIf="!isSearchOpen"
|
|
class="w-5 h-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
*ngIf="isSearchOpen"
|
|
class="w-5 h-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 17 17"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M2 2l13 13M2 15L15 2"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Search</span>
|
|
</button>
|
|
<div class="relative hidden lg:block">
|
|
<div
|
|
class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
|
|
>
|
|
<svg
|
|
class="w-4 h-4 text-gray-500 dark:text-gray-400"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Search icon</span>
|
|
</div>
|
|
<form [formGroup]="searchForm">
|
|
<input
|
|
type="text"
|
|
id="search-navbar"
|
|
class="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
|
placeholder="Rechercher un pin ..."
|
|
formControlName="searchControl"
|
|
(focus)="onFocus()"
|
|
(blur)="onBlur()"
|
|
/>
|
|
</form>
|
|
|
|
<ul
|
|
*ngIf="pinsFiltered.length > 0 && inputFocus"
|
|
class="bg-white dark:bg-gray-700 border border-gray-300 mt-2 rounded shadow absolute z-10 max-h-60 overflow-auto w-full"
|
|
>
|
|
<li
|
|
*ngFor="let suggestion of pinsFiltered"
|
|
(click)="clickSuggestion(suggestion)"
|
|
class="p-2 block text-sm font-medium text-gray-900 dark:text-white hover:bg-gray-500 cursor-pointer"
|
|
>
|
|
{{ suggestion.title }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Bouton pour ouvrir/fermer le menu burger en mobile -->
|
|
<button
|
|
(click)="toggleNavbar()"
|
|
class="lg:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
|
|
>
|
|
<svg
|
|
*ngIf="!isNavbarOpen"
|
|
class="w-5 h-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 17 14"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M1 1h15M1 7h15M1 13h15"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
*ngIf="isNavbarOpen"
|
|
class="w-5 h-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 17 17"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M2 2l13 13M2 15L15 2"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Bouton de déconnexion (visible uniquement sur desktop) -->
|
|
<button
|
|
(click)="logout()"
|
|
class="hidden lg:block text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
|
|
>
|
|
Déconnexion
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu principal (burger en mobile) -->
|
|
<div
|
|
[ngClass]="{ hidden: !isNavbarOpen, flex: isNavbarOpen }"
|
|
class="w-full lg:flex lg:w-auto lg:order-1"
|
|
>
|
|
<div class="w-full flex flex-col lg:flex-row">
|
|
<ul
|
|
class="w-full flex p-4 flex-col lg:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 lg:space-x-8 lg:flex-row lg:mt-0 lg:border-0 lg:bg-white dark:bg-gray-800 lg:dark:bg-gray-900 dark:border-gray-700"
|
|
>
|
|
<li id="timeline">
|
|
<a
|
|
routerLink="/map"
|
|
*ngIf="!showTimeline"
|
|
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
|
|
>Carte</a
|
|
>
|
|
<a
|
|
routerLink="/timeline"
|
|
*ngIf="showTimeline"
|
|
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
|
|
>Timeline</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
id="quete"
|
|
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
|
|
>Quêtes</a
|
|
>
|
|
</li>
|
|
<li id="add">
|
|
<app-add-pin-popup></app-add-pin-popup>
|
|
</li>
|
|
<li id="friend">
|
|
<app-friend-page></app-friend-page>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
|
|
[routerLink]="['/map', { tutorial: true }]"
|
|
>Tutorial</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Bouton de déconnexion (visible uniquement sur mobile) -->
|
|
<div class="lg:hidden w-full px-4 p-4">
|
|
<button
|
|
(click)="logout()"
|
|
class="w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
|
|
>
|
|
Déconnexion
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Barre de recherche mobile (affichée quand isSearchOpen = true) -->
|
|
<div *ngIf="isSearchOpen" class="w-full p-4 lg:hidden">
|
|
<div class="lg:block relative w-full">
|
|
<div class="relative lg:block">
|
|
<div
|
|
class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
|
|
>
|
|
<svg
|
|
class="w-4 h-4 text-gray-500 dark:text-gray-400"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Search icon</span>
|
|
</div>
|
|
<form [formGroup]="searchForm">
|
|
<input
|
|
type="text"
|
|
id="search-navbar"
|
|
class="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
|
placeholder="Rechercher un pin ..."
|
|
formControlName="searchControl"
|
|
(focus)="onFocus()"
|
|
(blur)="onBlur()"
|
|
/>
|
|
</form>
|
|
|
|
<ul
|
|
*ngIf="pinsFiltered.length > 0 && inputFocus"
|
|
class="bg-white dark:bg-gray-700 border border-gray-300 mt-2 rounded shadow absolute z-10 max-h-60 overflow-auto w-full"
|
|
>
|
|
<li
|
|
*ngFor="let suggestion of pinsFiltered"
|
|
(click)="clickSuggestion(suggestion)"
|
|
class="p-2 block text-sm font-medium text-gray-900 dark:text-white hover:bg-gray-500 cursor-pointer"
|
|
>
|
|
{{ suggestion.title }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|