FreesideWeb/internal/_includes/snippets/nav.njk

    <div class="container flex  mx-auto h-24 mb-20 mt-2">
        <div class="flex-none">
            <a href="/"><img src="/img/logo.png" class="logo float-left w-64"></a>
        </div>
        <div class="flex-1 flex justify-end">

            <ul class="invisible md:visible">
                <li class="inline-block"><a class="link hover:text-primary" href="/about">about</a></li>
                <li class="inline-block"><a class="link hover:text-primary" href="/history">history</a></li>
                <li class="inline-block mr-4"><a class="link hover:text-primary" href="/alumni">alumni</a></li>
                <li class="inline-block"><button
                        class="btn-cta "><a
                            href="https://profiles.freeside.co.uk/join"> create account </a></li>
                <li class="inline-block"><button
                        class="btn-cta bg-gray-400"><a
                            href="http://profiles.freeside.co.uk/login"> login </a></button></li>
            </ul>



            <div class="md:hidden flex items-center">
                <button id="mobile-menu-button" class="outline-none">
                    <svg class="w-6 h-6 text-gray-500" x-show="!showMenu" fill="none" stroke-linecap="round"
                        stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                        <path d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div id="mobile-menu" class="hidden">
        <ul>
        <li class="active"><a href="/about"
                class="block text-sm px-2 py-4 hover:bg-primary font-semibold ">About</a></li>
        <li><a href="/about" class="block text-sm px-2 py-4 hover:bg-primary transition duration-300">History</a>
        </li>
        <li><a href="/alumni" class="block text-sm px-2 py-4 hover:bg-primary transition duration-300">Alumni</a>
        </li>
        <li><a href="/alumni" class="block text-sm px-2 py-4 bg-primary transition duration-300">Create Account</a>
        </li>
        <li><a href="/alumni" class="block text-sm px-2 py-4 bg-gray-400 transition duration-300">Login</a>
        </li>
        </ul>
    </div>


    <script>
    let hamburger = document.getElementById('mobile-menu-button');

    let mobileMenu = document.getElementById('mobile-menu');

    hamburger.addEventListener('click', function(){
        mobileMenu.classList.toggle('hidden');
    });
</script>