<script>
    export default {
        methods: {
            getRoutes() {
                return this.$router.options.routes.filter(route => route.meta?.hasOwnProperty('label'));
            }
        }
    }
</script>

<template>
    <nav class="navbar navbar-expand-lg bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <i class="fa-solid fa-book"></i>
                Рабочее место оператора пункта выдачи заказов
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item"
                        v-for="route in this.getRoutes()">
                        <router-link class="nav-link" :to="route.path">{{ route.meta.label }}</router-link>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</template>

<style scoped>
</style>