feat: nav-bar improved

<nav x-data="{ open: false }" class="bg-[#002550] border-b border-gray-100">

    <!-- Primary Navigation Menu -->

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="flex justify-between h-16">

            <div class="flex">

                <!-- Logo -->

                <div class="shrink-0 flex items-center">

                    <a href="{{ route('homepage') }}">

                        <img class="block h-9 w-auto fill-current text-gray-800" src="{{ asset('resources/img/logo.png') }}" alt="Nautilus logo"/>

<nav class="border-gray-200 bg-[#002550]">

    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">

        <a href="{{ route('homepage') }}" class="flex items-center space-x-3 rtl:space-x-reverse">

            <img src="public/images/test.svg" class="h-8" alt="Nautilus Logo"/>

        </a>

                </div>

                <!-- Navigation Links -->

                <div class="hidden text-[#EBEBEB] space-x-8 sm:-my-px sm:ms-10 sm:flex">

                    <x-nav-link :href="route('homepage')" :active="request()->routeIs('homepage')">

                        {{ __('Accueil') }}

                    </x-nav-link>

                    <x-nav-link :href="route('dives')" :active="request()->routeIs('dives')">

                        {{ __('Inscription aux plongées') }}

                    </x-nav-link>

                </div>

            </div>

            <!-- Hamburger -->

            <div class="-me-2 flex items-center sm:hidden">

                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">

                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">

                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />

                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />

        <div class="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">

            <button type="button" class="flex text-sm bg-gray-800 rounded-full md:me-0 focus:ring-4 focus:ring-gray-600" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">

                <span class="sr-only">Open user menu</span>

                <img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="user photo">

            </button>

            <!-- Dropdown menu -->

            <div class="z-50 hidden my-4 text-base list-none divide-y rounded-lg shadow bg-[#002550] divide-gray-600" id="user-dropdown">

                <div class="px-4 py-3">

                    <span class="block text-sm text-white">Bonnie Green</span>

                    <span class="block text-sm truncate text-gray-400">name@flowbite.com</span>

                </div>

                <ul class="py-2" aria-labelledby="user-menu-button">

                    <li>

                        <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-600 text-gray-200 hover:text-white">Dashboard</a>

                    </li>

                    <li>

                        <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-600 text-gray-200 hover:text-white">Settings</a>

                    </li>

                    <li>

                        <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-600 text-gray-200 hover:text-white">Earnings</a>

                    </li>

                    <li>

                        <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-600 text-gray-200 hover:text-white">Sign out</a>

                    </li>

                </ul>

            </div>

            <button data-collapse-toggle="navbar-user" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-[#002550] dark:focus:ring-gray-600" aria-controls="navbar-user" aria-expanded="false">

                <span class="sr-only">Open main menu</span>

                <svg 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>

            </button>

        </div>

        </div>

    </div>

    <!-- Responsive Navigation Menu -->

    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">

        <div class="pt-2 pb-3 space-y-1">

            <x-responsive-nav-link :href="route('homepage')" :active="request()->routeIs('homepage')">

                {{ __('Page d\'accueil') }}

            </x-responsive-nav-link>

            <x-responsive-nav-link :href="route('dives')" :active="request()->routeIs('dives')">

                {{ __('Inscription aux plongées') }}

            </x-responsive-nav-link>

        </div>

        <!-- Responsive Settings Options -->

        <div class="pt-4 pb-1 border-t border-gray-200">

            <div class="px-4">

                <div class="font-medium text-base text-gray-800"> @php session() @endphp </div>

                <!--<div class="font-medium text-sm text-gray-500"> Auth::user()-email </div>-->

            </div>

            <div class="mt-3 space-y-1">

                <x-responsive-nav-link :href="route('dives')">

                    {{ __('Profil') }}

                </x-responsive-nav-link>

                <!-- Authentication -->

                <form method="POST" action="{{ route('dives') }}">

                    @csrf

                    <x-responsive-nav-link :href="route('dives')"

                                           onclick="event.preventDefault();

                                        this.closest('form').submit();">

                        {{ __('Log Out') }}

                    </x-responsive-nav-link>

                </form>

            </div>

        <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">

            <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border rounded-lg md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 bg-gray-800 md:bg-[#002550] border-gray-700">

                <li>

                    <a href="{{ route('homepage') }}" @if(request()->routeIs('homepage')) class="border-b-2 border-b-[#FFBE55] block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500" aria-current="page" @else class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700" @endif>Page d'accueil</a>

                </li>

                <li>

                    <a href="{{ route('dives') }}" @if(request()->routeIs('dives')) class="border-b-2 border-b-[#FFBE55] block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500" aria-current="page" @else class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700" @endif>Inscription aux plongées</a>

                </li>

            </ul>

        </div>

    </div>

</nav>

<h1 class="mb-12 font-bold md:text-5xl lg:text-4xl underline underline-offset-4">{{ $slot }}</h1>

<h1 class="mb-8 font-bold md:text-3xl lg:text-4xl underline underline-offset-4">{{ $slot }}</h1>