diff options
| author | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2024-07-13 22:56:33 +0530 |
|---|---|---|
| committer | Vidhu Kant Sharma <vidhukant@vidhukant.com> | 2024-07-13 22:56:33 +0530 |
| commit | b21eb94983716d63547bad259ada55de1a4e0bd5 (patch) | |
| tree | ed28fd7a1f6f6ef283b67798a6e0ec26765038df | |
| parent | ecc365d231ed90f2d23c13e071f3098310c1dda8 (diff) | |
changed active link foreground and added logo
| -rw-r--r-- | src/components/Sidebar.vue | 13 |
1 files changed, 7 insertions, 6 deletions
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 52e2aa2..b00d55e 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -16,14 +16,15 @@ watch( <template> <div v-if="requiresAuth" 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="" alt="profile photo" width="32" height="32" class="rounded-circle"--> + <!-- sidebar is always dark so no need to detect theme --> + <img src="./../assets/openbills-dark.png" 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`" + :class="`nav-link ${route.name === 'home' ? 'active text-dark' : 'text-white'} py-3 border-secondary border-bottom border-top`" aria-current="page" title="Home" data-bs-toggle="tooltip" @@ -36,7 +37,7 @@ watch( <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`" + :class="`nav-link ${(route.name === 'new-invoice' || route.name === 'edit-invoice') ? 'active text-dark' : 'text-white'} py-3 border-secondary border-bottom`" aria-current="page" title="New Invoice" data-bs-toggle="tooltip" @@ -49,7 +50,7 @@ watch( <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`" + :class="`nav-link ${(route.name === 'customer' || route.name === 'new-customer') ? 'active text-dark' : 'text-white'} py-3 border-secondary border-bottom`" aria-current="page" title="Saved Customers" data-bs-toggle="tooltip" @@ -62,7 +63,7 @@ watch( <li class="nav-item"> <RouterLink to="/brand" - :class="`nav-link ${route.name === 'brand' ? 'active' : ''} py-3 border-secondary border-bottom text-white`" + :class="`nav-link ${route.name === 'brand' ? 'active text-dark' : 'text-white'} py-3 border-secondary border-bottom`" aria-current="page" title="Saved Brands" data-bs-toggle="tooltip" @@ -75,7 +76,7 @@ watch( <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`" + :class="`nav-link ${(route.name === 'item' || route.name === 'new-item') ? 'active text-dark' : 'text-white'} py-3 border-secondary border-bottom`" aria-current="page" title="Saved Items" data-bs-toggle="tooltip" |