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.
203 lines
7.2 KiB
203 lines
7.2 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-4"
|
|
>
|
|
<a class="flex items-center space-x-3 rtl:space-x-reverse">
|
|
<img src="./logo.png" class="h-10" alt="Memory Map Logo" />
|
|
<span
|
|
class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"
|
|
>Memory Map</span
|
|
>
|
|
</a>
|
|
<div class="flex lg:order-2 justify-between">
|
|
<button
|
|
type="button"
|
|
data-collapse-toggle="navbar-search"
|
|
aria-controls="navbar-search"
|
|
aria-expanded="false"
|
|
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 me-1"
|
|
>
|
|
<svg
|
|
class="w-5 h-5"
|
|
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</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="Search..."
|
|
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>
|
|
<button
|
|
data-collapse-toggle="navbar-search"
|
|
type="button"
|
|
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
|
aria-controls="navbar-search"
|
|
aria-expanded="false"
|
|
(click)="isModalOpen = !isModalOpen"
|
|
>
|
|
<span class="sr-only">Open main menu</span>
|
|
<svg
|
|
*ngIf="!isModalOpen"
|
|
class="w-5 h-5"
|
|
aria-hidden="true"
|
|
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="isModalOpen"
|
|
class="w-5 h-5"
|
|
aria-hidden="true"
|
|
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>
|
|
|
|
<button
|
|
(click)="logout()"
|
|
type="button"
|
|
class="focus:outline-none 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 me-2 ml-10 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
|
|
>
|
|
Déconnection
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="items-center justify-between hidden w-full lg:flex lg:w-auto lg:order-1"
|
|
id="navbar-search"
|
|
>
|
|
<div class="relative mt-3 lg:hidden">
|
|
<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>
|
|
</div>
|
|
<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="Search..."
|
|
/>
|
|
</div>
|
|
<ul
|
|
class="flex flex-col p-0 lg:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 lg:space-x-8 rtl:space-x-reverse 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 class="flex items-center space-x-2">
|
|
<a
|
|
routerLink="/"
|
|
*ngIf="!isHome"
|
|
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
|
|
aria-current="page"
|
|
>Accueil
|
|
</a>
|
|
<a
|
|
routerLink="/map"
|
|
*ngIf="isHome"
|
|
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
|
|
aria-current="page"
|
|
>Carte
|
|
</a>
|
|
</li>
|
|
<li class="flex items-center space-x-2">
|
|
<a
|
|
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
|
|
>Quêtes
|
|
</a>
|
|
</li>
|
|
<li class="flex items-center space-x-2">
|
|
<app-add-pin-popup></app-add-pin-popup>
|
|
</li>
|
|
<li class="flex items-center space-x-2">
|
|
<a
|
|
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
|
|
>Amis
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|