LeftNavBar.tsx 4.74 KB
Newer Older
1
import { NavLink } from 'react-router-dom';
2
3
4
5
6
7
8
9
10
11
12
import {
  ListItem,
  ListItemText,
  ListItemIcon,
  Container,
  Drawer,
  List,
  Theme,
  Hidden,
  Button,
} from '@material-ui/core';
13
14
import { makeStyles, createStyles } from '@material-ui/core/styles';
import efWhiteLogo from '../../../assets/logos/ef-registered-wht.svg';
15
import CloseIcon from '@material-ui/icons/Close';
16
17
18
19
import { NAV_OPTIONS_DATA, drawerWidth, themeBlack, darkOrange } from '../../../Constants/Constants';
import { useRouteMatch } from 'react-router-dom';
import { scrollToTop } from '../../../Utils/formFunctionHelpers';

20
const useStyles = makeStyles((theme: Theme) =>
21
22
  createStyles({
    drawer: {
23
24
25
26
      [theme.breakpoints.up('md')]: {
        width: drawerWidth,
        flexShrink: 0,
      },
27
28
29
30
31
32
33
34
35
36
    },
    drawerPaper: {
      backgroundColor: themeBlack,
    },
    navOptions: {
      '&:hover': {
        textDecoration: 'none',
      },
    },
    navItems: {
37
      height: 55,
38
39
40
      borderLeft: `rgba(0,0,0,0) 5px solid`,
    },
    navItemsActive: {
41
      height: 55,
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
      borderLeft: `${darkOrange} 5px solid`,
    },
    navIcons: {
      color: '#A5A4BF',
    },
    navIconsActive: {
      color: darkOrange,
    },
    navText: {
      color: '#FFF',
    },
    efLogoCtn: {
      height: 70,
      display: 'flex',
      justifyContent: 'center',
    },
    efLogo: {
59
60
61
62
63
64
65
66
67
68
      width: 175,
    },
    closeBtn: {
      position: 'fixed',
      top: theme.spacing(1.5),
      right: theme.spacing(2),
    },
    closeIcon: {
      color: 'white',
      fontSize: 30,
69
70
71
72
73
74
75
    },
  })
);

interface NavOptionProps {
  path: string;
  icon: JSX.Element;
76
  type: string | undefined;
77
  name: string;
78
79
80
81
82
83
  handleDrawerToggle: (() => void) | null;
}

interface LeftNavBarProps {
  mobileOpen: boolean;
  handleDrawerToggle: () => void;
84
85
}

86
const NavOption: React.FC<NavOptionProps> = ({ path, icon, type, name, handleDrawerToggle }) => {
87
88
89
  const classes = useStyles();
  const isActive = useRouteMatch(path);

90
  if (type === 'submenu') {
91
92
    // This means it is a sub nav of /dashboard
    return (
93
94
95
96
97
98
      <a
        className={classes.navOptions}
        href={path}
        onClick={() => handleDrawerToggle && handleDrawerToggle()}
        key={path}
      >
99
100
101
102
103
104
105
106
        <ListItem className={classes.navItems} button>
          <ListItemIcon className={classes.navIcons}>{icon}</ListItemIcon>
          <ListItemText className={classes.navText} primary={name} />
        </ListItem>
      </a>
    );
  } else {
    return (
107
108
109
110
111
112
113
114
115
      <NavLink
        className={classes.navOptions}
        to={path}
        key={path}
        onClick={() => {
          handleDrawerToggle && handleDrawerToggle();
          scrollToTop();
        }}
      >
116
117
118
119
120
121
122
123
124
        <ListItem className={isActive ? classes.navItemsActive : classes.navItems} button>
          <ListItemIcon className={isActive ? classes.navIconsActive : classes.navIcons}>{icon}</ListItemIcon>
          <ListItemText className={classes.navText} primary={name} />
        </ListItem>
      </NavLink>
    );
  }
};

125
const LeftNavBar: React.FC<LeftNavBarProps> = ({ mobileOpen, handleDrawerToggle }) => {
126
127
  const classes = useStyles();

128
129
130
131
132
133
134
135
136
137
138
  const renderNavOptions = (isHambergerMenu: boolean) =>
    NAV_OPTIONS_DATA.map((item) => (
      <NavOption
        path={item.path}
        name={item.name}
        type={item.type}
        icon={item.icon}
        handleDrawerToggle={isHambergerMenu ? handleDrawerToggle : null}
        key={item.path}
      />
    ));
139
140

  return (
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
    <>
      <Hidden mdUp implementation="css">
        <Drawer
          className={classes.drawer}
          variant="temporary"
          open={mobileOpen}
          classes={{
            paper: classes.drawerPaper,
          }}
          anchor="top"
          onClose={handleDrawerToggle}
          ModalProps={{
            keepMounted: true, // Better open performance on mobile.
          }}
        >
          <Container className={classes.efLogoCtn}>
            <img src={efWhiteLogo} alt="Eclipse Foundation logo" className={classes.efLogo} />
            <Button onClick={handleDrawerToggle} className={classes.closeBtn}>
              <CloseIcon className={classes.closeIcon} />
            </Button>
          </Container>
          <List>{renderNavOptions(true)}</List>
        </Drawer>
      </Hidden>
      <Hidden smDown implementation="css">
        <Drawer
          className={classes.drawer}
          variant="permanent"
          classes={{
            paper: classes.drawerPaper,
          }}
          open
          anchor="left"
        >
          <Container className={classes.efLogoCtn}>
            <img src={efWhiteLogo} alt="Eclipse Foundation logo" className={classes.efLogo} />
          </Container>
          <List>{renderNavOptions(false)}</List>
        </Drawer>
      </Hidden>
    </>
182
  );
183
184
185
};

export default LeftNavBar;