From b21eb94983716d63547bad259ada55de1a4e0bd5 Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.com>
Date: Sat, 13 Jul 2024 22:56:33 +0530
Subject: changed active link foreground and added logo

---
 src/components/Sidebar.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

(limited to 'src/components/Sidebar.vue')

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"
-- 
cgit v1.2.3