SGUI / Development
IconPanelNavigation
An icon-only rail with sliding, independently owned workspace panels.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
An icon-only rail with sliding, independently owned workspace panels.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Day 1: Review and practice
Day 2: Review and practice
Day 3: Review and practice
Day 4: Review and practice
Day 5: Review and practice
Day 6: Review and practice
Day 7: Review and practice
Day 8: Review and practice
Day 9: Review and practice
Day 10: Review and practice
Day 11: Review and practice
Day 12: Review and practice
Day 13: Review and practice
Day 14: Review and practice
Day 15: Review and practice
Day 16: Review and practice
Day 17: Review and practice
Day 18: Review and practice
An icon-only rail with independent, non-modal content panels. Open a tool, then switch tools to preserve its draft.
Day 1: Review and practice
Day 2: Review and practice
Day 3: Review and practice
Day 4: Review and practice
Day 5: Review and practice
Day 6: Review and practice
Day 7: Review and practice
Day 8: Review and practice
Day 9: Review and practice
Day 10: Review and practice
Day 11: Review and practice
Day 12: Review and practice
Day 13: Review and practice
Day 14: Review and practice
Day 15: Review and practice
Day 16: Review and practice
Day 17: Review and practice
Day 18: Review and practice
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, IconPanelNavigation, SideNavigation, type IconPanelNavigationItem } from '@structured-growth/sg-ui/components';
import { CalendarTodayIcon, DescriptionIcon, TaskAltIcon } from '@structured-growth/sg-ui/icons';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextArea, Checkbox } from '@structured-growth/sg-ui/experimental';
export default function WorkspaceToolsExample() {
const [activeId,setActiveId] = useState<string|null>(null);
const [draft,setDraft] = useState("Review the course outline.");
const [complete,setComplete] = useState(false);
const items:IconPanelNavigationItem[] = [
{id:'calendar',label:'Calendar',icon:<CalendarTodayIcon/>,content:<Stack gap={3}>{Array.from({length:18},(_,index)=><Typography key={index}>Day {index+1}: Review and practice</Typography>)}</Stack>},
{id:'notes',label:'Notes',icon:<DescriptionIcon/>,content:<TextArea label="Workspace notes" value={draft} onValueChange={setDraft}/>},
{id:'tasks',label:'Tasks',icon:<TaskAltIcon/>,content:<Checkbox label="Review the outline" checked={complete} onCheckedChange={setComplete}/>},
];
return (
<>
<ThemeScope density="comfortable"><div style={{height:360,maxWidth:'100%'}}><IconPanelNavigation items={items} activeId={activeId} onActiveIdChange={setActiveId} side={"start"} resizable={false} minPanelWidth={240} maxPanelWidth={960} panelWidth={"20rem"} aria-label="Workspace tools"/></div></ThemeScope>
</>
);
}
Day 1: Review and practice
Day 2: Review and practice
Day 3: Review and practice
Day 4: Review and practice
Day 5: Review and practice
Day 6: Review and practice
Day 7: Review and practice
Day 8: Review and practice
Day 9: Review and practice
Day 10: Review and practice
Day 11: Review and practice
Day 12: Review and practice
Day 13: Review and practice
Day 14: Review and practice
Day 15: Review and practice
Day 16: Review and practice
Day 17: Review and practice
Day 18: Review and practice
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, IconPanelNavigation, SideNavigation, type IconPanelNavigationItem } from '@structured-growth/sg-ui/components';
import { CalendarTodayIcon, DescriptionIcon, TaskAltIcon } from '@structured-growth/sg-ui/icons';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextArea, Checkbox } from '@structured-growth/sg-ui/experimental';
export default function WorkspaceToolsExample() {
const [activeId,setActiveId] = useState<string|null>("notes");
const [draft,setDraft] = useState("Review the course outline.");
const [complete,setComplete] = useState(false);
const items:IconPanelNavigationItem[] = [
{id:'calendar',label:'Calendar',icon:<CalendarTodayIcon/>,content:<Stack gap={3}>{Array.from({length:18},(_,index)=><Typography key={index}>Day {index+1}: Review and practice</Typography>)}</Stack>},
{id:'notes',label:'Notes',icon:<DescriptionIcon/>,content:<TextArea label="Workspace notes" value={draft} onValueChange={setDraft}/>},
{id:'tasks',label:'Tasks',icon:<TaskAltIcon/>,content:<Checkbox label="Review the outline" checked={complete} onCheckedChange={setComplete}/>},
];
return (
<>
<ThemeScope density="comfortable"><div style={{height:360,maxWidth:'100%'}}><IconPanelNavigation items={items} activeId={activeId} onActiveIdChange={setActiveId} side={"start"} resizable={false} minPanelWidth={240} maxPanelWidth={960} panelWidth={"20rem"} aria-label="Workspace tools"/></div></ThemeScope>
</>
);
}
Day 1: Review and practice
Day 2: Review and practice
Day 3: Review and practice
Day 4: Review and practice
Day 5: Review and practice
Day 6: Review and practice
Day 7: Review and practice
Day 8: Review and practice
Day 9: Review and practice
Day 10: Review and practice
Day 11: Review and practice
Day 12: Review and practice
Day 13: Review and practice
Day 14: Review and practice
Day 15: Review and practice
Day 16: Review and practice
Day 17: Review and practice
Day 18: Review and practice
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, IconPanelNavigation, SideNavigation, type IconPanelNavigationItem } from '@structured-growth/sg-ui/components';
import { CalendarTodayIcon, DescriptionIcon, TaskAltIcon } from '@structured-growth/sg-ui/icons';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextArea, Checkbox } from '@structured-growth/sg-ui/experimental';
export default function WorkspaceToolsExample() {
const [activeId,setActiveId] = useState<string|null>("calendar");
const [draft,setDraft] = useState("Review the course outline.");
const [complete,setComplete] = useState(false);
const items:IconPanelNavigationItem[] = [
{id:'calendar',label:'Calendar',icon:<CalendarTodayIcon/>,content:<Stack gap={3}>{Array.from({length:18},(_,index)=><Typography key={index}>Day {index+1}: Review and practice</Typography>)}</Stack>},
{id:'notes',label:'Notes',icon:<DescriptionIcon/>,content:<TextArea label="Workspace notes" value={draft} onValueChange={setDraft}/>},
{id:'tasks',label:'Tasks',icon:<TaskAltIcon/>,content:<Checkbox label="Review the outline" checked={complete} onCheckedChange={setComplete}/>},
];
return (
<>
<ThemeScope density="comfortable"><div style={{height:360,maxWidth:'100%'}}><IconPanelNavigation items={items} activeId={activeId} onActiveIdChange={setActiveId} side={"end"} resizable={false} minPanelWidth={240} maxPanelWidth={960} panelWidth={"20rem"} aria-label="Workspace tools"/></div></ThemeScope>
</>
);
}
Day 1: Review and practice
Day 2: Review and practice
Day 3: Review and practice
Day 4: Review and practice
Day 5: Review and practice
Day 6: Review and practice
Day 7: Review and practice
Day 8: Review and practice
Day 9: Review and practice
Day 10: Review and practice
Day 11: Review and practice
Day 12: Review and practice
Day 13: Review and practice
Day 14: Review and practice
Day 15: Review and practice
Day 16: Review and practice
Day 17: Review and practice
Day 18: Review and practice
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, IconPanelNavigation, SideNavigation, type IconPanelNavigationItem } from '@structured-growth/sg-ui/components';
import { CalendarTodayIcon, DescriptionIcon, TaskAltIcon } from '@structured-growth/sg-ui/icons';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextArea, Checkbox } from '@structured-growth/sg-ui/experimental';
export default function WorkspaceToolsExample() {
const [activeId,setActiveId] = useState<string|null>("tasks");
const [draft,setDraft] = useState("Review the course outline.");
const [complete,setComplete] = useState(false);
const items:IconPanelNavigationItem[] = [
{id:'calendar',label:'Calendar',icon:<CalendarTodayIcon/>,content:<Stack gap={3}>{Array.from({length:18},(_,index)=><Typography key={index}>Day {index+1}: Review and practice</Typography>)}</Stack>},
{id:'notes',label:'Notes',icon:<DescriptionIcon/>,content:<TextArea label="Workspace notes" value={draft} onValueChange={setDraft}/>},
{id:'tasks',label:'Tasks',icon:<TaskAltIcon/>,content:<Checkbox label="Review the outline" checked={complete} onCheckedChange={setComplete}/>},
];
return (
<>
<ThemeScope density="compact"><div style={{height:360,maxWidth:'100%'}}><IconPanelNavigation items={items} activeId={activeId} onActiveIdChange={setActiveId} side={"start"} resizable={false} minPanelWidth={240} maxPanelWidth={960} panelWidth={"20rem"} aria-label="Workspace tools"/></div></ThemeScope>
</>
);
}
Day 1: Review and practice
Day 2: Review and practice
Day 3: Review and practice
Day 4: Review and practice
Day 5: Review and practice
Day 6: Review and practice
Day 7: Review and practice
Day 8: Review and practice
Day 9: Review and practice
Day 10: Review and practice
Day 11: Review and practice
Day 12: Review and practice
Day 13: Review and practice
Day 14: Review and practice
Day 15: Review and practice
Day 16: Review and practice
Day 17: Review and practice
Day 18: Review and practice
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, IconPanelNavigation, SideNavigation, type IconPanelNavigationItem } from '@structured-growth/sg-ui/components';
import { CalendarTodayIcon, DescriptionIcon, TaskAltIcon } from '@structured-growth/sg-ui/icons';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextArea, Checkbox } from '@structured-growth/sg-ui/experimental';
export default function WorkspaceToolsExample() {
const [activeId,setActiveId] = useState<string|null>("notes");
const [draft,setDraft] = useState("Review the course outline.");
const [complete,setComplete] = useState(false);
const items:IconPanelNavigationItem[] = [
{id:'calendar',label:'Calendar',icon:<CalendarTodayIcon/>,content:<Stack gap={3}>{Array.from({length:18},(_,index)=><Typography key={index}>Day {index+1}: Review and practice</Typography>)}</Stack>},
{id:'notes',label:'Notes',icon:<DescriptionIcon/>,content:<TextArea label="Workspace notes" value={draft} onValueChange={setDraft}/>},
{id:'tasks',label:'Tasks',icon:<TaskAltIcon/>,content:<Checkbox label="Review the outline" checked={complete} onCheckedChange={setComplete}/>},
];
return (
<>
<ThemeScope density="compact"><div style={{height:360,maxWidth:'100%'}}><IconPanelNavigation items={items} activeId={activeId} onActiveIdChange={setActiveId} side={"end"} resizable={false} minPanelWidth={240} maxPanelWidth={960} panelWidth={"20rem"} aria-label="Workspace tools"/></div></ThemeScope>
</>
);
}
Use Narrower and Wider below the panel heading for one-pixel pointer adjustments, or drag the separator. Both paths share bounds and retain each panel width while mounted.
Day 1: Review and practice
Day 2: Review and practice
Day 3: Review and practice
Day 4: Review and practice
Day 5: Review and practice
Day 6: Review and practice
Day 7: Review and practice
Day 8: Review and practice
Day 9: Review and practice
Day 10: Review and practice
Day 11: Review and practice
Day 12: Review and practice
Day 13: Review and practice
Day 14: Review and practice
Day 15: Review and practice
Day 16: Review and practice
Day 17: Review and practice
Day 18: Review and practice
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, IconPanelNavigation, SideNavigation, type IconPanelNavigationItem } from '@structured-growth/sg-ui/components';
import { CalendarTodayIcon, DescriptionIcon, TaskAltIcon } from '@structured-growth/sg-ui/icons';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextArea, Checkbox } from '@structured-growth/sg-ui/experimental';
export default function WorkspaceToolsExample() {
const [activeId,setActiveId] = useState<string|null>("notes");
const [draft,setDraft] = useState("Review the course outline.");
const [complete,setComplete] = useState(false);
const items:IconPanelNavigationItem[] = [
{id:'calendar',label:'Calendar',icon:<CalendarTodayIcon/>,content:<Stack gap={3}>{Array.from({length:18},(_,index)=><Typography key={index}>Day {index+1}: Review and practice</Typography>)}</Stack>},
{id:'notes',label:'Notes',icon:<DescriptionIcon/>,content:<TextArea label="Workspace notes" value={draft} onValueChange={setDraft}/>},
{id:'tasks',label:'Tasks',icon:<TaskAltIcon/>,content:<Checkbox label="Review the outline" checked={complete} onCheckedChange={setComplete}/>},
];
return (
<>
<ThemeScope density="comfortable"><div style={{height:360,maxWidth:'100%'}}><IconPanelNavigation items={items} activeId={activeId} onActiveIdChange={setActiveId} side={"end"} resizable={true} minPanelWidth={240} maxPanelWidth={960} panelWidth={"20rem"} aria-label="Workspace tools"/></div></ThemeScope>
</>
);
}
Use Narrower and Wider below the panel heading for one-pixel pointer adjustments, or drag the separator. Both paths share bounds and retain each panel width while mounted.
Day 1: Review and practice
Day 2: Review and practice
Day 3: Review and practice
Day 4: Review and practice
Day 5: Review and practice
Day 6: Review and practice
Day 7: Review and practice
Day 8: Review and practice
Day 9: Review and practice
Day 10: Review and practice
Day 11: Review and practice
Day 12: Review and practice
Day 13: Review and practice
Day 14: Review and practice
Day 15: Review and practice
Day 16: Review and practice
Day 17: Review and practice
Day 18: Review and practice
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, IconPanelNavigation, SideNavigation, type IconPanelNavigationItem } from '@structured-growth/sg-ui/components';
import { CalendarTodayIcon, DescriptionIcon, TaskAltIcon } from '@structured-growth/sg-ui/icons';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextArea, Checkbox } from '@structured-growth/sg-ui/experimental';
export default function WorkspaceToolsExample() {
const [activeId,setActiveId] = useState<string|null>("notes");
const [draft,setDraft] = useState("Review the course outline.");
const [complete,setComplete] = useState(false);
const items:IconPanelNavigationItem[] = [
{id:'calendar',label:'Calendar',icon:<CalendarTodayIcon/>,content:<Stack gap={3}>{Array.from({length:18},(_,index)=><Typography key={index}>Day {index+1}: Review and practice</Typography>)}</Stack>},
{id:'notes',label:'Notes',icon:<DescriptionIcon/>,content:<TextArea label="Workspace notes" value={draft} onValueChange={setDraft}/>},
{id:'tasks',label:'Tasks',icon:<TaskAltIcon/>,content:<Checkbox label="Review the outline" checked={complete} onCheckedChange={setComplete}/>},
];
return (
<>
<ThemeScope density="compact"><div style={{height:360,maxWidth:'100%'}}><IconPanelNavigation items={items} activeId={activeId} onActiveIdChange={setActiveId} side={"start"} resizable={true} minPanelWidth={240} maxPanelWidth={960} panelWidth={"20rem"} aria-label="Workspace tools"/></div></ThemeScope>
</>
);
}
Each icon opens a separate menu. The host routing adapter changes the active page; the icon rail does not own page routes.
'use client';
import { useState } from 'react';
import { AppShell, IconPanelNavigation, type IconPanelNavigationItem } from '@structured-growth/sg-ui/components';
import { BookIcon, GroupIcon } from '@structured-growth/sg-ui/icons';
import { Navigation, NavigationItem, List, ListItem } from '@structured-growth/sg-ui/experimental';
import { Typography } from '@structured-growth/sg-ui/primitives';
import { SGNavigationProvider } from '@structured-growth/sg-ui/adapters';
export default function IconMenuWorkspaceExample() {
const [activeId,setActiveId] = useState<string|null>("courses");
const [pathname,setPathname] = useState("/courses/overview");
const courses = [{"href":"/courses/overview","label":"Course overview"},{"href":"/courses/lessons","label":"Lessons"},{"href":"/courses/progress","label":"Progress"}];
const people = [{"href":"/people/learners","label":"Learners"},{"href":"/people/instructors","label":"Instructors"}];
const title = [...courses,...people].find(route=>route.href===pathname)?.label??'Course overview';
const items:IconPanelNavigationItem[] = [
{id:'courses',label:'Courses',icon:<BookIcon/>,content:<Navigation label="Course pages"><List>{courses.map(route=><ListItem key={route.href}><NavigationItem href={route.href} current={pathname===route.href}>{route.label}</NavigationItem></ListItem>)}</List></Navigation>},
{id:'people',label:'People',icon:<GroupIcon/>,content:<Navigation label="People pages"><List>{people.map(route=><ListItem key={route.href}><NavigationItem href={route.href} current={pathname===route.href}>{route.label}</NavigationItem></ListItem>)}</List></Navigation>},
];
return (
<>
<SGNavigationProvider value={{pathname,navigate:setPathname}}><AppShell style={{height:360}} mainLabel="Icon menu workspace" navigation={<IconPanelNavigation items={items} activeId={activeId} onActiveIdChange={setActiveId} aria-label="Workspace sections"/>}><Typography as="h3" variant="h5">{title}</Typography></AppShell></SGNavigationProvider>
</>
);
}
Use the icon rail to open a tool alongside the page. Course routes and workspace tools are separate navigation sections.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, IconPanelNavigation, SideNavigation, type IconPanelNavigationItem } from '@structured-growth/sg-ui/components';
import { CalendarTodayIcon, DescriptionIcon, TaskAltIcon } from '@structured-growth/sg-ui/icons';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextArea, Checkbox } from '@structured-growth/sg-ui/experimental';
export default function WorkspaceToolsExample() {
const [activeId,setActiveId] = useState<string|null>("notes");
const [draft,setDraft] = useState("Review the course outline.");
const [complete,setComplete] = useState(false);
const items:IconPanelNavigationItem[] = [
{id:'calendar',label:'Calendar',icon:<CalendarTodayIcon/>,content:<Stack gap={3}>{Array.from({length:18},(_,index)=><Typography key={index}>Day {index+1}: Review and practice</Typography>)}</Stack>},
{id:'notes',label:'Notes',icon:<DescriptionIcon/>,content:<TextArea label="Workspace notes" value={draft} onValueChange={setDraft}/>},
{id:'tasks',label:'Tasks',icon:<TaskAltIcon/>,content:<Checkbox label="Review the outline" checked={complete} onCheckedChange={setComplete}/>},
];
return (
<>
<ThemeScope density="comfortable"><AppShell style={{height:420}} mainLabel="Course workspace" navigation={<IconPanelNavigation items={items} activeId={activeId} onActiveIdChange={setActiveId} side={"start"} resizable={false} minPanelWidth={240} maxPanelWidth={960} panelWidth={"20rem"} aria-label="Workspace tools"/>}><Stack gap={3}><Typography as="h3" variant="h5">Course workspace</Typography><Typography>Use the icon rail to open a tool alongside the page. Course routes and workspace tools are separate navigation sections.</Typography></Stack></AppShell></ThemeScope>
</>
);
}
Use the icon rail to open a tool alongside the page. Course routes and workspace tools are separate navigation sections.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, IconPanelNavigation, SideNavigation, type IconPanelNavigationItem } from '@structured-growth/sg-ui/components';
import { CalendarTodayIcon, DescriptionIcon, TaskAltIcon } from '@structured-growth/sg-ui/icons';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextArea, Checkbox } from '@structured-growth/sg-ui/experimental';
export default function WorkspaceToolsExample() {
const [activeId,setActiveId] = useState<string|null>("calendar");
const [draft,setDraft] = useState("Review the course outline.");
const [complete,setComplete] = useState(false);
const items:IconPanelNavigationItem[] = [
{id:'calendar',label:'Calendar',icon:<CalendarTodayIcon/>,content:<Stack gap={3}>{Array.from({length:18},(_,index)=><Typography key={index}>Day {index+1}: Review and practice</Typography>)}</Stack>},
{id:'notes',label:'Notes',icon:<DescriptionIcon/>,content:<TextArea label="Workspace notes" value={draft} onValueChange={setDraft}/>},
{id:'tasks',label:'Tasks',icon:<TaskAltIcon/>,content:<Checkbox label="Review the outline" checked={complete} onCheckedChange={setComplete}/>},
];
return (
<>
<ThemeScope density="comfortable"><AppShell style={{height:420}} mainLabel="Course workspace" navigation={<SideNavigation aria-label="Course routes" model={{user:{initials:'AL',name:'Alex Learner',organization:'Structured Growth'},rootMenu:{id:'workspace',sections:[{id:'courses',items:[{id:'overview',label:'Overview'},{id:'lessons',label:'Lessons'}]}]}}}/>} rightNavigation={<IconPanelNavigation items={items} activeId={activeId} onActiveIdChange={setActiveId} side={"end"} resizable={false} minPanelWidth={240} maxPanelWidth={960} panelWidth={"20rem"} aria-label="Workspace tools"/>}><Stack gap={3}><Typography as="h3" variant="h5">Course workspace</Typography><Typography>Use the icon rail to open a tool alongside the page. Course routes and workspace tools are separate navigation sections.</Typography></Stack></AppShell></ThemeScope>
</>
);
}