project/nuxt3/layouts/default.vue

<script sepup>
// import { computed } from 'vue';

    // const online = useCookie('online');

    // const isOnline = computed(() => {
    //     online?.value ?? false
    // })
</script>

<template>
    <section class="content container-md d-flex flex-column gap-5">
        <header>
            <nav class="container p-4">
                <ul class="d-flex justify-content-between p-0 m-0">
                    <section class="d-flex gap-3 ">
                        <li><NuxtLink to="/"><img src="../public/images/image01.webp" alt=""></NuxtLink></li>
                        <li class="d-sm-none d-xl-flex"><NuxtLink to="/orders">Заявки</NuxtLink></li>
                        <li class="d-sm-none d-xl-flex"><NuxtLink to="/create-order">Создать заявку</NuxtLink></li>
                    </section>

                    <section class="d-flex gap-3 ">
                        <li class="d-sm-none d-xl-flex"><NuxtLink to="/signIn" class="btn btn-primary  d-flex justify-content-center align-items-center">авторизация</NuxtLink></li>
                        <li class="d-sm-none d-xl-flex"><NuxtLink to="/signUp" class="btn btn-primary d-flex justify-content-center align-items-center">Регистрация</NuxtLink></li>
                         <button class="d-xl-none d-lg-flex navbar-toggler btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                          Меню
                            </button>
                            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                            <div class="offcanvas-header">
                                <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Меню</h5>
                                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                            </div>
                            <div class="offcanvas-body">
                                <ul class="navbar-nav justify-content-end flex-grow-1 pe-3 d-flex flex-column gap-3">
                                    <li><NuxtLink to="/orders">Заявки</NuxtLink></li>
                                    <li><NuxtLink to="/create-order">Создать заявку</NuxtLink></li>
                                    <li><NuxtLink to="/signIn">авторизация</NuxtLink></li>
                                 <li><NuxtLink to="/signUp">Регистрация</NuxtLink></li>
        
                                </ul>
                            </div>
                            </div>
                    </section>
                </ul>
            </nav>
        </header>

        <section class="container p-4 d-flex flex-column flex-graw-1 ">
            <slot />
        </section>

        <footer class="container">

        </footer>
    </section>
</template>

<style scoped>
    img{
        height: 3rem;
    }
    .content{
        min-height: 100vh;
    }

    ul{
        list-style-type: none;
    }
    a{
        text-decoration: none;
        text-align: center;
    }
</style>