From d686631b8dc00fa95b981f237f82e7b3dcd013b3 Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Sun, 9 Jun 2024 08:45:54 +1000
Subject: [PATCH] fix: colours not moving with sidebar transition

---
 src/css/injected.scss                   | 41 +++++++++++++++++--------
 src/css/injected/sidebar-animation.scss |  4 ++-
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/css/injected.scss b/src/css/injected.scss
index a5053eb2..f9ec1ed2 100644
--- a/src/css/injected.scss
+++ b/src/css/injected.scss
@@ -309,20 +309,35 @@ ul.magicDelete > li.deleting {
     left: -8px;
   }
 }
-#menu li.active > .sub > ul > .item {
-  box-shadow: inset 3px 0 var(--item-colour, transparent);
-  border-radius: 0px 8px 8px 0px;
-  transition: 100ms;
-}
-#menu li.active > .sub > ul > .item:hover {
-  box-shadow: inset 6px 0 var(--item-colour, transparent);
-  transition: 100ms;
-}
-#menu li.active > .sub > ul > .active {
-  box-shadow: inset 6px 0 var(--item-colour, transparent);
-  transition: 100ms;
-  background: rgba(0, 0, 0, 0.3) !important;
+
+#menu {
+  li.active > .sub > ul > .item:not(.hasChildren) {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 3px;
+      background: var(--item-colour, transparent);
+      transition: width 100ms, transform 0.3s ease;
+      border-radius: 8px 0 0 8px;
+    }
+
+    &:hover::before,
+    &.active::before {
+      width: 6px;
+      background: var(--item-colour, transparent);
+    }
+  }
+
+  li.active > .sub > ul > .active {
+    background: rgba(0, 0, 0, 0.3) !important;
+  }
 }
+
 #menu li > label,
 #menu section > label {
   text-transform: none;
diff --git a/src/css/injected/sidebar-animation.scss b/src/css/injected/sidebar-animation.scss
index 9e8941bc..a6ec6efd 100644
--- a/src/css/injected/sidebar-animation.scss
+++ b/src/css/injected/sidebar-animation.scss
@@ -7,11 +7,13 @@
   overflow-y: scroll !important;
 }
 
+#menu > ul:has(li.hasChildren.active) > li::before,
+#menu > ul ul:has(li.hasChildren.active) > li::before,
 #menu > ul:has(li.hasChildren.active) > li > label,
 #menu > ul:has(li.hasChildren.active) > li > svg,
 #menu > ul ul:has(li.hasChildren.active) > li > label,
 #menu > ul ul:has(li.hasChildren.active) > li > svg {
-  transform: translateX(-20rem);
+  transform: translateX(-320px);
 }
 
 .sub .sub {