Slup - Sidenav

This package contains the Sidenav, a Material Design Component which is part of a bigger ecosystem called Slup

Description

From Google's Material Design guidelines:

The nav drawer spans the height of the screen, with everything behind it visible but darkened by a scrim.

Installation

This package can be installed with NPM

npm install --save @slup/sidenav

Usage

import { Sidenav } from '@slup/sidenav'

export class Test extends Component {
  state = { opened: false }

  handleClick() {
    this.setState({ opened: true })
  }

  handleClose() {
    this.setState({ opened: false })
  }

  render() {
    return (
      <div>
        /* Simple button to trigger the sidenav */
        <button onClick={this.handleClick.bind(this)}>Trigger</button>

        /* The component itself */
        <Sidenav
          opened={this.state.opened}
          onClose={this.handleClose.bind(this)}
        />
      </div>
    )
  }
}

Available properties

Props	Type	Default	Documentation
opened	boolean	false	Link
onClose	function	none	Link
right	boolean	false	Link
responsive	boolean	false	Link
permanent	boolean	false	Link
overlay	boolean	true	Link

Property: 'right'

This property will position the Sidenav to the right of the view

<Sidenav
  opened={this.state.opened}
  onClose={this.handleClose.bind(this)}
  right
/>

Property: 'responsive'

This property will close the Sidenav on a small viewport but it will be open it on a bigger one

<Sidenav
  opened={this.state.opened}
  onClose={this.handleClose.bind(this)}
  responsive
/>

Property: 'permanent'

This property will make the Sidenav always visible

<Sidenav
  opened={this.state.opened}
  onClose={this.handleClose.bind(this)}
  permanent
/>

Property: 'overlay'

This property if set to false will remove the overlay

<Sidenav
  opened={this.state.opened}
  onClose={this.handleClose.bind(this)}
  overlay={false}
/>