feat: icon only sidebar

This commit is contained in:
2026-03-15 10:58:48 +10:30
parent 9791454d62
commit dc3423df13
7 changed files with 103 additions and 0 deletions
+68
View File
@@ -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) {
+10
View File
@@ -41,3 +41,13 @@
#menu > ul:has(li.hasChildren.active) > li.active {
background: transparent !important;
}
/* Icon-only collapsed: submenu slides over narrow icons */
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li::before,
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li::before,
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > label,
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > svg,
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > label,
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > svg {
transform: translateX(-70px);
}