aboutsummaryrefslogtreecommitdiff
path: root/src/components/navbar.vue
diff options
context:
space:
mode:
authorVidhu Kant Sharma <vidhukant@vidhukant.com>2023-10-04 20:31:21 +0530
committerVidhu Kant Sharma <vidhukant@vidhukant.com>2023-10-04 20:31:21 +0530
commit92fb85b8afaacc4a8b5dbb41eea2d0e35eeb6862 (patch)
tree1b7bd25a29d0751f3efbd5e1125a1b079a31045c /src/components/navbar.vue
first commitv0.0.1
Diffstat (limited to 'src/components/navbar.vue')
-rw-r--r--src/components/navbar.vue64
1 files changed, 64 insertions, 0 deletions
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
new file mode 100644
index 0000000..e6205c8
--- /dev/null
+++ b/src/components/navbar.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { watch, ref } from "vue"
+import { RouterLink, useRoute } from "vue-router"
+
+const requiresAuth = ref(true)
+const route = useRoute()
+watch(
+ () => route.name,
+ async () => {
+ requiresAuth.value = route.meta.isAuth
+ }
+);
+</script>
+
+<template>
+ <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
+ <div class="container-fluid">
+ <RouterLink class="navbar-brand" to="/">OpenBills</RouterLink>
+
+ <button
+ class="navbar-toggler"
+ type="button"
+ data-bs-toggle="collapse"
+ data-bs-target="#navbarSupportedContent"
+ aria-controls="navbarSupportedContent"
+ aria-expanded="false"
+ aria-label="Toggle navigation"
+ >
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div v-if="requiresAuth" class="collapse navbar-collapse" id="navbarSupportedContent">
+ <span class="me-auto"></span>
+ <ul class="navbar-nav mb-2 mb-lg-0">
+ <li class="nav-item">
+ <RouterLink to="/" class="nav-link">Home</RouterLink>
+ </li>
+ <li class="nav-item dropdown">
+ <a
+ class="nav-link dropdown-toggle"
+ href="#"
+ role="button"
+ data-bs-toggle="dropdown"
+ aria-expanded="false"
+ >
+ View
+ </a>
+ <ul class="dropdown-menu">
+ <li><RouterLink to="/customer" class="dropdown-item">Customers</RouterLink></li>
+ <li><RouterLink to="/brand" class="dropdown-item">Brands</RouterLink></li>
+ <li><RouterLink to="/item" class="dropdown-item">Items</RouterLink></li>
+ </ul>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+</template>