import SmartSidebar from '../SmartSidebar'
import Row from '../Row'
import Div from '../Div'
import Menu from '../Menu'
import Button from '../Button'
import Br from '../Br'
import Content from '../Content'
import Span from '../typography/Span'
import { useSession } from 'startupjs'
import { Sandbox } from '@startupjs/docs'

# SmartSidebar

SmartSidebar is typically used for nagivation. It provides a desktop-mobile friendly interface. Based on a fixed layout breakpoint, it decides to stay as a [visible sidebar](/docs/en/components/Sidebar) or to turn into an [invisible drawer sidebar](/docs/en/components/DrawerSidebar). Though in both cases the sidebar is controllable. By defualt it not visible on the screen.

```jsx
import { SmartSidebar } from '@startupjs/ui'
```

## Example

```jsx example
const [open, $open] = useSession('ExampleSmartSidebar')
return (
  <Div style={{overflow: 'hidden'}}>
    <SmartSidebar
      $open={$open}
      renderContent={() => (
        <Menu>
          <Menu.Item onPress={() => null}>Nav-1</Menu.Item>
          <Menu.Item onPress={() => null}>Nav-2</Menu.Item>
          <Menu.Item onPress={() => null}>Nav-3</Menu.Item>
        </Menu>
      )}
    >
      <Content
        padding
        width='full'
        style={{ backgroundColor: 'white' }}
      >
        <Row>
          <Button onPress={() => $open.set(!open)}>Toggle</Button>
        </Row>
        <Br />
        <Span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
        </Span>
      </Content>
    </SmartSidebar>
  </Div>
)
```

## Fixed Layout Breakpoint

The `fixedLayoutBreakpoint` property specifies the screen width breakpoint below which the [sidebar](/docs/en/components/Sidebar) switches to a [drawer sidebar](/docs/en/components/Drawer). `fixedLayoutBreakpoint` is a number type with a default value of `1024`.

```jsx example
const [open, $open] = useSession('ExampleSmartSidebarFixedLayoutBreakpoint')
return (
  <Div style={{overflow: 'hidden'}}>
    <SmartSidebar
      $open={$open}
      renderContent={() => (
        <Menu>
          <Menu.Item onPress={() => null}>Nav-1</Menu.Item>
          <Menu.Item onPress={() => null}>Nav-2</Menu.Item>
          <Menu.Item onPress={() => null}>Nav-3</Menu.Item>
        </Menu>
      )}
      fixedLayoutBreakpoint={10000}
    >
      <Content
        padding
        width='full'
        style={{ backgroundColor: 'white' }}
      >
        <Row>
          <Button onPress={() => $open.set(!open)}>Toggle</Button>
        </Row>
        <Br />
        <Span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
        </Span>
      </Content>
    </SmartSidebar>
  </Div>
)
```

## Position

The `position` property specifies the side of the window from which the sidebar will show. Possible values of `position` property are `left` (default) and `right`.

```jsx example
const [open, $open] = useSession('ExampleRightSidebar')
return (
  <Div style={{overflow: 'hidden'}}>
    <SmartSidebar
      $open={$open}
      renderContent={() => (
        <Div>
          <Br />
          <Menu>
            <Menu.Item onPress={() => null}>Nav-1</Menu.Item>
            <Menu.Item onPress={() => null}>Nav-2</Menu.Item>
            <Menu.Item onPress={() => null}>Nav-3</Menu.Item>
          </Menu>
        </Div>
      )}
      position={'right'}
    >
      <Content
        padding
        width='full'
        style={{ backgroundColor: 'white' }}
      >
        <Row>
          <Button onPress={() => $open.set(!open)}>Toggle right sidebar</Button>
        </Row>
        <Br />
        <Span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
        </Span>
      </Content>
    </SmartSidebar>
  </Div>
)
```

## Locked SmartSidebar

Specifying `forceClosed` property will keep the sidebar closed and it won't respond to `open` property.

```jsx example
const [open, $open] = useSession('ExampleLockerSmartSidebar')
return (
  <Div style={{overflow: 'hidden'}}>
    <SmartSidebar
      $open={$open}
      renderContent={() => (
        <Div>
          <Br />
          <Menu>
            <Menu.Item onPress={() => null}>Nav-1</Menu.Item>
            <Menu.Item onPress={() => null}>Nav-2</Menu.Item>
            <Menu.Item onPress={() => null}>Nav-3</Menu.Item>
          </Menu>
        </Div>
      )}
      forceClosed
    >
      <Content
        padding
        width='full'
        style={{ backgroundColor: 'white' }}
      >
        <Row>
          <Button onPress={() => $open.set(!open)}>Toggle</Button>
        </Row>
      </Content>
    </SmartSidebar>
  </Div>
)
```

## Sandbox

<Sandbox Component={SmartSidebar} />