@zenequityui/navigation-drawer v0.9.6

Installation

To install a component run

$ npm install @zenequityui/navigation-drawer --save

Please import CSS styles via

@import '/path__to__node_modules/@zenequityui/navigation-drawer/dist/index.min.css

Usage

Navigation Drawer

import { NavigationDrawer } from '@zenequityui/navigation-drawer';

initialState = {
  isLeftOpen: false,
  isRightOpen: false,
};

<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <div>
    <NavigationDrawer
      isOpen={state.isLeftOpen}
      position="left"
      onKeyDown={(event) => {
        setState({ isLeftOpen: false });
      }}
      onClose={() => {
        setState({ isLeftOpen: false });
      }}
    >
      <span>Navigation Drawer Body</span>
    </NavigationDrawer>

    <button
      type="button"
      className="zenequity-button"
      onClick={() => {
        setState({ isLeftOpen: !state.isLeftOpen });
      }}
    >
      Left Navigation Drawer
    </button>
  </div>

  <div>
    <NavigationDrawer
      isOpen={state.isRightOpen}
      position="right"
      onKeyDown={(event) => {
        setState({ isRightOpen: false });
      }}
      onClose={() => {
        setState({ isRightOpen: false });
      }}
    >
      <span>Navigation Drawer Body</span>
    </NavigationDrawer>
    <button
      type="button"
      className="zenequity-button"
      onClick={() => {
        setState({ isRightOpen: !state.isRightOpen });
      }}
    >
      Right Navigation Drawer
    </button>
  </div>
</div>