45 lines
1.9 KiB
Typst
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)
|
|
}
|