Sidenav

<div class="flex flex-col sm:flex-row">
    <div class="flex flex-col sm:pr-6 lg:pr-10 w-full sm:w-[250px] lg:w-[350px] mb-10 sm:mb-0" x-data="{open:false}">
        <h3 class="text-xl font-bold uppercase px-6 py-4 bg-dark/5 border-b border-dark/10 flex justify-between items-center">
            Documents
            <div class="sm:hidden cursor-pointer hover:opacity-80 px-1 -mr-1" tabindex="0" x-on:click="open = !open" x-on:keydown.space="open != open">
                <i class="fas fa-chevron-up fa-lg" x-show="open"></i>
                <i class="fas fa-chevron-down fa-lg" x-show="!open"></i>
            </div>
        </h3>
        <div class="sm:!flex sm:!h-auto" x-show="open" x-collapse>
            <nav class="flex flex-col text-lg lg:text-xl font-bold mt-6 space-y-4 pb-6 sm:pb-0 border-b border-dark/10 sm:border-0">
                <a href="#" class="flex items-center pl-6 underline-offset-2 hover:text-blue focus:outline-none focus:ring-0 focus:underline">Employee HR documents</a>
                <a href="#" class="flex items-center pl-6 underline-offset-2 hover:text-blue focus:outline-none focus:ring-0 focus:underline text-blue" tabindex="-1">
                    <i class="fas fa-chevron-right fa-sm -ml-5 mr-2"></i>
                    IT help and FAQ
                </a>
                <a href="#" class="flex items-center pl-6 underline-offset-2 hover:text-blue focus:outline-none focus:ring-0 focus:underline">Useful resources</a>
                <a href="#" class="flex items-center pl-6 underline-offset-2 hover:text-blue focus:outline-none focus:ring-0 focus:underline">Wellbeing documents</a>
            </nav>
        </div>
    </div>
    <div class="flex-1 sm:border-l border-dark\20 sm:pl-6 lg:pl-10">
        Content...
    </div>
</div>