Sidebar
The navigation of an application in sections, collapsed off the page by its toggle.
forSlots(SidebarSlots)(Recipes.Sidebar({}))
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 SidebarStyle = forSlots(SidebarSlots)(Recipes.Sidebar({}))
export interface SidebarMessages<Message> {
readonly onToggleSection: (id: string) => Message
readonly onToggleCollapsed: Message
}
export const sidebar = <Message>(
style: NamedStyle<typeof SidebarSlots>,
state: { readonly open: ReadonlyArray<string>; readonly collapsed: boolean },
messages: SidebarMessages<Message>,
h: HtmlBuilder<Message>,
): Html =>
Sidebar.view(
{
id: 'app-sidebar',
label: 'Workspace',
sections: [
{
id: 'workspace',
title: 'Workspace',
links: [
{ label: 'Inbox', href: '#inbox', current: true },
{ label: 'Projects', href: '#projects' },
{ label: 'Calendar', href: '#calendar' },
],
},
{
id: 'settings',
title: 'Settings',
links: [
{ label: 'Members', href: '#members' },
{ label: 'Billing', href: '#billing' },
],
},
],
open: state.open,
onToggleSection: messages.onToggleSection,
collapsed: state.collapsed,
onToggleCollapsed: messages.onToggleCollapsed,
style,
},
h,
)