#PageWithSidebar

#Import

import { Page } from 'bumbag';

#Usage

The <PageWithSidebar> component enables you to build a page layout with a sidebar.

Provide your sidebar component to the sidebar prop, and the rest of your page as children.

<PageWithSidebar sidebar={<Box>This is a sidebar</Box>}>
Hello world
</PageWithSidebar>

See it in playroom

You can control which side of the screen the sidebar is on with the sidebarPlacement prop.

<PageWithSidebar
sidebar={<Box>This is a sidebar</Box>}
sidebarPlacement="right"
>
Hello world
</PageWithSidebar>

#Toggling the sidebar

You can toggle the sidebar with your own component using the <PageWithSidebar.Disclosure> component.

Or you can use the usePage hook.

#Minimizing the sidebar

You can minimize the sidebar with your own component using the <PageWithSidebar.Minimize> component.

Or you can use the usePage hook.

#Expanded

Customize the width of the expanded sidebar with the sidebarWidth prop.

<PageWithSidebar
sidebar={<Box>This is a sidebar</Box>}
sidebarWidth="250px"
>
This is the content
</PageWithSidebar>

#Collapsed

Customize the width of the collapsed sidebar drawer (when open in mobile view) with the collapsedSidebarWidth prop.

<PageWithSidebar
sidebar={<Box>This is a sidebar</Box>}
collapsedSidebarWidth="300px"
>
This is the content
</PageWithSidebar>

#Minimized

Customize the width of the minimized sidebar with the minimizedSidebarWidth prop.

<PageWithSidebar
sidebar={<Box>This is a sidebar</Box>}
minimizedSidebarWidth="30px"
>
This is the content
</PageWithSidebar>

#Props

#PageWithSidebar Props

sidebar Required

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the sidebar component.

sidebarWidth string

Sets the width of the sidebar.

sidebarPlacement "left" | "right"

Sets the placement of the sidebar.

collapsedSidebarWidth string

Sets the width of the collapsed (mobile) sidebar.

collapsedSidebarProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 801 more ...;
  isFullScreen?: boolean;
}

Props to spread on the collapsed (mobile) sidebar.

expandedSidebarProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 792 more ...;
  value?: string | ... 1 more ... | string[];
}

Props to spread on the expanded sidebar.

defaultIsVisible boolean

Sets the initial visibility of the sidebar.

minimizedSidebarWidth string

Sets the width of the minimized sidebar.

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "left" | "right" | "center"

alignY "bottom" | "top" | "center"

altitude string

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

#PageWithSidebar.Disclosure Props

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "left" | "right" | "center"

alignY "bottom" | "top" | "center"

altitude string

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

#PageWithSidebar.Minimize Props

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "left" | "right" | "center"

alignY "bottom" | "top" | "center"

altitude string

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Copyright © 2020 Jake Moxey