89 lines
5.2 KiB
Twig
89 lines
5.2 KiB
Twig
<nav class="flex-no-wrap relative flex w-full items-center justify-between bg-[#FBFBFB] py-0 shadow-md shadow-black/5 dark:bg-[#263B46] dark:shadow-black/10 lg:flex-wrap lg:justify-start lg:py-2">
|
|
<div
|
|
class="flex w-full flex-wrap items-center justify-between px-3">
|
|
<!-- Hamburger button for mobile view -->
|
|
<button
|
|
class="block border-0 bg-transparent px-2 text-neutral-500 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-200 lg:hidden" type="button" data-twe-collapse-init data-twe-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
|
|
<!-- Hamburger icon -->
|
|
<span class="[&>svg]:w-7">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-7 w-7">
|
|
<path fill-rule="evenodd" d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<!-- Collapsible navigation container -->
|
|
<div
|
|
class="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto" id="navbarSupportedContent1" data-twe-collapse-item>
|
|
<!-- Logo -->
|
|
<a class="me-5 ms-2 flex items-center text-neutral-900 hover:text-neutral-900 focus:text-neutral-900 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400" href="/">
|
|
<img src="{{ asset('img/logo-cropped.png') }}" style="height: 75px" alt="BookNest logo" loading="lazy"/>
|
|
</a>
|
|
<!-- Left navigation links -->
|
|
<ul class="list-style-none me-auto flex flex-col ps-0 lg:flex-row" data-twe-navbar-nav-ref>
|
|
<li>
|
|
</li>
|
|
{% if app.user is empty %}
|
|
<!-- Inscription link -->
|
|
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
|
|
<a class="text-neutral-500 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400" href="/registration" data-twe-nav-link-ref>Inscription</a>
|
|
</li>
|
|
<!-- login link -->
|
|
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
|
|
<a class="text-neutral-500 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400" href="/login" data-twe-nav-link-ref>Connexion</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Right elements -->
|
|
<div
|
|
class="relative flex items-center">
|
|
<!-- Cart Icon -->
|
|
<div class="relative">
|
|
<form action="/api/search" method="GET" class="relative">
|
|
<button type="submit" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
|
</svg>
|
|
</button>
|
|
<input
|
|
type="search"
|
|
name="q"
|
|
class="pl-10 pr-4 py-1 mr-6 rounded-xl border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="Recherche..."
|
|
/>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
{% if app.user %}
|
|
<div
|
|
class="relative flex items-center">
|
|
<!-- Cart Icon -->
|
|
<a class="me-4 text-neutral-600 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400" href="/favoris">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</a>
|
|
|
|
|
|
<a class="me-4 text-neutral-600 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400" href="/logout">
|
|
<span class="[&>svg]:w-5">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
|
|
</svg>
|
|
|
|
|
|
</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|