fixed sidebar with transparent backgrounds

src/inject/injected.css

@@ -36,7 +36,6 @@ html {
 #main {
   color: var(--text-primary);
   position: relative;
-  padding-top: 5rem;
 }
 
 .forums {
@@ -126,6 +125,12 @@ ul.magicDelete > li.deleting {
   color: var(--text-color);
   display: flex;
   white-space: nowrap;
+  place-items: center;
+}
+
+#menu .sub {
+  top: 71.5px;
+  margin-top: -2px;
 }
 
 #menu section > label {
@@ -180,7 +185,7 @@ li.item.draggable {
 #menu li.active > .sub > ul > .active {
   box-shadow: inset 6px 0 var(--item-colour, transparent);
   transition: 100ms;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.3) !important;
 }
 
 #menu li > label,
@@ -312,6 +317,12 @@ ol:has(.MessageList__avatar___2wxyb svg) {
   height: 100%;
 }
 
+#container #content::before {
+  content: "";
+  height: 5.5rem;
+  width: 100%;
+}
+
 .menuShown #container #content #title {
   -webkit-box-shadow: 6px 5px 16px 6px rgba(0, 0, 0, 0.2) !important;
   box-shadow: 6px 0px 4px 2px rgba(0, 0, 0, 0.2) !important;

src/inject/injected/sidebar-animation.css

@@ -1,17 +1,40 @@
-/* #menu ul.noscroll li > label,
-#menu ul.noscroll li > svg {
-  transform: translateX(-100%);
+#menu ul.noscroll > li {
+  box-shadow: inset 0px 0 var(--item-colour, transparent) !important;
+}
+
+#menu > ul.noscroll > li > label,
+#menu > ul.noscroll > li > svg,
+#menu > ul.noscroll ul.noscroll > li > label,
+#menu > ul.noscroll ul.noscroll > li > svg {
+  transform: translateX(-20rem);
+}
+
+.sub .sub {
+  top: 0 !important;
+}
+
+.sub:has(ul.noscroll) > .nav > .back {
+  display: none !important;
+}
+
+#menu ul > li > label,
+#menu ul > li > svg {
+  transition: transform 0.3s ease;
+}
+
+#menu .sub {
+  transition: transform 0.3s ease;
 }
 
 #menu ul.noscroll li.active {
   background: transparent !important;
 }
-
+/* 
 #menu ul.noscroll li .sub label,
 #menu ul.noscroll li > svg {
   transform: translateX(0);
 }
-
+ */
 #menu li.active>.sub {
   transform: translateX(0);
-} */
+}