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

Sidebar placement#

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.

Editable example

Or you can use the usePage hook.

Editable example

Minimizing the sidebar#

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

Editable example

Or you can use the usePage hook.

Editable example

Sidebar width#

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 "right" | "left"

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;
  ... 809 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;
  ... 800 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 "right" | "left" | "center"

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

variant string

colorMode string

disabled boolean

overrides 

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 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 "right" | "left" | "center"

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

variant string

colorMode string

disabled boolean

overrides 

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 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 "right" | "left" | "center"

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

variant string

colorMode string

disabled boolean

overrides 

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

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

themeKey string

On this page
Copyright © 2021 Jake Moxey