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>