From 66b6f810a8d7d6039452d5bacb6a2a170e1c36da Mon Sep 17 00:00:00 2001
From: Richard Miguel Irala <richardirala47@hotmail.com>
Date: Thu, 25 Jul 2024 13:30:04 -0300
Subject: [PATCH 1/2] Improved highlight

---
 src/app/components/Sidebar.css.ts | 19 +++++++++++++++++++
 src/app/components/Sidebar.tsx    |  4 +++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/app/components/Sidebar.css.ts b/src/app/components/Sidebar.css.ts
index 828026de..3506db63 100644
--- a/src/app/components/Sidebar.css.ts
+++ b/src/app/components/Sidebar.css.ts
@@ -163,6 +163,25 @@ export const item = style(
   'item',
 )
 
+export const itemActive = style(
+  {
+    color: primitiveColorVars.textAccent,
+    letterSpacing: '0.25px',
+    lineHeight: lineHeightVars.sidebarItem,
+    width: '100%',
+    transition: 'color 0.1s',
+    selectors: {
+      '&:hover': {
+        color: primitiveColorVars.text,
+      },
+      '&[data-active="true"]': {
+        color: primitiveColorVars.textAccent,
+      },
+    },
+  },
+  'itemActive',
+)
+
 export const sectionHeader = style(
   {
     alignItems: 'center',
diff --git a/src/app/components/Sidebar.tsx b/src/app/components/Sidebar.tsx
index a4172a5f..2b43f86b 100644
--- a/src/app/components/Sidebar.tsx
+++ b/src/app/components/Sidebar.tsx
@@ -221,10 +221,12 @@ function SidebarItem(props: {
               ) : (
                 <div
                   className={clsx(
-                    depth === 0
+                    depth <= 1
                       ? item.items && checkSectionTitleActive(item.items, pathname)
                         ? styles.sectionTitleActive
                         : styles.sectionTitle
+                      : item.items && checkSectionTitleActive(item.items, pathname)
+                      ? styles.itemActive
                       : styles.item,
                   )}
                 >

From bbff54aaf5ddfdfaba50eb1448389badb3a0d776 Mon Sep 17 00:00:00 2001
From: Richard Miguel Irala <richardirala47@hotmail.com>
Date: Thu, 25 Jul 2024 13:51:12 -0300
Subject: [PATCH 2/2] Updated white highlight range

---
 src/app/components/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/Sidebar.tsx b/src/app/components/Sidebar.tsx
index 2b43f86b..d1aa6205 100644
--- a/src/app/components/Sidebar.tsx
+++ b/src/app/components/Sidebar.tsx
@@ -221,7 +221,7 @@ function SidebarItem(props: {
               ) : (
                 <div
                   className={clsx(
-                    depth <= 1
+                    depth === 0
                       ? item.items && checkSectionTitleActive(item.items, pathname)
                         ? styles.sectionTitleActive
                         : styles.sectionTitle