added sidebar0.2.0

5 files changed, 147 insertions, 7 deletions

diff --git a/package-lock.json b/package-lock.json
index 5c3f59e..f051c37 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,17 @@
 {
   "name": "openbills-web",
-  "version": "0.0.5",
+  "version": "0.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "openbills-web",
-      "version": "0.0.5",
+      "version": "0.1.1",
       "dependencies": {
         "axios": "^1.5.1",
         "bootstrap": "^5.3.2",
         "bootstrap-icons": "^1.11.1",
+        "bootstrap-icons-vue": "^1.11.1",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4",
         "vue-toast-notification": "^3.1.1"
@@ -1859,6 +1860,11 @@
         }
       ]
     },
+    "node_modules/bootstrap-icons-vue": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons-vue/-/bootstrap-icons-vue-1.11.1.tgz",
+      "integrity": "sha512-vQELXxclY2LauUJ7OMXScv1j+mJS2K2h7NTgW7yDG954dI+SC2QHLKg+Mc7qmCDZ+3oMayeLqmFTDX0GBmdobA=="
+    },
     "node_modules/bplist-parser": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
diff --git a/package.json b/package.json
index 73155b0..5e3e9af 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "openbills-web",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -15,6 +15,7 @@
     "axios": "^1.5.1",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.1",
+    "bootstrap-icons-vue": "^1.11.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
     "vue-toast-notification": "^3.1.1"
diff --git a/src/App.vue b/src/App.vue
index ab2e3f5..c637566 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,25 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import navbar from './components/navbar.vue'
+//import navbar from './components/navbar.vue'
+import sidebar from './components/sidebar.vue'
 </script>
 
 <template>
+  <!--
   <navbar />
+  -->
+  <sidebar />
   <main class="m-3">
     <RouterView />
   </main>
 </template>
+
+<style>
+main {
+  width: 100%;
+}
+#app {
+  display: flex;
+  flex-direction: row;
+}
+</style>
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>
diff --git a/src/router/index.ts b/src/router/index.ts
index 55e2070..9817a1e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -46,7 +46,7 @@ const router = createRouter({
     },
     {
       path: '/customer/new',
-      name: 'new customer',
+      name: 'new-customer',
       component: NewCustomer,
       meta: { isAuth: true }
     },
@@ -58,13 +58,13 @@ const router = createRouter({
     },
     {
       path: '/item/new',
-      name: 'new item',
+      name: 'new-item',
       component: NewItem,
       meta: { isAuth: true }
     },
     {
       path: '/invoice/new',
-      name: 'new invoice',
+      name: 'new-invoice',
       component: NewInvoice,
       meta: { isAuth: true }
     },