Header: Mobile Menu

<div class="flex flex-col my-mdSpace">
    <a href="#" class="bg-tertiary-200 rounded-md hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
        Clients
    </a>
    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
        Projects
    </a>
    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
        Tickets
    </a>
    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
        Timesheets
    </a>
    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
        Reports
    </a>
    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
        Users
    </a>
    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
        Comments
    </a>
    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
        Invoices
    </a>
</div>