❤
npm
Sign UpSign In

@hawk-ui/navigation-drawer

4.4.1 • Public • Published

Installation

To install a component run

$ npm install @hawk-ui/navigation-drawer --save

Please import CSS styles via

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

Usage

With Close Button and background dark

Demo

import NavigationDrawer from '@hawk-ui/navigation-drawer';
initialState = {
  isLeftOpen: false,
  isRightOpen: false,
};

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

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

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

Without Close Button and background light

Demo

import NavigationDrawer from '@hawk-ui/navigation-drawer';
initialState = {
  isLeftOpen: false,
  isRightOpen: false,
};

<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <div>
    <NavigationDrawer
      isOpen={state.isLeftOpen}
      type="light"
      title="Modal Title"
      position="left"
      onKeyDown={(event) => {
        setState({ isLeftOpen: false });
      }}
      onClose={() => {
        setState({ isLeftOpen: false });
      }}
    >
      <span>Navigation Drawer Body</span>
    </NavigationDrawer>
    <button
      type="button"
      className="hawk-button"
      onClick={() => {
        setState({ isLeftOpen: !state.isLeftOpen });
      }}
    >
      Left Navigation Drawer
    </button>
  </div>
  <div>
    <NavigationDrawer
      isOpen={state.isRightOpen}
      type="light"
      title="Modal Title"
      position="right"
      onKeyDown={(event) => {
        setState({ isRightOpen: false });
      }}
      onClose={() => {
        setState({ isRightOpen: false });
      }}
    >
      <span>Navigation Drawer Body</span>
    </NavigationDrawer>
    <button
      type="button"
      className="hawk-button"
      onClick={() => {
        setState({ isRightOpen: !state.isRightOpen });
      }}
    >
      Right Navigation Drawer
    </button>
  </div>
</div>

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
4.4.146latest

Version History

VersionDownloads (Last 7 Days)Published
4.4.146
4.4.00
4.3.90
4.3.80
4.3.70
4.3.60
4.3.50
4.3.40
4.3.31
4.3.20
4.3.10
4.3.00
4.2.90
4.2.80
4.2.70
4.2.60
4.2.50
4.2.40
4.2.30
4.2.20
4.2.10
4.2.00
4.1.90
4.1.80
4.1.70
4.1.60
4.1.50
4.1.40
4.1.30
4.1.20
4.1.10
4.1.00
4.0.91
4.0.80
4.0.70
4.0.60
4.0.51
4.0.40
4.0.30
4.0.20
4.0.10
4.0.00
3.1.91
3.1.80
3.1.70
3.1.50
3.1.40
3.1.30
3.1.20
3.1.10
3.1.00
3.0.90
3.0.81
3.0.70
3.0.60
3.0.50
3.0.40
3.0.31
3.0.20
3.0.10
3.0.00
2.13.20
2.13.10
2.13.00
2.12.100
2.12.90
2.12.80
2.12.70
2.12.60
2.12.50
2.12.40
2.12.30
2.12.20
2.12.10
2.11.90
2.11.80
2.11.70
2.11.60
2.11.50
2.11.40
2.11.30
2.11.20
2.11.10
2.11.00
2.10.90
2.10.80
2.10.70
2.10.60
2.10.50
2.10.10
2.10.00
2.9.90
2.9.80
2.9.60
2.9.50
2.9.40
2.9.30
2.9.20
2.9.10
2.9.00
2.8.90
2.8.80
2.8.70
2.8.60
2.8.50
2.8.40
2.8.30
2.8.20
2.8.10
2.8.00
2.7.90
2.7.80
2.7.70
2.7.60
2.7.50
2.7.40
2.7.30
2.7.20
2.7.10
2.6.80
2.6.70
2.6.60
2.6.50
2.6.40
2.6.30
2.6.20
2.6.10
2.6.00
2.5.90
2.5.80
2.5.70
2.5.60
2.5.50
2.5.40
2.5.30
2.5.20
2.5.10
2.5.00
2.4.90
2.4.80
2.4.70
2.4.60
2.4.50
2.4.40
2.4.30
2.4.20
2.4.10
2.4.00
2.3.90
2.3.80
2.3.70
2.3.60
2.3.50
2.3.40
2.3.30
2.3.20
2.3.10
2.3.00
2.2.90
2.2.80
2.2.70
2.2.60
2.2.50
2.2.40
2.2.30
2.2.20
2.2.10
2.2.00
2.1.90
2.1.80
2.1.70
2.1.60
2.1.50
2.1.40
2.1.30
2.1.20
2.1.10
2.1.00
2.0.90
2.0.80
2.0.70
2.0.60
2.0.50
2.0.40
2.0.30
2.0.20
2.0.10
2.0.00
1.9.100
1.9.90
1.9.80
1.9.70
1.9.60
1.9.50
1.9.40
1.9.30
1.9.20
1.9.10
1.9.00
1.8.90
1.8.80
1.8.70
1.8.60
1.8.50
1.8.40
1.8.30
1.8.20
1.8.10
1.8.00
1.7.90
1.7.80
1.7.70
1.7.60
1.7.50
1.7.41
1.7.30
1.7.20
1.7.10
1.7.00
1.6.90
1.6.80
1.6.70
1.6.60
1.6.50
1.6.40
1.6.31
1.6.20
1.6.10
1.6.00
1.5.90
1.5.80
1.5.70
1.5.60
1.5.50
1.5.40
1.5.30
1.5.20
1.5.10
1.5.00
1.4.100
1.4.90
1.4.80
1.4.70
1.4.60
1.4.50
1.4.40
1.4.30
1.4.20
1.4.10
1.4.00
1.3.90
1.3.80
1.3.70
1.3.60
1.3.50
1.3.40
1.3.30
1.3.20
1.3.10
1.3.00
1.2.90

Package Sidebar

Install

npm i @hawk-ui/navigation-drawer

Weekly Downloads

49

Version

4.4.1

License

MIT

Unpacked Size

32.6 kB

Total Files

9

Last publish

Collaborators

  • saurabh2112
Try on RunKit
Report malware