---
// crumbs at rest, a search field once you click in or press "/". the crumbs and every
// menu are plain links in the html, the script only opens and filters them.
import { icon } from "../lib/icons";
import type { Crumb, MenuGroup } from "../lib/site";
interface Props {
crumbs: Crumb[];
pages: MenuGroup[];
}
const { crumbs, pages } = Astro.props;
---
<div class="addr" data-addr>
<span class="lens" set:html={icon("glass", 14)} />
<nav class="crumbs" aria-label="you are here">
{crumbs.map((c, i) => (
<>
{c.href && !c.current ? (
<a class={`crumb${i === 0 ? " crumb-home" : ""}`} href={c.href}>
{c.icon && i === 0 && <Fragment set:html={icon(c.icon, 14)} />}<span class="t">{c.label}</span>
</a>
) : (
<span class={`crumb current${i === 0 ? " crumb-home" : ""}`} data-type aria-current="page">
{c.icon && i === 0 && <Fragment set:html={icon(c.icon, 14)} />}<span class="t">{c.label}</span>
</span>
)}
{c.menu && (
<button class="crumb-sep" type="button" popovertarget={`sib-${i}`} aria-label={`pages under ${c.label}`} data-sib={i} style={`anchor-name: --sib-${i}`}></button>
)}
</>
))}
<span class="fill" data-type></span>
</nav>
<input data-q type="text" role="combobox" aria-expanded="false" placeholder="jump to a page or search" autocomplete="off" spellcheck="false" aria-label="jump to a page or search" aria-controls="addr-menu" />
<button class="btn arrow" type="button" tabindex="-1" popovertarget="addr-menu" aria-label="all pages" data-arrow></button>
<!-- the menus are popovers, so their buttons open them without js. the script takes them
over to add typing, the arrow keys and closing them together -->
<div class="menu" id="addr-menu" popover data-menu>
<div data-all>
<a href="/">{<Fragment set:html={icon("hydrant", 16)} />}<span class="lbl">all pages</span><span class="hint">home</span></a>
{pages.map((g) => (
<>
<div class="grp">{g.title}</div>
{g.items.map((p) => (
<>
<a href={p.href} aria-current={p.current ? "page" : undefined}><Fragment set:html={icon(p.icon, 16)} /><span class="lbl">{p.label}</span></a>
{p.children?.map((c) => <a class="sub" href={c.href}><span class="lbl">{c.label}</span></a>)}
</>
))}
</>
))}
</div>
<div data-results hidden></div>
<div class="keys"><span><kbd>/</kbd> focus</span><span><kbd>↑</kbd><kbd>↓</kbd> move</span><span><kbd>enter</kbd> open</span><span><kbd>esc</kbd> close</span></div>
</div>
{crumbs.map((c, i) => c.menu && (
<div class="menu anchored" id={`sib-${i}`} popover data-sibmenu={i} style={`position-anchor: --sib-${i}`}>
{c.menu.map((m) => (
<a href={m.href} aria-current={m.current ? "page" : undefined}><Fragment set:html={icon(m.icon, 16)} /><span class="lbl">{m.label}</span></a>
))}
</div>
))}
</div>
<script>
import "../scripts/addressbar";
</script>