Installation

To install a component run

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

Please import CSS styles via

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

Usage

With Close Button and background dark

Demo

1import NavigationDrawer from '@hawk-ui/navigation-drawer';

1initialState = {
2  isLeftOpen: false,
3  isRightOpen: false,
4};
5
6<div style={{ display: 'flex', justifyContent: 'space-around' }}>
7  <div>
8    <NavigationDrawer
9      isOpen={state.isLeftOpen}
10      hideCloseIcon
11      type="dark"
12      title="Modal Title"
13      position="left"
14      onKeyDown={(event) => {
15        setState({ isLeftOpen: false });
16      }}
17      onClose={() => {
18        setState({ isLeftOpen: false });
19      }}
20    >
21      <span>Navigation Drawer Body</span>
22    </NavigationDrawer>
23
24    <button
25      type="button"
26      className="hawk-button"
27      onClick={() => {
28        setState({ isLeftOpen: !state.isLeftOpen });
29      }}
30    >
31      Left Navigation Drawer
32    </button>
33  </div>
34
35  <div>
36    <NavigationDrawer
37      isOpen={state.isRightOpen}
38      hideCloseIcon
39      type="dark"
40      title="Modal Title"
41      position="right"
42      onKeyDown={(event) => {
43        setState({ isRightOpen: false });
44      }}
45      onClose={() => {
46        setState({ isRightOpen: false });
47      }}
48    >
49      <span>Navigation Drawer Body</span>
50    </NavigationDrawer>
51    <button
52      type="button"
53      className="hawk-button"
54      onClick={() => {
55        setState({ isRightOpen: !state.isRightOpen });
56      }}
57    >
58      Right Navigation Drawer
59    </button>
60  </div>
61</div>

Without Close Button and background light

Demo

1import NavigationDrawer from '@hawk-ui/navigation-drawer';

1initialState = {
2  isLeftOpen: false,
3  isRightOpen: false,
4};
5
6<div style={{ display: 'flex', justifyContent: 'space-around' }}>
7  <div>
8    <NavigationDrawer
9      isOpen={state.isLeftOpen}
10      type="light"
11      title="Modal Title"
12      position="left"
13      onKeyDown={(event) => {
14        setState({ isLeftOpen: false });
15      }}
16      onClose={() => {
17        setState({ isLeftOpen: false });
18      }}
19    >
20      <span>Navigation Drawer Body</span>
21    </NavigationDrawer>
22    <button
23      type="button"
24      className="hawk-button"
25      onClick={() => {
26        setState({ isLeftOpen: !state.isLeftOpen });
27      }}
28    >
29      Left Navigation Drawer
30    </button>
31  </div>
32  <div>
33    <NavigationDrawer
34      isOpen={state.isRightOpen}
35      type="light"
36      title="Modal Title"
37      position="right"
38      onKeyDown={(event) => {
39        setState({ isRightOpen: false });
40      }}
41      onClose={() => {
42        setState({ isRightOpen: false });
43      }}
44    >
45      <span>Navigation Drawer Body</span>
46    </NavigationDrawer>
47    <button
48      type="button"
49      className="hawk-button"
50      onClick={() => {
51        setState({ isRightOpen: !state.isRightOpen });
52      }}
53    >
54      Right Navigation Drawer
55    </button>
56  </div>
57</div>