navigationsidebar-frame

SidebarFrame

Sidebar and main frame with mobile Sheet support and desktop layout wrappers.

Import#

import { SidebarFrame, SidebarFrameSheetResizableRender } from 'moraine'

Slot Structure#

Root frame containing a sidebar with optional header/footer and a scrollable main area.

root
├── sidebar
│   ├── sidebarHeader (optional)
│   ├── sidebarBody
│   └── sidebarFooter (optional)
└── main

Examples#

Basic#

Desktop fixed layout with a simple header/body/main composition. Use --sidebar-width to control sidebar width

1
function Basic() {
2
  return (
3
    <div class="b-1 b-border rounded-xl h-72 w-full overflow-hidden">
4
      <SidebarFrame
5
        isMobile={false}
6
        sidebarHeaderRender={() => <div class="text-sm font-semibold p-4">Documentation</div>}
7
        sidebarBodyRender={() => (
8
          <div class="p-2 h-full overflow-y-auto">
9
            <div class="flex flex-col gap-1">
10
              <For each={PAGES}>
11
                {(item) => (
12
                  <button
13
                    type="button"
14
                    class="text-sm px-2.5 py-1.5 text-left rounded-md hover:bg-accent"
15
                  >
16
                    {item}
17
                  </button>
18
                )}
19
              </For>
20
            </div>
21
          </div>
22
        )}
23
        mainRender={(ctx) => (
24
          <>
25
            <div class="flex flex-row items-center">
26
              <Button variant="ghost" class="m-2" onClick={() => ctx.toggle()}>
27
                <Icon name="i-lucide-sidebar" />
28
              </Button>
29
              <h3 class="text-base font-semibold">Getting Started</h3>
30
            </div>
31
            <p class="text-muted-foreground px-4">
32
              Use <code class="docs-inline-code">SidebarFrame</code> component to compose sidebar
33
              and content in one place.
34
            </p>
35
          </>
36
        )}
37
      />
38
    </div>
39
  )
40
}

Variants#

Compare default, floating, and inset visual variants with the same content.

1
function Variants() {
2
  return (
3
    <div class="flex flex-col gap-3 w-full">
4
      <For each={['default', 'floating', 'inset'] as const}>
5
        {(variant) => (
6
          <div class="b-1 b-border rounded-xl h-72 w-full overflow-hidden">
7
            <SidebarFrame
8
              isMobile={false}
9
              variant={variant}
10
              sidebarHeaderRender={() => <div class="text-xs p-3">{variant}</div>}
11
              sidebarBodyRender={() => (
12
                <div class="text-sm text-muted-foreground p-2">Sidebar content</div>
13
              )}
14
              mainRender={() => (
15
                <div class="p-4 h-full">
16
                  <div class="text-sm text-foreground p-4 b-1 b-border rounded-lg b-dashed bg-muted/20 h-full">
17
                    Main content area
18
                  </div>
19
                </div>
20
              )}
21
            />
22
          </div>
23
        )}
24
      </For>
25
    </div>
26
  )
27
}

Sides#

Compare side="left" and side="right" desktop layouts.

1
function Sides() {
2
  return (
3
    <div class="gap-3 grid w-full md:grid-cols-2">
4
      <div class="b-1 b-border rounded-xl h-64 w-full overflow-hidden">
5
        <SidebarFrame
6
          isMobile={false}
7
          side="left"
8
          sidebarHeaderRender={() => <div class="text-xs p-3">side=left</div>}
9
          sidebarBodyRender={() => (
10
            <div class="text-sm text-muted-foreground p-2 h-full">Sidebar panel (left)</div>
11
          )}
12
          mainRender={() => <div class="text-sm p-3 h-full">Main panel</div>}
13
        />
14
      </div>
15
      <div class="b-1 b-border rounded-xl h-64 w-full overflow-hidden">
16
        <SidebarFrame
17
          isMobile={false}
18
          side="right"
19
          sidebarHeaderRender={() => <div class="text-xs p-3">side=right</div>}
20
          sidebarBodyRender={() => (
21
            <div class="text-sm text-muted-foreground p-2 h-full">Sidebar panel (right)</div>
22
          )}
23
          mainRender={() => <div class="text-sm p-3 h-full">Main panel</div>}
24
        />
25
      </div>
26
    </div>
27
  )
28
}

SheetResizableRender#

Use SidebarFrameSheetResizableRender with external collapse button, collapsibleMin, and icon handle.

1
function SheetResizableRender() {
2
  const [collapsed, setCollapsed] = createSignal(false)
3

4
  return (
5
    <div class="b-1 b-border rounded-xl h-72 w-full overflow-hidden">
6
      <SidebarFrame
7
        isMobile={false}
8
        frameRender={(ctx) => (
9
          <SidebarFrameSheetResizableRender
10
            {...ctx}
11
            resizablePanelOptions={{
12
              defaultSize: '24%',
13
              min: 100,
14
              max: 200,
15
              collapsible: collapsed(),
16
              collapsibleMin: 56,
17
            }}
18
            resizableOptions={{
19
              handleAction: 'collapse',
20
              classes: {
21
                divider:
22
                  'after:(transition duration-200 ease-out z-20) hover:after:(bg-accent w-1.5)',
23
              },
24
            }}
25
          />
26
        )}
27
        sidebarHeaderRender={() => <div class="text-sm p-3">Workspace</div>}
28
        sidebarBodyRender={() => (
29
          <div class="p-2 h-full overflow-y-auto">
30
            <div class="flex flex-col gap-1">
31
              <For each={ITEMS}>
32
                {(item) => (
33
                  <button
34
                    type="button"
35
                    class="text-sm px-2.5 py-1.5 text-left rounded-md hover:bg-accent"
36
                  >
37
                    {item}
38
                  </button>
39
                )}
40
              </For>
41
            </div>
42
          </div>
43
        )}
44
        mainRender={() => (
45
          <div class="p-4 flex flex-col gap-3 h-full">
46
            <h3 class="text-base font-semibold">Resizable Desktop Frame</h3>
47
            <p class="text-sm text-muted-foreground">
48
              Drag divider to resize sidebar width. Click button to toggle collapse.
49
            </p>
50
            <p class="text-xs text-muted-foreground">collapsibleMin: 56px</p>
51
            <div>
52
              <Button
53
                size="sm"
54
                leading={collapsed() ? 'i-lucide:panel-left-open' : 'i-lucide:panel-left'}
55
                onClick={() => setCollapsed((prev) => !prev)}
56
              >
57
                {collapsed() ? 'Expand Sidebar' : 'Collapse Sidebar'}
58
              </Button>
59
            </div>
60
          </div>
61
        )}
62
      />
63
    </div>
64
  )
65
}

ForcedMobile#

Force mobile mode and open the sidebar sheet from main content via ctx.toggle.

1
function ForcedMobile() {
2
  return (
3
    <div class="b-1 b-border rounded-xl h-72 overflow-hidden">
4
      <SidebarFrame
5
        isMobile
6
        sidebarHeaderRender={() => <div class="text-sm p-3">Mobile Menu</div>}
7
        sidebarBodyRender={(ctx) => (
8
          <div class="text-sm p-3 h-full overflow-y-auto">
9
            <p class="text-muted-foreground">This sidebar is rendered inside Sheet.</p>
10
            <Button class="mt-3" variant="outline" onClick={() => ctx.setOpen(false)}>
11
              Close
12
            </Button>
13
          </div>
14
        )}
15
        mainRender={(ctx) => (
16
          <div class="p-4 flex flex-col gap-3 h-full">
17
            <h3 class="text-base font-semibold">Forced Mobile Mode</h3>
18
            <p class="text-sm text-muted-foreground">
19
              Click the button below to open sidebar sheet via render context.
20
            </p>
21
            <Button variant="outline" onClick={ctx.toggle}>
22
              Toggle Sidebar
23
            </Button>
24
          </div>
25
        )}
26
      />
27
    </div>
28
  )
29
}

Header and Footer Slots#

Use optional sidebarHeaderRender and sidebarFooterRender while keeping body as the scroll region.

1
function HeaderFooterSlots() {
2
  return (
3
    <div class="b-1 b-border rounded-xl h-72 w-full overflow-hidden">
4
      <SidebarFrame
5
        isMobile={false}
6
        sidebarHeaderRender={() => (
7
          <div class="p-3">
8
            <p class="text-sm font-medium">Project Tasks</p>
9
            <p class="text-xs text-muted-foreground mt-1">Header slot content</p>
10
          </div>
11
        )}
12
        sidebarBodyRender={() => (
13
          <div class="p-2">
14
            <div class="flex flex-col gap-1">
15
              <For each={TASKS}>
16
                {(task) => (
17
                  <button
18
                    type="button"
19
                    class="text-sm px-2.5 py-1.5 text-left rounded-md hover:bg-accent"
20
                  >
21
                    {task}
22
                  </button>
23
                )}
24
              </For>
25
            </div>
26
          </div>
27
        )}
28
        sidebarFooterRender={() => (
29
          <div class="p-2 b-t b-border bg-background/80 flex gap-2 items-center justify-between">
30
            <span class="text-xs text-muted-foreground">12 tasks</span>
31
            <Button size="sm" variant="ghost">
32
              Footer Action
33
            </Button>
34
          </div>
35
        )}
36
        mainRender={() => (
37
          <div class="p-4 h-full">
38
            <h3 class="text-base font-semibold">Main Content</h3>
39
            <p class="text-sm text-muted-foreground mt-2">
40
              Sidebar header and footer are rendered from dedicated slots.
41
            </p>
42
          </div>
43
        )}
44
      />
45
    </div>
46
  )
47
}

API Reference#

Attributes#

Slotroot2 attributes

Frame container that coordinates sidebar and main content layout.

Data Attributes

Data Attribute	Description
data-orientation	Stores the rendered orientation.
data-resizable-root	State or slot attribute exposed for styling hooks and selectors.

Props#

Prop	Type	Default	Description
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`SidebarFrameT.Classes \| undefined`	—	—
frameRender	`ComponentOrElement<SidebarFrameT.FrameRenderProps> \| undefined`	`SidebarFrameSheetOnlyRender`	Optional frame renderer used to compose sidebar/main layout.
isMobile	`boolean \| undefined`	—	Controlled mobile mode state. When omitted, mobile state is resolved from `matchMedia`.
mainRender*	`ComponentOrElement<SidebarFrameT.MainRenderProps>`	—	Render function for main content section.
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
scrollThreshold	`number \| undefined`	`60`	Scroll threshold for `scrolled` state.
side	`"right" \| "left" \| undefined`	—	—
sidebarBodyRender*	`ComponentOrElement<SidebarFrameT.SidebarBodyRenderProps>`	—	Render function for sidebar body section.
sidebarFooterRender	`ComponentOrElement<SidebarFrameT.SidebarFooterRenderProps> \| undefined`	—	Optional render function for sidebar footer section.
sidebarHeaderRender	`ComponentOrElement<SidebarFrameT.SidebarHeaderRenderProps> \| undefined`	—	Optional render function for sidebar header section.
style	`JSX.CSSProperties \| undefined`	—	—
styles	`SidebarFrameT.Styles \| undefined`	—	—
variant	`"default" \| "floating" \| "inset" \| undefined`	—	—