hic-et-nunc/site/snippets/nav.php

<h1 class="main-title">
    <a href="<?= $site->url() ?>"><span>H</span>ic et <span>N</span>unc <span>S</span>tudio</a>
</h1>
<nav class="main-menu">
    <h1 class="title-nav">
        <a href="<?= page('home')->url() ?>">
            Hic&nbsp;et&nbsp;Nunc&nbsp;Studio
        </a>
    </h1>
    <ul>
        <li>
            <a class="nav-item-home" href="<?= page('home')->url() ?>"><?= page('home')->title() ?></a>,&nbsp;
        </li>
        <li>
            <a class="nav-item-projects" href="<?= page('index')->url() ?>"><?= page('index')->title() ?></a>,&nbsp;
        </li>
        <li>
            <a class="nav-item-about" href="<?= page('infos')->url() ?>"><?= page('infos')->title() ?></a>
        </li>
    </ul>
</nav>

<nav class="mobile-menu">

    <button command="show-modal" commandfor="mobile-menu-content">
        <h1 class="toggle-mobile-menu">
                Menu
        </h1>
    </button>

    <dialog id="mobile-menu-content" closedby="any">
        <h1 class="title-nav">
            <a href="<?= page('home')->url() ?>">
                Hic&nbsp;et&nbsp;Nunc&nbsp;Studio
            </a>
        </h1>
        <ul>
            <li>
                <a class="nav-item-home" href="<?= page('home')->url() ?>"><?= page('home')->title() ?></a>,&nbsp;
            </li>
            <li>
                <a class="nav-item-projects" href="<?= page('index')->url() ?>"><?= page('index')->title() ?></a>,&nbsp;
            </li>
            <li>
                <a class="nav-item-about" href="<?= page('infos')->url() ?>"><?= page('infos')->title() ?></a>
            </li>
        </ul>
        <button commandfor="mobile-menu-content" command="close" class="toggle-mobile-menu">
            Fermer
        </button>
    </dialog>

</nav>