Tachyons.css Mobile Menu

header.blade.php

<nav id="site-navigation" aria-label="Menu" class="dn-l bg-maillis">
    <ul id="main-menu" class="dn list pa0">
        @if (auth()->check())
            <li class="bb bw1 b--maillis-orange pv2 pl4"><span class="f6 white b">{{ auth()->user()->email }}</span></li>
            <li><a class="f6 link white dib dim pv2 pl4" href="{{ route("auth.profile") }}">{{ trans("public.profile") }}</a></li>
            <li><a class="f6 link white dib dim pv2 pl4" href="{{ route("auth.logout") }}">{{ trans("public.logout") }}</a></li>
        @else
            <li><a class="f6 link white dib dim pv2 pl4" href="{{ route("auth.login") }}">{{ trans("public.login") }}</a></li>
        @endif
        <li><a class="f6 link white dib dim pv2 pl4" href="{{ route("auth.register") }}">{{ trans("public.contact") }}</a></li>
    </ul>
</nav>

<label aria-label="Menu" id="menu" class="dn-l fr white"><i class="material-icons dp48">menu</i></label>

scripts.js

$("#menu").on("click", function (e) {
  var $i = $(this).find("i");

  $i.text() === "menu" ? $i.text("clear") : $i.text("menu");

  $("#main-menu").toggleClass("dn");
});