typst-web-template/lib/nav_menu.typ
Jean-Marie 'Histausse' Mineau e7a8cf8a8e
implement css logic for nav menu
2026-03-18 01:24:26 +01:00

45 lines
1.9 KiB
Typst

#import "./custom_html.typ" as chtml
/// Buttons to toggle the navigation menu.
#let nav-menu-toggle(
) = {
```raw-css
body:has(#nav-menu-toggle:checked) #icon-nav-menu { display: none; }
body:has(#nav-menu-toggle:checked) #icon-nav-menu-close { display: block; }
body:has(#nav-menu-toggle:not(:checked)) #icon-nav-menu { display: block; }
body:has(#nav-menu-toggle:not(:checked)) #icon-nav-menu-close { display: none; }
#nav-menu-toggle-label {
input {
opacity: 0;
position: absolute;
pointer-event: none;
}
}
```
html.label(id: "nav-menu-toggle-label", {
html.input(type: "checkbox", name: "nav-menu-toggle", id: "nav-menu-toggle")
chtml.icon-container(id: "icon-nav-menu", sym.eq.triple)
chtml.icon-container(id: "icon-nav-menu-close")[X]
})
/*
<button class="btn btn-square" id="menu-toggle" aria-expanded="true" type="button" title="Menu">
<svg class="icon-menu" width="24" height="24" fill="currentcolor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="M3 6.75A.75.75.0 013.75 6h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 6.75zM3 12a.75.75.0 01.75-.75h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 12zm0 5.25a.75.75.0 01.75-.75h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 17.25z"></path>
</svg>
<svg class="icon-close hidden" width="24" height="24" fill="currentcolor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="M5.47 5.47a.75.75.0 011.06.0L12 10.94l5.47-5.47a.75.75.0 111.06 1.06L13.06 12l5.47 5.47a.75.75.0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75.0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75.0 010-1.06z"></path>
</svg>
</button>
*/
}
#let nav-menu(body) = {
```raw-css
body:has(#nav-menu-toggle:not(:checked)) nav-menu {
display: none;
}
nav-menu {
}
```
chtml.nav-menu(body)
}