sake-app/src/components/NavBarComponent.vue

34 lines
1.3 KiB
Vue

<script setup>
import { ref } from 'vue';
import { RouterLink } from 'vue-router';
import LayoutComponent from '../components/LayoutComponent.vue';
import { Popover } from 'bootstrap';
</script>
<template>
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavBar" aria-controls="mainNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavBar">
<LayoutComponent>
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<RouterLink to="/add-account" class="nav-link">{{ $t("navbar.addAccount") }}</RouterLink>
</li>
<li class="nav-item">
<RouterLink to="/manage-accounts" class="nav-link">{{ $t("navbar.manageAccounts") }}</RouterLink>
</li>
<li class="nav-item">
<RouterLink to="/config" class="nav-link">{{ $t("navbar.config") }}</RouterLink>
</li>
<li class="nav-item">
<RouterLink to="/about" class="nav-link">{{ $t("navbar.about") }}</RouterLink>
</li>
</ul>
</LayoutComponent>
</div>
</div>
</nav>
</template>