_nav.tmpl.html

<div class="flex flex-col md:flex-row
            font-sans font-semibold text-xs
            py-4 md:py-6">
    <div class="flex justify-center
                py-1 md:pl-6  md:pr-4 
                md:w-36">
        <a class="font-extrabold nav_item text-black hover:text-slate-500 text-xs tracking-tighter dark:text-slate-200 dark:hover:text-slate-400" href="/">brandur.org</a>
    </div>
    <div class="flex justify-center
                flex-1
                px-4 py-1">
        <ul class="flex tracking-normal md:tracking-wider uppercase">
            <li class="mr-2 md:mr-4">
                <a class="nav_item block text-black hover:text-slate-500 dark:text-slate-200 dark:hover:text-slate-400" href="/articles">Articles</a>
            </li>
            <li class="mr-2 md:mr-4">
                <a class="nav_item block text-black hover:text-slate-500 dark:text-slate-200 dark:hover:text-slate-400" href="/atoms">Atoms</a>
            </li>
            <li class="mr-2 md:mr-4">
                <a class="nav_item block text-black hover:text-slate-500 dark:text-slate-200 dark:hover:text-slate-400" href="/fragments">Fragments</a>
            </li>
            <li class="mr-2 md:mr-4">
                <a class="nav_item block text-black hover:text-slate-500 dark:text-slate-200 dark:hover:text-slate-400" href="/newsletter">Newsletter</a>
            </li>
            <li class="mr-2 md:mr-4 hidden lg:block">
                <a class="nav_item block text-black hover:text-slate-500 dark:text-slate-200 dark:hover:text-slate-400" href="/sequences">Sequences</a>
            </li>
            <li class="mr-2 md:mr-4 hidden md:block">
                <a class="nav_item block text-black hover:text-slate-500 dark:text-slate-200 dark:hover:text-slate-400" href="/now">Now</a>
            </li>
            <li class="mr-2 md:mr-4 hidden md:block">
                <a class="nav_item block text-black hover:text-slate-500 dark:text-slate-200 dark:hover:text-slate-400" href="/uses">Uses</a>
            </li>
            <li class="mr-2 md:mr-4">
                <a class="nav_item block text-black hover:text-slate-500 dark:text-slate-200 dark:hover:text-slate-400" href="/about">About</a>
            </li>
        </ul>
    </div>
    <div class="flex justify-center
                py-1 md:pl-4 md:pr-6
                md:w-36">
        {{template "views/_dark_mode_toggle.tmpl.html" .}}
    </div>
</div>