<nav>
    <!-- top -->
    <section class="top">
        <!-- logo -->
        <a href="{{ route('dashboard') }}" class="home">
            <x-application-logo class="logo logo--app" />
        </a>

        <!-- app nav -->
        <menu>
            <x-app.nav-button
                :href="route('dashboard')"
                :active="request()->routeIs('dashboard')"
                icon="home"
            />
            <x-app.nav-button
                :href="route('calendar.index')"
                :active="request()->routeIs('calendar*')"
                icon="calendar"
            />
            <x-app.nav-button
                :href="route('book.index')"
                :active="request()->routeIs('book.index')"
                icon="book-user"
            />
        <menu>
    </section>

    <!-- bottom -->
    <section class="bottom">
        <x-button.icon type="anchor" :href="route('account.index')">
            <x-icon-user-circle class="w-7 h-7" />
        </x-button.icon>
    </div>
</nav>
