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:

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}
/>