# Sidebar components ## Sidebar This component implements splitscrean view ### Props ```typescript interface SidebarProps { info?: ReactNode right?: boolean children?: ReactNode className?: string } ``` - `info` - static block of text near sidebar - `right` - side to render sidebar block, by default - **left** - `children` - content wich will be rendered to sidebar ### Typical usage ```JSX } right> This is sidebar content ``` ## PortalSidebar This component is like `Sidebar` the only difference is that this component build on `react-portals` so it will be mounted in separate DOM element. ### Props ```typescript interface PortalSidebarProps { closeOnEsc?: boolean onClose?: (args?: T) => void closeOnOverlayClick?: boolean right?: boolean children?: NodeT className?: string } ``` - `closeOnEsc` - Sidebar will be closed on `Esc` key press - `closeOnOverlayClick` - Sidebar will be closed on overlay click - `onClose` - this function will be fired on SidebarClose - `right` - side to render sidebar block, by default - **left** - `children` - content wich will be rendered to sidebar ### Typical usage ```typescript const Underlay = styled.div` display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; background-color: ${getColor("primary")}; ` ``` ```JSX <> Some text This is sidebar content ```