App frame

The App Frame component provides page structure and integrates with other navigation components.

Examples

<AppFrame topnav={<TopNav />} sidenav={<CustomSideNav />}>
{/* page content here */}
</AppFrame>

If needed, you can control the the sidenav open state.

const [sidenavOpen, setOpen] = useState(false)
const close = () => setOpen(false)
const open = () => setOpen(true)
const toggle = sidenavOpen ? close : open
return (
<AppFrame
onRequestSideNavClose={close}
onRequestSideNavOpen={open}
topnav={<TopNav onMobileMenuClick={toggle} />}
sidenav={<CustomSideNav />}
sidenavOpen={sidenavOpen}
>
{/* page content here */}
</AppFrame>
)

A reference implementation of the Skills nav is available on codesandbox

Usage & types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-appframe
  • Import
    import AppFrame from '@pluralsight/ps-design-system-appframe'
Name
Type
Description
Default
children
React.ReactNode
onRequestSideNavClose
Event => void
callback triggered when the sidenav should be closed. Use if controlling the open state
onRequestSideNavOpen
Event => void
callback triggered when the sidenav should be opened. Use if controlling the open state
sidenav
React.ReactNode | ({ visible }) => React.ReactNode
area to display secondary navigation
sidenavOpen
boolean
control if the sidenav container is opened
topnav
React.ReactNode | ({ closeSidenav, openSidenav, sidenavOpen }) => React.ReactNode
area to display primary navigation - such as a NavBar