106 lines
3.1 KiB
TypeScript
106 lines
3.1 KiB
TypeScript
import { Burger, createStyles, Header, rem, Menu, Container, Group, Button, Flex } from "@mantine/core";
|
|
import { useDisclosure, useMediaQuery } from "@mantine/hooks";
|
|
import UserMenu from '../../shared/components/UserMenu';
|
|
import { useAuth } from 'react-oidc-context';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import ColorSchemeToggle from "../../shared/components/ColorSchemeToggle";
|
|
import Logo from "../../shared/components/Logo";
|
|
import { routesPath } from "../../router/routes.path";
|
|
import DrawerMenu from "../../shared/components/DrawerMenu";
|
|
|
|
const HEADER_HEIGHT = rem(60)
|
|
|
|
const useStyles = createStyles((theme) => ({
|
|
inner: {
|
|
height: HEADER_HEIGHT,
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
|
|
leftMenu: {
|
|
flexWrap: "nowrap"
|
|
},
|
|
|
|
leftLinksMenu: {
|
|
[theme.fn.largerThan('md')]: {
|
|
display: 'none',
|
|
},
|
|
[theme.fn.smallerThan('sm')]: {
|
|
display: 'none',
|
|
},
|
|
},
|
|
|
|
centerLinksMenu: {
|
|
position: "absolute",
|
|
left: "50%",
|
|
transform: "translateX(-50%)",
|
|
[theme.fn.smallerThan('md')]: {
|
|
display: 'none',
|
|
},
|
|
|
|
},
|
|
// TODO delete
|
|
burger: {
|
|
[theme.fn.largerThan('sm')]: {
|
|
display: 'none',
|
|
},
|
|
},
|
|
|
|
colorToggle: {
|
|
[theme.fn.smallerThan('md')]: { display: 'none' }
|
|
}
|
|
|
|
}))
|
|
|
|
export interface LinkItem {
|
|
label: string
|
|
link: string
|
|
}
|
|
|
|
export interface HeaderActionProps {
|
|
links: LinkItem[],
|
|
logo?: JSX.Element
|
|
}
|
|
|
|
export const HeaderAction = ({ links }: HeaderActionProps) => {
|
|
const { classes } = useStyles();
|
|
const navigate = useNavigate()
|
|
const auth = useAuth()
|
|
|
|
const handleNavigate = (link: string) => {
|
|
navigate(link)
|
|
}
|
|
|
|
const items = links.map(item =>
|
|
<Menu key={item.label} trigger="hover" transitionProps={{ exitDuration: 0 }} withinPortal>
|
|
<Menu.Target>
|
|
<Button variant="subtle" uppercase onClick={() => handleNavigate(item.link)}>
|
|
{item.label}
|
|
</Button>
|
|
</Menu.Target>
|
|
</Menu>
|
|
)
|
|
|
|
return (
|
|
<Header height={HEADER_HEIGHT} sx={{ borderBottom: 0 }}>
|
|
<Container className={classes.inner} fluid>
|
|
<Flex wrap='nowrap' >
|
|
<Logo onClick={() => handleNavigate(routesPath.MAIN_PATH)} />
|
|
{/* <Burger opened={opened} onClick={toggle} className={classes.burger} size="sm" /> */}
|
|
<DrawerMenu links={links} />
|
|
<Flex className={classes.leftLinksMenu}>
|
|
{items}
|
|
</Flex>
|
|
</Flex>
|
|
<Container className={classes.centerLinksMenu}>
|
|
{items}
|
|
</Container>
|
|
<Group position="right">
|
|
<ColorSchemeToggle className={classes.colorToggle} />
|
|
<UserMenu user={{ name: auth.user?.profile.preferred_username || "", image: "" }} />
|
|
</Group>
|
|
</Container>
|
|
</Header >
|
|
)
|
|
} |