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

Add code and style for 'hamburger' menu nav

Browse source 
Ref #114 #126
This commit is contained in:
benjamin melançon 2025-07-15 01:42:21 -04:00
parent a638bc8fcc
commit 234bc216c5
2 changed files with 27 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -62,3 +62,21 @@
.node--type-people.node--view-mode-teaser { .node--type-people.node--view-mode-teaser {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
// Main navigation, goes to code in page.html.twig
details .burger-icon {
transition: transform 0.1s;
display: block;
width: 1.5rem;
height: 1.5rem;
padding: .25rem;
cursor: pointer;
}
details[open] .burger-icon {
transform: rotate(90deg);
}
summary {
list-style-type: none;
}

9
web/themes/custom/geofresco/src/templates/layout/page.html.twig
View file

@ -24,6 +24,13 @@
{{ page.navbar_branding }} {{ page.navbar_branding }}
{% endblock navbar_branding %} {% endblock navbar_branding %}
<nav class="navigation column"> <nav class="navigation column">
<details>
<summary>
<div class="burger-icon"><svg aria-label="Navigation Menu" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 4h24M0 12h24M0 20h24" stroke="black" stroke-width="2" />
</svg></div>
</summary>
<div class="columns"> <div class="columns">
{% block navbar_social %} {% block navbar_social %}
{% if page.navbar_social %} {% if page.navbar_social %}
@ -45,6 +52,8 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
</details>
</nav> </nav>
</div> </div>
{% if is_front %} {% if is_front %}