@parkassist/pa-ui-library
Version:
INX Platform elements
333 lines • 9.65 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import List from '@mui/material/List';
import clsx from "clsx";
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Collapse from '@mui/material/Collapse';
import Divider from "@mui/material/Divider";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import { styled, useTheme } from "@mui/material/styles";
import MuiAppBar from "@mui/material/AppBar";
import MuiDrawer from "@mui/material/Drawer";
import { Palette } from "../../index";
import { ComponentIcon, DashboardIcon, DocumentationIcon, MapsIcon, MenuIcon, ReportsIcon, RoutinesIcon, SettingsIcon, UsersIcon, ClosedArrowIcon, OpenArrowIcon } from "../Icons";
import TopMenu from "../TopMenu";
import LabelWithIcon from "../LabelWithIcon";
import { makeStyles } from "@mui/styles";
import FontStyles from "../../constants/FontStyles";
const drawerWidth = 240;
const DrawerHeader = styled('div')(({
theme
}) => Object.assign({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1)
}, theme.mixins.toolbar));
const MenuContent = styled('div')(({
theme
}) => ({
backgroundColor: `${Palette.BLACK}`
}));
const AppBar = styled(MuiAppBar, {
shouldForwardProp: prop => prop !== 'open'
})(({
theme,
open
}) => Object.assign({
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
}, open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
}));
const useStyles = makeStyles(theme => ({
root: {
display: "flex"
},
drawer: {
width: drawerWidth,
flexShrink: 0,
whiteSpace: "nowrap",
"& > div": {
backgroundColor: `${Palette.BLACK}`
}
},
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
drawerClose: {
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
overflowX: "hidden",
width: `${parseInt(theme.spacing(9).replace('px', '')) + 1}px`
},
menuItem: {
width: `calc(drawerWidth - theme.spacing(3))`,
backgroundColor: "transparent",
"&:hover, &:active, &:focus": {
backgroundColor: `${Palette.LIGHT_BLACK}`
}
},
listItem: {
justifyContent: "start !important",
paddingLeft: theme.spacing(3),
font: FontStyles.BODY1_FONT,
height: "auto",
minHeight: 32,
width: "100%",
whiteSpace: "pre-wrap",
transition: theme.transitions.create("padding", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
}),
color: `${Palette.DARK_GREY}`,
'& img ': {
filter: `${Palette.FILTER_DARK_GREY}`
},
'&:hover': {
color: `${Palette.WHITE}`,
filter: `${Palette.FILTER_PRIMARY}`,
'& img ': {
filter: `${Palette.FILTER_PRIMARY}`
}
}
},
listIcon: {
marginRight: theme.spacing(2)
},
toolbar: theme.mixins.toolbar,
nested: {
paddingLeft: theme.spacing(7)
}
}));
const Navigation = () => {
const theme = useTheme();
const classes = useStyles();
const [openIndex, setOpenIndex] = React.useState(-1);
const [open, setOpen] = React.useState(false);
const handleOpenDrawer = () => {
setOpen(prevState => !prevState);
};
const handleClick = index => () => {
if (index === openIndex) {
setOpenIndex(-1);
} else {
setOpenIndex(index);
}
};
const rootMenus = [{
name: "Dashboard",
to: "#",
icon: _jsx(DashboardIcon, {
className: clsx(classes.menuImage, {})
})
}, {
name: "Reports",
to: "#",
icon: _jsx(ReportsIcon, {
className: clsx(classes.menuImage, {})
})
}, {
name: "Maps",
to: "#",
icon: _jsx(MapsIcon, {
className: clsx(classes.menuImage, {})
})
}, {
name: "Routines",
to: "#",
icon: _jsx(RoutinesIcon, {
className: clsx(classes.menuImage, {})
})
}, {
name: "Documentation",
to: "#",
icon: _jsx(DocumentationIcon, {
className: clsx(classes.menuImage, {})
}),
menus: [{
name: "Notification"
}, {
name: "Blabla",
icon: _jsx(ComponentIcon, {
className: clsx(classes.menuImage, {})
})
}, {
name: "Boohoo",
icon: _jsx(ComponentIcon, {
className: clsx(classes.menuImage, {}),
style: {
filter: `${Palette.FILTER_WHITE}`
}
})
}]
}, {
name: "Users",
to: "#",
icon: _jsx(UsersIcon, {
className: clsx(classes.menuImage, {})
})
}, {
name: "Configuration",
to: "#",
icon: _jsx(SettingsIcon, {
className: clsx(classes.menuImage, {})
}),
menus: [{
name: "Test2",
to: "#",
icon: _jsx(ComponentIcon, {
className: clsx(classes.menuImage, {})
})
}]
}];
return _jsxs(_Fragment, {
children: [_jsx(AppBar, {
position: "fixed",
style: {
background: `${Palette.BLACK}`,
height: "70px",
zIndex: theme => theme.zIndex.drawer + 1
},
children: _jsxs(Toolbar, {
children: [_jsx(IconButton, {
color: "inherit",
"aria-label": "open drawer",
onClick: handleOpenDrawer,
edge: "start",
children: _jsx(MenuIcon, {
style: {
filter: `${Palette.FILTER_WHITE}`
}
})
}), _jsx(TopMenu, {})]
})
}), _jsxs(MuiDrawer, {
variant: "permanent",
anchor: "left",
open: open,
className: clsx(classes.drawer, {
[classes.drawerOpen]: open,
[classes.drawerClose]: !open
}),
classes: {
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open
})
},
children: [_jsx(DrawerHeader, {
style: {
background: `${Palette.BLACK}`,
height: '70px'
},
children: _jsx(IconButton, {
onClick: handleOpenDrawer,
children: theme.direction === 'rtl' ? _jsx(ChevronRightIcon, {
style: {
color: `${Palette.WHITE}`
}
}) : _jsx(ChevronLeftIcon, {
style: {
color: `${Palette.WHITE}`
}
})
})
}), _jsx(Divider, {}), rootMenus.map(({
name,
icon,
menus = []
}, index) => _jsxs(React.Fragment, {
children: [_jsx(MenuContent, {
className: clsx(classes.menuItem, {}),
children: _jsxs(ListItemButton, {
className: clsx(classes.listItem, {}),
onClick: handleClick(index),
children: [_jsx(ListItemIcon, {
className: clsx(classes.listIcon, {
[classes.listIconOpen]: open,
[classes.listIconClose]: !open
}),
sx: {
minWidth: 0,
mr: open ? 4 : 'auto',
justifyContent: 'center',
color: `${Palette.DARK_GREY}`,
filter: `${Palette.FILTER_DARK_GREY}`
},
children: icon
}), _jsx(ListItemText, {
primary: name,
style: {
display: open ? 'inline-block' : 'none'
}
}), menus.length > 0 && _jsx(_Fragment, {
children: openIndex === index ? _jsx(OpenArrowIcon, {
style: {
float: 'right',
display: open ? 'inline-block' : 'none'
}
}) : _jsx(ClosedArrowIcon, {
style: {
float: 'right',
display: open ? 'inline-block' : 'none'
}
})
})]
})
}), _jsx(Collapse, {
in: openIndex === index,
timeout: "auto",
unmountOnExit: true,
children: _jsx(MenuContent, {
children: _jsx(List, {
component: "div",
disablePadding: true,
children: menus.map(({
name,
to = "/",
icon
}, i) => _jsx("div", {
children: _jsx(ListItemButton, {
className: clsx(classes.listItem, {
[classes.nested]: open
}),
children: _jsx(LabelWithIcon, {
leftIconStyle: {
filter: `${Palette.FILTER_DARK_GREY}`
},
textStyle: {
color: `${Palette.DARK_GREY}`
},
leftIcon: icon,
text: open ? name : ""
})
})
}, i))
})
})
})]
}, index))]
})]
});
};
export default Navigation;