Sidebar

Sidebar layout component

Usage

A collapsable sidebar component which hides additional content beside a page.

import { Sidebar, useSidebar } from @motor-js/core
//...
const {isOpen, toggle} = useSidebar();
//...
<Sidebar
isOpen={isOpen}
onClose={toggle}
right
overlayBackground='black'
header={<h4>Filters</h4>}
>
<div>Sidebar Content<div>
</Sidebar>

Props

PropDescriptionOptions / Example
widthWidth of the sidebar.string
isOpenTo open the Sidebar, use with the useSidebar hook, example abovefunction
onCloseTo close the Sidebar, use with the useSidebar hook, example abovefunction
onOpencallback function executed when the sidebar opensfunction
backgroundColorSidebar background colorstring
overlayBackgroundoverlay background colorstring
headerSidebar headerjsx
footerSidebar footerjsx
borderSidebar borderboolean
oneOf
"top"
"left"
"bottom"
"right"
"start"
"end"
"horizontal"
"vertical"
"all"
"between"
"none"
headerHeightSidebar header heightstring
footerHeightSidebar footer heightstring
borderRadiusborder radiusstring
rightopens the sidebar from the rightboolean