Scaffold
Add a layout that includes a sidenav and a header.
The sidenav is equivalent to daisyUI's drawer but the Sara's version can be collapsible if the sidenavConfig prop gets a collapsedAt value.
Example
<script>
import { Scaffold } from "saraui"
</script>
<Scaffold>
<header slot="header" class="py-4 px-2 border-b">
<!-- header content here -->
</header>
<!-- page content here (slot if it's a layout) -->
<nav slot="sidenav" class="p-2 border-r">
<!-- sidenav content here -->
</nav>
</Scaffold>SidenavButton
Allows to toggle the sidenav.
By default it'll have a ghost style, you can paint it with modifier="glass" and a color value.
If you want to recreate your own button or need to dinamically open/close the sidenav, you can use the sidenav store.
Example
<script>
import { SidenavButton } from "saraui"
</script>
<SidenavButton tooltip="menu"
modifier="glass"
color="primary"
/>SidenavItem
Allows to represent an item in the sidenav.
If the sidenav is collapsed it'll show only the given icon through its props.
Example
<script>
import { Scaffold, SidenavItem } from "saraui"
</script>
<Scaffold>
...
<nav slot="sidenav" class="p-2">
<SidenavItem href="/provider"
icon="i-mdi-power-plug-outline"
label="Provider"
/>
</nav>
</Scaffold>SidenavCollapsibleList
Allows to represent a collapsible list of sidenav items.
Example
<script>
import { Scaffold, SidenavCollapsibleList, SidenavItem } from "saraui"
const items = [
{ href="/buttons", label: "Buttons" }
{ href="/modals", label: "Modals" }
{ href="/notification", label: "notification" }
]
</script>
<Scaffold>
...
<nav slot="sidenav" class="p-2">
<SidenavCollapsibleList
label="Components"
icon="i-mdi-package-variant"
>
{#each items as { href, label }}
<SidenavItem {href} {label} />
{/each}
</SidenavCollapsibleList>
</nav>
</Scaffold>SidenavCollapsibleContainer
A container that adds the sidenav's collapsed transition to its children. Useful when the sidenav is collapsible and you need to add something different to an SidenavItem.
Example
<script>
import { Scaffold, SidenavCollapsibleContainer } from "saraui"
</script>
<Scaffold>
...
<nav slot="sidenav" class="p-2">
<SidenavCollapsibleContainer>
<!-- anything here -->
</SidenavCollapsibleContainer>
</nav>
</Scaffold>Props
SidenavConfig
string
"circle" | "square"
"ghost" | "glass" | "outline" | "link"
"xs" | "sm" | "md" | "lg"
"primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "error"
string
string
IconClassString
Types
{
startCollapsed?: boolean
collapsedAt?: "sm" | "md" | "lg" | "xl"
color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "error" |"transparent" | "base-100" | "base-200" | "base-300"
width?: SidenavWidth
}{
open?: any posible spacing value from Tailwind's default config,
collapsed?: any posible spacing value from Tailwind's default config
}