MedLib UI

AppShell

The application shell, driven by **one recursive structure tree**: section nodes render as top-bar tabs (show:'dropdown' opens a menu of children, show:'sidebar' renders them in the left sidebar); inside sections live switcher (workspace/profile picker whose selected child supplies the nav below it), search (filters the items after it), group, item (nesting freely — the chevron expands independently of the link), and divider (vertical in the top bar, horizontal in the sidebar). A section with search:true enables the global top-bar search while active (or force it with showSearchOverride). Give the search something to find with searchGroups — results appear from the first keystroke, grouped by type, matched on title + sub with accents folded; onSearch fires per keystroke for a server-backed search, and onSearchSelect reports the chosen row. Selections bind via bind:activeSection / bind:selections; the current page is marked active:true in the data; clicks fire onSelect(node). Responsive via container query — below the breakpoint everything collapses into a hamburger drawer where sections become an accordion with the active one expanded. Full-page demos in context: the patient, doctor and admin rooms under @mocks.

Props

Name
Details
Default
Control
brand
string
MedLib
brandHref
string
#
structure
NavNode[]
[]
The whole navigation: sections (top bar) with nested switchers/groups/items (sidebar).
sidebar
NavNode[]
A persistent left sidebar, independent of the top-bar sections (for cockpit scopes like MedOS/Admin that have no section tabs). Takes precedence over a section's own show:'sidebar' children when set.
activeSection
string
$bindable(structure.find((n) => n.type === 'section')?.id ?? '')
Active section id (bindable).
selections
Record<string, string>
$bindable({})
Per-switcher selection: { [switcherId]: selectedChildId } (bindable).
user
UserConfig
notifications
NotifItem[]
[]
bell
BellLink
Bell without a dropdown: navigates to href, shows an unread count badge. Used when the host has a notifications page instead of inline items. Ignored if notifications has entries.
searchPlaceholder
string
Caută
searchGroups
SearchGroup[]
[]
Searchable data, grouped by type. AppShell filters these client-side on title + sub, which is all a mock or a small dataset needs. For a server-backed search, listen to onSearch and swap this array as results arrive — the component only renders what it is given.
showSearchOverride
boolean
Whether the top-bar search shows (overrides per-section search). Use for a global search.
signIn
{ label: string; href: string }
Right-side call to action when there's no user (e.g. sign in).

Events

Name
Details
onSearch
(query: string) => void
Fires on every keystroke (trimmed). Use it to fetch.
onSearchSelect
(result: SearchResult, group: SearchGroup) => void
A result was chosen (click or Enter).
onSelect
(node: NavNode) => void
Fired when any section/item/switcher-child is clicked.
onUserMenu
(item: UserMenuItem) => void
Fired when an account-menu row is clicked (also for rows with url).

Snippets

Name
Details
children
Snippet
footer
Snippet
Optional full-width footer below the content (e.g. the marketing footer).

Examples

Top-bar search — results grouped by type