Alan Guo Xiang Tan f1cbc23f1e
UX: Add icons to all section links in Sidebar ()
This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. 

Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong.

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00

58 lines
1.2 KiB
SCSS

.menu-panel {
&.user-menu.revamped {
width: unset;
}
.panel-body {
max-height: calc(100vh - 100px);
}
}
// Sidebar-hamburger hybrid
.hamburger-panel .revamped {
--d-sidebar-highlight-color: var(--highlight-medium);
--d-sidebar-row-horizontal-padding: 0.5rem;
--d-sidebar-row-height: 30px;
// 1.25rem gets text left-aligned with the hamburger icon
--d-sidebar-row-horizontal-padding: 0.66rem;
--d-sidebar-row-vertical-padding: 0.33rem;
.panel-body-content {
width: 100%;
min-width: 0; // prevent content blowing out width
}
.sidebar-section-wrapper {
.sidebar-section-header-button {
opacity: 1;
}
.sidebar-section-link.active {
font-weight: normal;
color: var(--primary-high);
background: var(--tertiary-low);
}
.sidebar-section-header-wrapper .select-kit .btn:hover {
background: transparent;
}
}
.sidebar-section-link-wrapper
.sidebar-section-link-hover:hover
.sidebar-section-hover-button {
background: transparent;
}
.sidebar-footer-wrapper {
padding: 0;
.sidebar-footer-container {
padding: 0;
&:before {
top: calc(-100% + 2px);
}
}
}
}