geo/geo-coop
geo/geo-coop
7
1
Fork 0
Code Issues 54 Pull requests Projects Releases Packages Wiki Activity Actions

Use hamburger menu for tablet as well, and hide drawer completely when closed

Browse source 
Ref #114 #126
This commit is contained in:
benjamin melançon 2025-07-15 20:32:22 -04:00
parent 03a075e255
commit 2637b987a3
1 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/themes/custom/geofresco/src/global/_layout.scss
View file

@ -64,7 +64,7 @@
}
// Main navigation, goes to code in page.html.twig
@include mixins.mobile {
@include mixins.touch {
// Code adapted from https://unused-css.com/blog/css-only-hamburger-menu/
.hamburger-container {
transition: transform 0.5s ease;
@ -91,13 +91,13 @@
}
// Hide any focusable elements in the drawer by default to aid keyboard navigation. We use visibility so it makes the elements unfocusable, but doesn't affect the layout. We can also add a "transition" to visibility, which will make it show instantly when we open the drawer, but take half a second to hide it when we close the drawer.
.hamburger-container .drawer a {
.hamburger-container .drawer {
visibility: hidden;
transition: visibility 0.5s linear;
}
// Make the focusable elements in the drawer visible when it is open.
.hamburger-container .checkbox:checked ~ .drawer a {
.hamburger-container .checkbox:checked ~ .drawer {
visibility: visible;
}
@ -168,14 +168,14 @@
}
}
@include mixins.tablet {
@include mixins.desktop {
.hamburger, #hamburger-toggle {
display: none;
}
}
// Make the drawer full-width on mobile
@media screen and (max-width: local.$mini) {
@include mixins.mobile {
.drawer {
width: 100%;
}