studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Mobile menu

Browse source
This commit is contained in:
Timothée Goguely 2024-11-21 18:27:25 +01:00
parent 077fa4e326
commit 7cba776cb6
1 changed files with 30 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/Menu.vue
View file

@ -144,7 +144,7 @@ function isCurrent(navItem) {
<style>
button[aria-controls="menu"] {
position: fixed;
z-index: 10;
z-index: 101;
width: 2.5rem;
height: 2.5rem;
}
@ -164,9 +164,7 @@ button[aria-controls="menu"][aria-expanded="false"] {
padding: 1.125rem;
transform: rotate(180deg);
}
button[aria-controls="menu"][aria-expanded="false"]
+ main
> header:not([role="tablist"]) {
button[aria-controls="menu"][aria-expanded="false"] + main > header:not([role="tablist"]) {
margin-left: 4rem;
}
@ -189,6 +187,34 @@ button[aria-controls="menu"][aria-expanded="false"]
overflow-y: auto;
}
@media (max-width: 1023px) {
button[aria-controls="menu"][aria-expanded="true"] {
left: 0;
margin-top: .4rem;
}
#menu {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
border-radius: 0;
height: 100vh;
height: 100dvh;
padding-top: 2.5rem;
}
button[aria-controls="menu"][aria-expanded="true"] + #menu::before {
content: "";
position: fixed;
top: 0;
right: 0;
left: var(--sidebar-width);
bottom: 0;
z-index: -1;
background: var(--color-black-50);
}
}
#menu [data-icon]::before {
background-color: var(--color-grey-700);
}