Header Top bar component

<div class="n7-top-bar lg:flex items-center lg:py-1 n7-background-gray-02">
    <div class="n7-top-bar__container container lg:flex items-center lg:flex-1">
        <div class="n7-top-bar__navigation grid lg:flex items-center gap-2 lg:gap-8">
            <!-- LINK CERTIFICAZIONE ISO  -->

            <!-- Secondary nav/menu component -->
            <nav aria-label="Secondaria">
                <ul class="n7-secondary-navigation flex max-lg:flex-col max-lg:gap-6">

                    <li class="">
                        <a href="page" class="n7-link max-lg:block py-2 lg:p-2 text-sm n7-content-01">
                            Notizie

                        </a>
                    </li>

                    <li class="">
                        <a href="page" class="n7-link max-lg:block py-2 lg:p-2 text-sm n7-content-01">
                            Contatti

                        </a>
                    </li>

                </ul>
            </nav>
        </div>

        <div class="n7-top-bar__utilities-area flex items-center justify-between lg:flex-start lg:ml-auto">

            <!-- Social links component -->
            <ul class="n7-social-links flex items-center gap-8">

                <li class="flex items-center">
                    <a href="facebook.com" class="n7-link text-3xl lg:text-2xl text-secondary-600">
                        <span class="sr-only">Vai al profilo Facebook di ???</span>

                        <svg class="inline-block align-middle fill-current w-1e h-1e" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#solid--facebook" />
                        </svg>

                    </a>
                </li>

                <li class="flex items-center">
                    <a href="instagram.com" class="n7-link text-3xl lg:text-2xl text-secondary-600">
                        <span class="sr-only">Vai al profilo Instagram di ???</span>

                        <svg class="inline-block align-middle fill-current w-1e h-1e" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#solid--instagram" />
                        </svg>

                    </a>
                </li>

                <li class="flex items-center">
                    <a href="youtube.com" class="n7-link text-3xl lg:text-2xl text-secondary-600">
                        <span class="sr-only">Vai al canale YouTube di ???</span>

                        <svg class="inline-block align-middle fill-current w-1e h-1e" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#solid--youtube" />
                        </svg>

                    </a>
                </li>

            </ul>
            <span class="hidden lg:inline w-1e h-10 mx-6 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>

            <!-- Language Selector component -->
            <div>Lingua</div>

            <!-- Search component -->
            <div>
                <button type="button" id="searchModalTrigger" class="n7-link n7-btn n7-btn--icon n7-content-01 border-0 w-10 h-10">
                    <span class="sr-only">Cerca nel sito di OffHealth - apri la modale</span>
                    <svg class="inline-block align-middle fill-current w-5 h-5" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#mini--magnifying-glass" />
                    </svg>

                </button>

                <!-- Search Modal - BEGIN -->
                <div id="searchModal" class="fixed items-center content-center inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full" style="display:none;" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modalTitle">

                    <div class="relative h-full w-full mx-auto p-6 lg:p-16 shadow-lg n7-background-gray-01">
                        <div class="container lg:px-16 grid gap-14">
                            <div class="flex justify-between items-center n7-content-01">
                                <h2 id="modalTitle" class="text-3xl md:text-5xl lg:text-6xl">Cerca nel sito</h2>
                                <button id="closeModal" class="n7-link n7-btn n7-btn--icon n7-content-01 border-0">
                                    <span class="sr-only">Chiudi</span>
                                    <svg class="inline-block align-middle fill-current w-8 h-8" aria-hidden="true" focusable="false" role="img">
                                        <use xlink:href="../../icons.svg#mini--x-mark" />
                                    </svg>

                                </button>
                            </div>

                            <div class="modal-content">
                                <form role="search" class="flex flex-col lg:flex-row gap-4">
                                    <div class="n7-input-field grid gap-2 flex-1">
                                        <label for="search" class="block text-base font-medium n7-content-01">Cerca tra i prodotti, le notizie, ecc ...</label>

                                        <div class="n7-input flex items-center relative">

                                            <svg class="inline-block align-middle fill-current w-6 h-6 absolute left-3 n7-content-placeholder" aria-hidden="true" focusable="false" role="img">
                                                <use xlink:href="../../icons.svg#mini--magnifying-glass" />
                                            </svg>

                                            <input id="search" class="border-1 n7-border-gray-01 text-sm n7-input-placeholder py-3 pr-3 border n7-border-gray-01 rounded-full w-full pl-10 " type="search" placeholder="Cerca">

                                        </div>
                                    </div>

                                    <button type="button" class="n7-btn 
    n7-btn--primary
    n7-btn--primary w-fit lg:self-end">
                                        Cerca nel sito

                                        <svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
                                            <use xlink:href="../../icons.svg#mini--arrow-right" />
                                        </svg>

                                    </button>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Search Modal - END -->
            </div><!--/ END Search component -->

        </div><!--/ END TOP BAR UTILITIES -->

    </div>
</div><!-- /END TOPBAR -->