aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/sidebar.vue119
1 files changed, 119 insertions, 0 deletions
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
new file mode 100644
index 0000000..d9c05d5
--- /dev/null
+++ b/src/components/sidebar.vue
@@ -0,0 +1,119 @@
+<script setup lang="js">
+import { watch, ref, toRaw } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import { BIconHouseDoor, BIconPlusSquare, BIconPersonCircle, BIconStack, BIconBuildings } from 'bootstrap-icons-vue';
+
+const requiresAuth = ref(true)
+const route = useRoute()
+watch(
+ () => route.name,
+ async () => {
+ requiresAuth.value = route.meta.isAuth
+ }
+)
+console.log(toRaw(route.fullPath))
+console.log(toRaw(route.fullPath))
+console.log(toRaw(route.fullPath))
+console.log(toRaw(route.name))
+</script>
+
+<template>
+ <div id="sidebar" class="d-flex flex-column flex-shrink-0 bg-dark border-secondary border-end">
+ <RouterLink class="d-flex justify-content-center align-items-center p-3 link-dark text-decoration-none navbar-brand text-white" to="/">
+ <img src="https://vidhukant.com/images/vidhukant.webp" alt="profile photo" width="32" height="32" class="rounded-circle">
+ </RouterLink>
+
+ <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
+ <li class="nav-item">
+ <RouterLink
+ to="/"
+ :class="`nav-link ${route.name === 'home' ? 'active' : ''} py-3 border-secondary border-bottom text-white`"
+ aria-current="page"
+ title="Home"
+ data-bs-toggle="tooltip"
+ data-bs-placement="right"
+ data-bs-original-title="Home">
+ <BIconHouseDoor class="sidebar-icon"/>
+ </RouterLink>
+ </li>
+
+ <li class="nav-item">
+ <RouterLink
+ to="/invoice/new"
+ :class="`nav-link ${(route.name === 'new-invoice' || route.name === 'edit-draft') ? 'active' : ''} py-3 border-secondary border-bottom text-white`"
+ aria-current="page"
+ title="New Invoice"
+ data-bs-toggle="tooltip"
+ data-bs-placement="right"
+ data-bs-original-title="New Invoice">
+ <BIconPlusSquare class="sidebar-icon"/>
+ </RouterLink>
+ </li>
+
+ <li class="nav-item">
+ <RouterLink
+ to="/customer"
+ :class="`nav-link ${(route.name === 'customer' || route.name === 'new-customer') ? 'active' : ''} py-3 border-secondary border-bottom text-white`"
+ aria-current="page"
+ title="Saved Customers"
+ data-bs-toggle="tooltip"
+ data-bs-placement="right"
+ data-bs-original-title="Saved Customers">
+ <BIconPersonCircle class="sidebar-icon"/>
+ </RouterLink>
+ </li>
+
+ <li class="nav-item">
+ <RouterLink
+ to="/brand"
+ :class="`nav-link ${route.name === 'brand' ? 'active' : ''} py-3 border-secondary border-bottom text-white`"
+ aria-current="page"
+ title="Saved Brands"
+ data-bs-toggle="tooltip"
+ data-bs-placement="right"
+ data-bs-original-title="Saved Brands">
+ <BIconBuildings class="sidebar-icon"/>
+ </RouterLink>
+ </li>
+
+ <li class="nav-item">
+ <RouterLink
+ to="/item"
+ :class="`nav-link ${(route.name === 'item' || route.name === 'new-item') ? 'active' : ''} py-3 border-secondary border-bottom text-white`"
+ aria-current="page"
+ title="Saved Items"
+ data-bs-toggle="tooltip"
+ data-bs-placement="right"
+ data-bs-original-title="Saved Items">
+ <BIconStack class="sidebar-icon"/>
+ </RouterLink>
+ </li>
+ </ul>
+
+ <div class="dropdown border-top border-secondary">
+ <a href="#" class="d-flex align-items-center justify-content-center p-3 link-light text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false">
+ <img src="https://vidhukant.com/images/vidhukant.webp" alt="profile photo" width="24" height="24" class="rounded-circle">
+ </a>
+ <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser3">
+ <li><a class="text-white dropdown-item" href="#">Placeholder</a></li>
+ <li><a class="dropdown-item" href="#">Settings</a></li>
+ <li><a class="dropdown-item" href="#">Profile</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Sign out</a></li>
+ </ul>
+ </div>
+ </div>
+</template>
+
+<style>
+#sidebar {
+ width: 4rem;
+ height: 100vh;
+}
+#sidebar .nav-link {
+ border-radius: 0;
+}
+#sidebar .nav-link svg {
+ font-size: 1.7em;
+}
+</style>