Menu

<div class="md:sticky fixed z-[60] md:z-[80] w-full md:w-auto bg-background rounded-button p-5 md:w-[286px] flex flex-col md:gap-20 gap-5 w-full md:pt-5

pt-[91px] md:h-screen top-0"

     x-data="dropdown(false)">

    <div class="flex justify-between hidden md:block">

        <img src="<?= renderImageUrl('logo-white.svg', 'logo', 'link') ?>" alt="">

    </div>

    <div @click="toggle()"

         class="cursor-pointer flex items-center justify-between p-3 rounded-button text-white bg-[#23344D] md:hidden">

        <div class="flex gap-5">

            <?= icon('shield-heal', 'w-5'); ?>

            <span class="text-smaller">Mon carnet de santé</span>

        </div>

        <span x-show="!open">

                <?= icon('chevron-down', 'w-3') ?>

            </span>

        <span x-show="open">

                <?= icon('chevron-down', 'w-3 rotate-180') ?>

            </span>

    </div>

    <div class="md:flex flex-col text-white gap-2 dropdown-content hidden" x-ref="content">

        <div class="focus:bg-[#23344D] hover:bg-background-darker cursor-pointer flex items-center gap-5 p-3 rounded-button">

            <?= icon('dashboard', 'w-5'); ?>

            <span class="text-smaller">Mon tableau de bord</span>

        </div>

        <div id="onboarding-step2" class="hover:bg-background-darker cursor-pointer flex items-center gap-5 p-3 rounded-button bg-[#23344D]">

            <?= icon('shield-heal', 'w-5'); ?>

            <span class="text-smaller">Mon carnet de santé</span>

        </div>

        <div class="hover:bg-background-darker cursor-pointer flex items-center gap-5 p-3 rounded-button">

            <?= icon('favorite', 'w-5'); ?>

            <span class="text-smaller">Mes favoris</span>

        </div>

        <div class="hover:bg-background-darker cursor-pointer flex items-center gap-5 p-3 rounded-button">

            <?= icon('compare', 'w-5'); ?>

            <span class="text-smaller">Mes comparatifs</span>

        </div>

        <div class="hover:bg-background-darker cursor-pointer flex items-center gap-5 p-3 rounded-button">

            <?= icon('safe-deposit-box', 'w-5'); ?>

            <span class="text-smaller">Mon coffre fort</span>

        </div>

        <div class="hover:bg-background-darker cursor-pointer flex items-center gap-5 p-3 rounded-button">

            <?= icon('parameters', 'w-5'); ?>

            <span class="text-smaller">Mes projets</span>

        </div>

        <div class="hover:bg-background-darker cursor-pointer flex items-center gap-5 p-3 rounded-button">

            <?= icon('profile', 'w-5'); ?>

            <span class="text-smaller">Mes informations</span>

        </div>

        <div class="hover:bg-background-darker cursor-pointer flex items-center gap-5 p-3 rounded-button">

            <?= icon('calendar-validated', 'w-5'); ?>

            <span class="text-smaller">Mes rendez-vous</span>

        </div>

        <div class="hover:bg-background-darker cursor-pointer flex items-center gap-5 p-3 rounded-button">

            <?= icon('help', 'w-5'); ?>

            <span class="text-smaller">Mes messages</span>

        </div>

        <div class="hover:bg-background-darker cursor-pointer flex items-center gap-5 p-3 rounded-button">

            <?= icon('disconnect', 'w-5'); ?>

            <span class="text-smaller">Me déconnecter</span>

        </div>

    </div>

</div>