App frame

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

Install
npm install @pluralsight/ps-design-system-appframe
Import
import AppFrame from '@pluralsight/ps-design-system-appframe'

Example

<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

Props

Name	Type	Description
`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