diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 16 | ||||
| -rw-r--r-- | src/components/sidebar.vue | 119 | ||||
| -rw-r--r-- | src/router/index.ts | 6 |
3 files changed, 137 insertions, 4 deletions
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 } }, |