242 lines
8.3 KiB
TypeScript
242 lines
8.3 KiB
TypeScript
/*
|
|
* Copyright (c) All respective contributors to the Peridot Project. All rights reserved.
|
|
* Copyright (c) 2021-2022 Rocky Enterprise Software Foundation, Inc. All rights reserved.
|
|
* Copyright (c) 2021-2022 Ctrl IQ, Inc. All rights reserved.
|
|
*
|
|
* Redistribution and use in source and binary forms, with or without
|
|
* modification, are permitted provided that the following conditions are met:
|
|
*
|
|
* 1. Redistributions of source code must retain the above copyright notice,
|
|
* this list of conditions and the following disclaimer.
|
|
*
|
|
* 2. Redistributions in binary form must reproduce the above copyright notice,
|
|
* this list of conditions and the following disclaimer in the documentation
|
|
* and/or other materials provided with the distribution.
|
|
*
|
|
* 3. Neither the name of the copyright holder nor the names of its contributors
|
|
* may be used to endorse or promote products derived from this software without
|
|
* specific prior written permission.
|
|
*
|
|
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
|
|
* ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
|
|
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
|
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
|
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
|
|
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
|
|
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
|
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
|
* POSSIBILITY OF SUCH DAMAGE.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { match, useLocation } from 'react-router';
|
|
import * as H from 'history';
|
|
import AppBar from '@mui/material/AppBar';
|
|
import Drawer from '@mui/material/Drawer';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Button from '@mui/material/Button';
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
import PersonIcon from '@mui/icons-material/Person';
|
|
import LoginIcon from '@mui/icons-material/Login';
|
|
import LogoutIcon from '@mui/icons-material/Logout';
|
|
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
|
import { PeridotLogo } from 'common/ui/PeridotLogo';
|
|
import Toolbar from '@mui/material/Toolbar';
|
|
import Divider from '@mui/material/Divider';
|
|
import { NavLink, Link, NavLinkProps, useRouteMatch } from 'react-router-dom';
|
|
import ListItem from '@mui/material/ListItem/ListItem';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import { peridotTheme, primaryColor } from './theme';
|
|
import FormControl from '@mui/material/FormControl';
|
|
import InputLabel from '@mui/material/InputLabel';
|
|
import Select from '@mui/material/Select';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import ListItemIcon from '@mui/material/ListItemIcon';
|
|
import List from '@mui/material/List';
|
|
import Box from '@mui/material/Box';
|
|
import ListItemButton from '@mui/material/ListItemButton';
|
|
import useMediaQuery from '@mui/material/useMediaQuery';
|
|
|
|
export interface NavbarLink extends Pick<NavLinkProps, 'isActive'> {
|
|
text: string;
|
|
href: string;
|
|
real?: boolean;
|
|
exact?: boolean;
|
|
|
|
icon?(classes: string): React.ReactNode;
|
|
}
|
|
|
|
export interface NavbarCategories {
|
|
title?: string;
|
|
links: (NavbarLink | undefined)[];
|
|
}
|
|
|
|
export interface NavbarDrawerProps {
|
|
mainLinks?: NavbarCategories[];
|
|
afterLogoNode?: () => React.ReactNode;
|
|
|
|
logo(classes: string): React.ReactNode;
|
|
}
|
|
|
|
interface LinkRealWrapperProps extends Pick<NavLinkProps, 'isActive'> {
|
|
to: string;
|
|
children: React.ReactNode;
|
|
|
|
real?: boolean;
|
|
exact?: boolean;
|
|
|
|
onClick?(): void;
|
|
}
|
|
|
|
const LinkRealWrapper = (props: LinkRealWrapperProps) => {
|
|
const linkClasses = 'hover:bg-gray-100 focus:bg-gray-100';
|
|
|
|
return props.real ? (
|
|
<a className={linkClasses} href={props.to} onClick={props.onClick}>
|
|
{props.children}
|
|
</a>
|
|
) : (
|
|
<NavLink
|
|
className={linkClasses}
|
|
activeClassName="text-peridot-primary"
|
|
to={props.to}
|
|
isActive={props.isActive}
|
|
exact={props.exact}
|
|
onClick={props.onClick}
|
|
>
|
|
{props.children}
|
|
</NavLink>
|
|
);
|
|
};
|
|
|
|
const itemNoHover = {
|
|
py: '2px',
|
|
px: 3,
|
|
color: 'rgba(255, 255, 255, 0.7)',
|
|
};
|
|
|
|
const item = Object.assign({}, itemNoHover, {
|
|
'&:hover, &:focus': {
|
|
bgcolor: 'rgba(255, 255, 255, 0.08)',
|
|
},
|
|
});
|
|
|
|
const itemCategory = {
|
|
boxShadow: '0 -1px 0 rgb(255,255,255,0.1) inset',
|
|
py: 1.5,
|
|
px: 3,
|
|
};
|
|
|
|
export const NavbarDrawer = (props: NavbarDrawerProps) => {
|
|
const location = useLocation();
|
|
const [drawerOpen, setDrawerOpen] = React.useState(false);
|
|
const isSmUp = useMediaQuery(peridotTheme.breakpoints.up('sm'));
|
|
|
|
const toggleDrawer = () => {
|
|
setDrawerOpen(!drawerOpen);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Box component="nav" sx={{ width: { sm: 256 }, flexShrink: { sm: 0 } }}>
|
|
<Drawer
|
|
variant={isSmUp ? 'permanent' : 'temporary'}
|
|
open={isSmUp ? true : drawerOpen}
|
|
onClose={isSmUp ? undefined : toggleDrawer}
|
|
PaperProps={{ style: { width: 256 } }}
|
|
sx={isSmUp ? { display: { sm: 'block', xs: 'none' } } : null}
|
|
>
|
|
<List disablePadding>
|
|
<ListItem
|
|
sx={{
|
|
...itemNoHover,
|
|
...itemCategory,
|
|
fontSize: 22,
|
|
color: '#fff',
|
|
}}
|
|
>
|
|
{props.logo('h-8')}
|
|
</ListItem>
|
|
{window.state.email ? (
|
|
<ListItem sx={{ ...itemNoHover, ...itemCategory }}>
|
|
<ListItemIcon>
|
|
<PersonIcon />
|
|
</ListItemIcon>
|
|
<ListItemText className="text-ellipsis overflow-hidden">
|
|
{window.state.name && window.state.name.length > 0
|
|
? window.state.name
|
|
: window.state.email}
|
|
</ListItemText>
|
|
<a href="/oauth2/logout">
|
|
<LogoutIcon fontSize="small" />
|
|
</a>
|
|
</ListItem>
|
|
) : (
|
|
<ListItem sx={{ ...itemNoHover, ...itemCategory }}>
|
|
<a className="flex items-center" href="/oauth2/login">
|
|
<ListItemIcon>
|
|
<LoginIcon />
|
|
</ListItemIcon>
|
|
<ListItemText>Login</ListItemText>
|
|
</a>
|
|
</ListItem>
|
|
)}
|
|
{props.afterLogoNode && (
|
|
<ListItem sx={{ ...itemNoHover, ...itemCategory }}>
|
|
<ListItemText>{props.afterLogoNode()}</ListItemText>
|
|
</ListItem>
|
|
)}
|
|
{props.mainLinks?.map((category) => (
|
|
<Box key={category.title || 'empty'} sx={{ bgcolor: '#101F33' }}>
|
|
{category.title ? (
|
|
<ListItem sx={{ py: 2, px: 3 }}>
|
|
<ListItemText sx={{ color: '#fff' }}>
|
|
{category.title}
|
|
</ListItemText>
|
|
</ListItem>
|
|
) : (
|
|
<div className="pt-4" />
|
|
)}
|
|
{category.links.map((link: NavbarLink | undefined) => {
|
|
if (!link) {
|
|
return null;
|
|
}
|
|
let match = useRouteMatch({
|
|
path: link.href,
|
|
exact: link.exact,
|
|
});
|
|
if (link.isActive && !link.isActive(match, location)) {
|
|
match = null;
|
|
}
|
|
|
|
return (
|
|
<LinkRealWrapper
|
|
key={link.href}
|
|
to={link.href}
|
|
real={link.real}
|
|
isActive={link.isActive}
|
|
exact={link.exact}
|
|
>
|
|
<ListItem disablePadding>
|
|
<ListItemButton selected={!!match} sx={item}>
|
|
{link.icon && (
|
|
<ListItemIcon>{link.icon('')}</ListItemIcon>
|
|
)}
|
|
<ListItemText primary={link.text} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</LinkRealWrapper>
|
|
);
|
|
})}
|
|
<Divider sx={{ mt: 2 }} />
|
|
</Box>
|
|
))}
|
|
</List>
|
|
</Drawer>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|