feat: icon only sidebar

src/css/injected.scss

@@ -455,6 +455,63 @@ ul.magicDelete > li.deleting {
   width: 28px !important;
   height: 28px !important;
 }
+
+/* Icon Only Sidebar - compact mode. When submenu is open, all styles are disabled so it behaves as normal sidebar. */
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) {
+  #menu {
+    width: 70px !important;
+    min-width: 70px !important;
+    max-width: 70px !important;
+    transition: width 0.2s ease;
+    overflow: hidden !important;
+  }
+
+  #menu > ul {
+    min-width: 0 !important;
+    overflow-x: hidden !important;
+  }
+
+  #content {
+    left: 70px !important;
+  }
+
+  #menu li > label span,
+  #menu section > label span {
+    display: none !important;
+  }
+
+  #menu ul > li > svg {
+    display: none !important;
+  }
+
+  #menu .sub {
+    left: 70px !important;
+  }
+
+  #menu ul li,
+  #menu ul section {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    padding: 8px !important;
+    justify-content: center !important;
+    box-sizing: border-box !important;
+  }
+
+  #menu li > label,
+  #menu section > label {
+    flex: 0 0 auto !important;
+    min-width: 0 !important;
+    justify-content: center !important;
+    overflow: hidden !important;
+  }
+
+  #menu li > label > svg,
+  #menu section > label > svg {
+    margin: 0 auto !important;
+    flex-shrink: 0 !important;
+  }
+}
 [class*="notifications__items___"] {
   -ms-overflow-style: none !important;
   scrollbar-width: none !important;
@@ -921,6 +978,17 @@ html.transparencyEffects
     -webkit-transform: translatex(270px);
     transform: translatex(270px);
   }
+
+  body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) {
+    #menu {
+      -webkit-transform: translatex(-70px);
+      transform: translatex(-70px);
+    }
+    .menuShown #content {
+      -webkit-transform: translatex(70px);
+      transform: translatex(70px);
+    }
+  }
 }
 
 @media (max-width: 1145px) {