Relayout the menu items in nav menu again

This commit is contained in:
Lim Chee Aun 2023-10-19 21:07:00 +08:00
parent 2916d1146b
commit 71bf8608e6
2 changed files with 17 additions and 1 deletions

View file

@ -1,3 +1,9 @@
.nav-menu section:last-child {
background-color: var(--bg-faded-color);
margin-bottom: -8px;
padding-bottom: 8px;
}
@media (min-width: 23em) {
.nav-menu {
display: grid;
@ -8,6 +14,7 @@
'left right';
padding: 0;
width: 22em;
max-width: 100%;
}
.nav-menu .top-menu {
grid-area: top;
@ -27,7 +34,6 @@
}
}
.nav-menu section:last-child {
background-color: var(--bg-faded-color);
background-image: linear-gradient(
to right,
var(--divider-color) 1px,
@ -45,6 +51,15 @@
animation: phanpying 0.2s ease-in-out both;
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
margin-bottom: 0;
display: flex;
flex-direction: column;
.divider-grow {
flex-grow: 1;
height: auto;
background-color: transparent;
}
}
.nav-menu section:last-child > .szh-menu__divider:first-child {
display: none;

View file

@ -249,6 +249,7 @@ function NavMenu(props) {
<Icon icon="block" size="l" />
Blocked users&hellip;
</MenuItem>
<MenuDivider className="divider-grow" />
<MenuItem
onClick={() => {
states.showKeyboardShortcutsHelp = true;