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

Prop	Description	Options / Example
width	Width of the sidebar.	string
isOpen	To open the Sidebar, use with the useSidebar hook, example above	function
onClose	To close the Sidebar, use with the useSidebar hook, example above	function
onOpen	callback function executed when the sidebar opens	function
backgroundColor	Sidebar background color	string
overlayBackground	overlay background color	string
header	Sidebar header	jsx
footer	Sidebar footer	jsx
border	Sidebar border	boolean oneOf "top" "left" "bottom" "right" "start" "end" "horizontal" "vertical" "all" "between" "none"
headerHeight	Sidebar header height	string
footerHeight	Sidebar footer height	string
borderRadius	border radius	string
right	opens the sidebar from the right	boolean