@props(['subtitle' => ''])
<div {{$attributes->merge(['class' => 'transition-all duration-500 h-0 overflow-hidden bg-white shadow z-30 fixed top-0 w-full transition-height duration-500 ease-in'])}} style="z-index: 999">
    <div class="flex ml-auto pl-8 2xl:pl-80 xl:pl-60 pt-20">
        <span class="text-blue text-xs uppercase py-14 mr-12">{{$subtitle}}</span>
        <div class="w-full pt-6 pb-14 flex-1">
            <ul>
                {{$slot}}
            </ul>
            <div class="text-blue text-opacity-50 flex items-center space-x-10 mt-8">
                <a href="https://fr.linkedin.com/company/diffusions-aromatiques-sas" class="flex items-center space-x-2.5">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15.8333 0H4.16667C1.86583 0 0 1.86583 0 4.16667V15.8333C0 18.1342 1.86583 20 4.16667 20H15.8333C18.135 20 20 18.1342 20 15.8333V4.16667C20 1.86583 18.135 0 15.8333 0ZM6.66667 15.8333H4.16667V6.66667H6.66667V15.8333ZM5.41667 5.61C4.61167 5.61 3.95833 4.95167 3.95833 4.14C3.95833 3.32833 4.61167 2.67 5.41667 2.67C6.22167 2.67 6.875 3.32833 6.875 4.14C6.875 4.95167 6.2225 5.61 5.41667 5.61ZM16.6667 15.8333H14.1667V11.1633C14.1667 8.35667 10.8333 8.56917 10.8333 11.1633V15.8333H8.33333V6.66667H10.8333V8.1375C11.9967 5.9825 16.6667 5.82333 16.6667 10.2008V15.8333Z" fill="currentColor"/>
                    </svg>
                    <span>Linkedin</span>
                </a>
                <a href="https://www.instagram.com/diffusionsaromatiques/" class="flex items-center space-x-2.5">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.99603 1.80194C12.6667 1.80194 12.9802 1.81385 14.0357 1.86148C15.0119 1.90514 15.5397 2.06787 15.8929 2.20679C16.3611 2.38936 16.6944 2.60369 17.0437 2.95297C17.3929 3.30224 17.6111 3.63564 17.7897 4.10399C17.9246 4.45723 18.0913 4.98512 18.1349 5.9615C18.1825 7.01727 18.1944 7.33082 18.1944 10.002C18.1944 12.6731 18.1825 12.9867 18.1349 14.0425C18.0913 15.0189 17.9286 15.5467 17.7897 15.9C17.6071 16.3683 17.3929 16.7017 17.0437 17.051C16.6944 17.4003 16.3611 17.6186 15.8929 17.7972C15.5397 17.9321 15.0119 18.0988 14.0357 18.1425C12.9802 18.1901 12.6667 18.202 9.99603 18.202C7.3254 18.202 7.01191 18.1901 5.95635 18.1425C4.98016 18.0988 4.45238 17.9361 4.09921 17.7972C3.63095 17.6146 3.29762 17.4003 2.94841 17.051C2.59921 16.7017 2.38095 16.3683 2.20238 15.9C2.06746 15.5467 1.90079 15.0189 1.85714 14.0425C1.80952 12.9867 1.79762 12.6731 1.79762 10.002C1.79762 7.33082 1.80952 7.01727 1.85714 5.9615C1.90079 4.98512 2.06349 4.45723 2.20238 4.10399C2.38492 3.63564 2.59921 3.30224 2.94841 2.95297C3.29762 2.60369 3.63095 2.38539 4.09921 2.20679C4.45238 2.07184 4.98016 1.90514 5.95635 1.86148C7.01191 1.80988 7.32937 1.80194 9.99603 1.80194ZM9.99603 0C7.28175 0 6.94048 0.0119071 5.87302 0.0595356C4.80952 0.107164 4.08333 0.277833 3.44841 0.523914C2.78968 0.777932 2.23413 1.12324 1.67857 1.6789C1.12302 2.23457 0.781746 2.79421 0.52381 3.4491C0.277778 4.08414 0.107143 4.81048 0.0595238 5.87815C0.0119048 6.94185 0 7.28319 0 9.99802C0 12.7128 0.0119048 13.0542 0.0595238 14.1218C0.107143 15.1856 0.277778 15.9119 0.52381 16.5509C0.777778 17.2098 1.12302 17.7654 1.67857 18.3211C2.23413 18.8768 2.79365 19.2181 3.44841 19.4761C4.08333 19.7222 4.80952 19.8928 5.87698 19.9405C6.94444 19.9881 7.28175 20 10 20C12.7183 20 13.0556 19.9881 14.123 19.9405C15.1865 19.8928 15.9127 19.7222 16.5516 19.4761C17.2103 19.2221 17.7659 18.8768 18.3214 18.3211C18.877 17.7654 19.2183 17.2058 19.4762 16.5509C19.7222 15.9159 19.8929 15.1895 19.9405 14.1218C19.9881 13.0542 20 12.7168 20 9.99802C20 7.27922 19.9881 6.94185 19.9405 5.87418C19.8929 4.81048 19.7222 4.08414 19.4762 3.44513C19.2222 2.78627 18.877 2.2306 18.3214 1.67494C17.7659 1.11927 17.2064 0.777932 16.5516 0.519944C15.9167 0.273864 15.1905 0.103195 14.123 0.0555666C13.0516 0.0119071 12.7103 0 9.99603 0Z" fill="currentColor"/>
                        <path d="M9.99603 4.86604C7.16269 4.86604 4.86111 7.16412 4.86111 10.002C4.86111 12.8398 7.15873 15.1379 9.99603 15.1379C12.8333 15.1379 15.1309 12.8398 15.1309 10.002C15.1309 7.16412 12.8333 4.86604 9.99603 4.86604ZM9.99603 13.332C8.15476 13.332 6.66269 11.8396 6.66269 9.99801C6.66269 8.15638 8.15476 6.66402 9.99603 6.66402C11.8373 6.66402 13.3294 8.15638 13.3294 9.99801C13.3294 11.8396 11.8373 13.332 9.99603 13.332Z" fill="currentColor"/>
                        <path d="M15.3333 5.8583C15.9952 5.8583 16.5318 5.32165 16.5318 4.65965C16.5318 3.99765 15.9952 3.461 15.3333 3.461C14.6715 3.461 14.1349 3.99765 14.1349 4.65965C14.1349 5.32165 14.6715 5.8583 15.3333 5.8583Z" fill="currentColor"/>
                    </svg>
                    <span>Instragram</span>
                </a>
                <a href="https://fr-fr.facebook.com/DiffusionsAromatiques/" class="flex items-center space-x-2.5">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10 20H2.46132C2.40506 19.9859 2.33474 19.9577 2.27848 19.9435C1.22363 19.8589 0.309423 19.0543 0.0984529 18.024C0.0703235 17.8546 0.0281294 17.6994 0 17.53V2.42766C0.0140647 2.37121 0.0421941 2.30064 0.0562588 2.24418C0.126582 1.97601 0.154712 1.6796 0.281294 1.42555C0.759494 0.437544 1.60338 0 2.70042 0C7.39803 0 12.0956 0 16.7932 0C17.0886 0 17.384 0.0141143 17.6934 0.0282287C18.7764 0.0988003 19.6906 0.903317 19.9015 1.96189C19.9297 2.11715 19.9578 2.27241 20 2.42766V17.53C19.9859 17.5865 19.9578 17.657 19.9437 17.7135C19.8594 18.7721 19.0577 19.6895 18.0309 19.9012C17.8622 19.9294 17.7075 19.9577 17.5387 20H13.7412C13.7412 19.9153 13.7553 19.8306 13.7553 19.7459C13.7553 17.6147 13.7553 15.4975 13.7553 13.3663C13.7553 13.1828 13.8115 13.1122 13.9944 13.1263C14.4726 13.1404 14.9508 13.1263 15.4149 13.1404C15.5696 13.1404 15.654 13.0981 15.7103 12.9428C16.0759 12.0254 16.4416 11.108 16.8073 10.1905C16.8354 10.1341 16.8495 10.0776 16.8776 9.97883H16.6245C15.7384 9.97883 14.8383 9.97883 13.9522 9.97883C13.8537 9.97883 13.7553 9.97883 13.7553 9.83768C13.7553 9.07551 13.7412 8.32745 13.7693 7.56528C13.7834 7.08539 13.91 6.95836 14.3882 6.91602C14.8523 6.88779 15.3165 6.88779 15.7665 6.88779C15.9212 6.88779 16.076 6.88779 16.2447 6.88779V3.71207H16.0056C15.2321 3.71207 14.4726 3.71207 13.699 3.71207C13.5162 3.71207 13.3333 3.72618 13.1505 3.75441C11.4065 3.98024 9.98594 5.60339 9.97187 7.38179C9.97187 8.15808 9.97187 8.93437 9.97187 9.71066C9.97187 9.97883 9.97187 9.97883 9.70464 9.97883C9.0436 9.97883 8.38256 9.97883 7.70745 9.97883C7.63713 9.97883 7.55274 9.97883 7.49648 9.99294V13.1546H7.74965C8.41069 13.1546 9.05766 13.1546 9.71871 13.1546C9.97187 13.1546 9.97187 13.1546 9.97187 13.4086C9.97187 15.5258 9.97187 17.6429 9.97187 19.7601C9.97187 19.8306 9.98594 19.9153 10 20Z" fill="#A2B6C0"/>
                    </svg>
                    <span>Facebook</span>
                </a>
                <a href="https://twitter.com/DAromatiques" class="flex items-center space-x-2.5">
                    <svg width="24" height="24" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter-square"
                         class="svg-inline--fa fa-twitter-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 448 512">
                        <path fill="currentColor"
                              d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path>
                    </svg>
                    <span>Twitter</span>
                </a>
            </div>
        </div>
        <div class="bg_image_submenu ml-8 lg:ml-28 bg-opacity-5 p-12" style="width: 379px">
                <img src="/images/menu/certifications_sub.jpg" alt="flavor" class="image_submenu h-full object-cover">
        </div>
    </div>
</div>