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: 'opened'

This property the sidenav visible if set to true

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

Property: 'onClose'

This property handles the event that occurs when the overlay is clicked/swiped

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

Property: 'responsive'

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

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

Property: 'permanent'

This property makes the Sidenav always visible

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

Property: 'overlay'

This property removes the overlay if set to false

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