Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-25 09:18:51 +01:00
Code Issues Projects Releases Packages Wiki Activity

Relayout the menu items in nav menu again

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/nav-menu.css
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) { @media (min-width: 23em) {
.nav-menu { .nav-menu {
display: grid; display: grid;
@ -8,6 +14,7 @@
'left right'; 'left right';
padding: 0; padding: 0;
width: 22em; width: 22em;
max-width: 100%;
} }
.nav-menu .top-menu { .nav-menu .top-menu {
grid-area: top; grid-area: top;
@ -27,7 +34,6 @@
} }
} }
.nav-menu section:last-child { .nav-menu section:last-child {
background-color: var(--bg-faded-color);
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,
var(--divider-color) 1px, var(--divider-color) 1px,
@ -45,6 +51,15 @@
animation: phanpying 0.2s ease-in-out both; animation: phanpying 0.2s ease-in-out both;
border-top-right-radius: inherit; border-top-right-radius: inherit;
border-bottom-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 { .nav-menu section:last-child > .szh-menu__divider:first-child {
display: none; display: none;

1
src/components/nav-menu.jsx
View file

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