Navigation menu
The links of a site in a row, the current page marked by a line that glides to it.
forSlots(NavSlots)(Recipes.Nav({}))
Usage
The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.
export const NavStyle = forSlots(NavSlots)(Recipes.Nav({}))
const NavPage = Schema.Literals(['Overview', 'Projects', 'Team', 'Settings'])
type NavPage = typeof NavPage.Type
export const nav = <Message>(style: NamedStyle<typeof NavSlots>, h: HtmlBuilder<Message>): Html =>
UiNav.view<NavPage>({
items: NavPage.literals,
ariaLabel: 'Workspace',
toHref: page => `#${page.toLowerCase()}`,
isItemCurrent: page => page === 'Projects',
// The current link's line glides, and a faint pill follows the pointer.
toView: Nav.toView<NavPage, Message>([style.mixin, ...Nav.fluid], { h }, page => page),
})