blob: 46f4f0c2aa6039465f0aebdeeb9e2a70698dd3c2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<script setup lang="js">
import { watch, ref } 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
}
)
</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-invoice') ? '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: 100dvh;
}
#sidebar .nav-link {
border-radius: 0;
}
#sidebar .nav-link svg {
font-size: 1.7em;
}
</style>
|
