skip to main content
skip to navigation sidebar
skip to context sidebar
Collection of theme-ui and external components.
Theme UI
Edit this page
created:3/15/2021
updated:3/15/2021
source lines:43
comments %:30

Sidebar

@component-controls/components
3.4.5

Collapsible side bar component

Component

browse
docs
issues
import { Sidebar } from '@component-controls/components';

Icon

Title

  • item 1
  • item 2
  • item 3

browse
docs
issues
() => (
  <ThemeProvider>
    <SidebarContextProvider>
      <div style={{ border: '1px solid black' }}>
        <SidebarContext.Consumer>
          {({ SidebarToggle }) => (
            <Flex css={{ flexDirection: 'row', alignItems: 'start' }}>
              <SidebarToggle icon={<ProjectIcon />} />
              <Sidebar title="Title">
                <ul>
                  <li>item 1</li>
                  <li>item 2</li>
                  <li>item 3</li>
                </ul>
              </Sidebar>
            </Flex>
          )}
        </SidebarContext.Consumer>
      </div>
    </SidebarContextProvider>
  </ThemeProvider>
)

Properties

Name
Description
Default
SidebarProps (3 properties)
title

Title string or any react node

string | ({} & string) | (ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> & string) | (ReactNodeArray & string) | (ReactPortal & string)
-
collapsible

Whether the sidebar can be collapsed

boolean
-
children

children content elements to be displayed in Sidebar

ReactNode
-
HTMLAttributes (43 properties)
Attributes (1 properties)
AriaAttributes (48 properties)
DOMAttributes (161 properties)
- (1 properties)
BoxOwnProps (4 properties)
SpaceProps (28 properties)
BackgroundColorProps (2 properties)
OpacityProps (1 properties)

External dependencies

package
imports
peer
@theme-ui/css
^0.6.0-alpha.7
get
*
react
^17.0.1
useContextReactTextReactNodeFC
*
theme-ui
^0.6.0-alpha.7
jsxHeadingBoxPropsBox

Internal dependencies

file
imports
"../ThemeContext"
useTheme
"./SidebarContext"
SidebarContext

Component JSX

<Box
variant
/>
theme-ui
^0.6.0-alpha.7

Stories

Overview

  • item 1
  • item 2
  • item 3

browse
docs
issues
({ collapsible }) => (
  <ThemeProvider>
    <SidebarContextProvider collapsible={collapsible}>
      <SidebarContext.Consumer>
        {({ SidebarToggle }) => (
          <Flex css={{ flexDirection: 'row', alignItems: 'start' }}>
            <SidebarToggle />
            <Sidebar>
              <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
              </ul>
            </Sidebar>
          </Flex>
        )}
      </SidebarContext.Consumer>
    </SidebarContextProvider>
  </ThemeProvider>
)

Title

Title

  • item 1
  • item 2
  • item 3

browse
docs
issues
() => (
  <ThemeProvider>
    <SidebarContextProvider>
      <div style={{ border: '1px solid black' }}>
        <SidebarContext.Consumer>
          {({ SidebarToggle }) => (
            <Flex css={{ flexDirection: 'row', alignItems: 'start' }}>
              <SidebarToggle />
              <Sidebar title="Title">
                <ul>
                  <li>item 1</li>
                  <li>item 2</li>
                  <li>item 3</li>
                </ul>
              </Sidebar>
            </Flex>
          )}
        </SidebarContext.Consumer>
      </div>
    </SidebarContextProvider>
  </ThemeProvider>
)

Button Props

Title

  • item 1
  • item 2
  • item 3

browse
docs
issues
() => (
  <ThemeProvider>
    <SidebarContextProvider>
      <div style={{ border: '1px solid black' }}>
        <SidebarContext.Consumer>
          {({ SidebarToggle }) => (
            <Flex css={{ flexDirection: 'row', alignItems: 'start' }}>
              <SidebarToggle aria-label="click to expand/collapse" />
              <Sidebar title="Title">
                <ul>
                  <li>item 1</li>
                  <li>item 2</li>
                  <li>item 3</li>
                </ul>
              </Sidebar>
            </Flex>
          )}
        </SidebarContext.Consumer>
      </div>
    </SidebarContextProvider>
  </ThemeProvider>
)
Previous
component-controls/SearchInput
Next
component-controls/Source