histausse/typst-web-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style the nav menu

Browse source
This commit is contained in:
Jean-Marie 'Histausse' Mineau 2026-03-18 13:56:11 +01:00
parent e7a8cf8a8e
commit 9ed2b151ef
Signed by: histausse
GPG key ID: B66AEEDA9B645AD2
2 changed files with 87 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
lib/html_body.typ
View file

@ -28,6 +28,10 @@
theme-picker {
margin-left: auto;
}
& > * {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
}
site-container {

86
lib/nav_menu.typ
View file

@ -1,7 +1,48 @@
#import "./custom_html.typ" as chtml
// Need inline svg for css color control, so no `image` element :(
#let menu-icon = html.elem(
"svg",
attrs: (
//width: "24",
//height: "24",
style: "width: 2em; height: 2em;",
fill: "currentcolor",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
),
html.elem("path", attrs: (
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"
))
)
#let close-icon = html.elem(
"svg",
attrs: (
//width: "24",
//height: "24",
style: "width: 2em; height: 2em;",
fill: "currentcolor",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
),
html.elem("path", attrs: (
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"
))
)
/// Buttons to toggle the navigation menu.
/// aria-label is the accessibility label for the toggle.
/// menu-icon and close-icon are the content of the toggle deppending on
/// its state. Be carefull to keep it compatible with both light and dark
/// theme.
#let nav-menu-toggle(
aria-label: "Menu Toggle",
menu-icon: menu-icon,
close-icon: close-icon,
) = {
```raw-css
body:has(#nav-menu-toggle:checked) #icon-nav-menu { display: none; }
@ -9,6 +50,10 @@
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 {
display: flex;
justify-content: center;
align-items: center;
input {
opacity: 0;
position: absolute;
@ -16,10 +61,10 @@
}
}
```
html.label(id: "nav-menu-toggle-label", {
html.label(id: "nav-menu-toggle-label", aria-label: aria-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]
chtml.icon-container(id: "icon-nav-menu", menu-icon)
chtml.icon-container(id: "icon-nav-menu-close", close-icon)
})
/*
<button class="btn btn-square" id="menu-toggle" aria-expanded="true" type="button" title="Menu">
@ -39,6 +84,41 @@
display: none;
}
nav-menu {
display: block;
border-top: solid 1px var(--color-border);
border-bottom: solid 1px var(--color-border);
text-align: center;
font-size: 1.25em;
padding-left: 2rem;
padding-right: 2rem;
ul {
list-style: none;
padding: 0px;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
li {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
a {
/* If a list item is considered only of a link, expend link to
* the whole item. */
margin: 0px;
display: block;
width: 100%;
height: 100%;
/* Unstyle link */
color: inherit;
text-decoration: inherit;
/* cursor: inherit; // we want to keep the clickable cursor */
}
}
li:hover {
border-top: solid 1px var(--color-border);
border-bottom: solid 1px var(--color-border);
}
}
```
chtml.nav-menu(body)