From fd909dd3484271b5c65c33b80349677b1b9418c1 Mon Sep 17 00:00:00 2001
From: "Ella E." <ella@discourse.org>
Date: Mon, 6 Jan 2025 18:14:17 -0700
Subject: [PATCH] UX: Refactor nav stack active element (#30601)

* UX: Add a grey background and bold text to highlight the active element in the nav stack
---
 .../stylesheets/common/admin/admin_base.scss   |  6 ------
 .../stylesheets/common/components/navs.scss    | 18 +++++++-----------
 app/assets/stylesheets/desktop/user.scss       | 14 --------------
 3 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 1a93aa429ac..9e6cffca04d 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -780,12 +780,6 @@ $mobile-breakpoint: 700px;
 
     a.active {
       color: var(--primary);
-      background-color: var(--d-sidebar-admin-background);
-      font-weight: 700;
-
-      &::after {
-        display: none; // Hides the arrow
-      }
     }
   }
 
diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index 8bcfd348150..944fd182630 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -92,19 +92,15 @@
     color: var(--primary);
     @include ellipsis;
 
+    &:hover {
+      background: var(--d-sidebar-highlight-background);
+    }
+
     &.active {
       position: relative;
-      --arrow-thickness: 8px;
-      background: var(--d-selected);
-
-      &::after {
-        position: absolute;
-        right: 0;
-        top: calc(50% - var(--arrow-thickness));
-        content: " ";
-        border: var(--arrow-thickness) solid transparent;
-        border-left-color: var(--secondary);
-      }
+      color: var(--primary);
+      background-color: var(--d-selected);
+      font-weight: bold;
     }
   }
 
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 57ab0ea7e6c..17b04db9d91 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -29,20 +29,6 @@
         padding-left: 1.4em;
       }
     }
-
-    a {
-      color: var(--primary-medium);
-
-      &.active {
-        color: var(--primary);
-        font-weight: bold;
-        background-color: transparent;
-
-        &:after {
-          display: none;
-        }
-      }
-    }
   }
 
   .select-kit + .messages-nav {