2022-05-14 21:41:30 +02:00
|
|
|
import React from 'react';
|
2022-05-16 13:54:08 +02:00
|
|
|
import {
|
|
|
|
|
createStyles,
|
|
|
|
|
Header as Head,
|
|
|
|
|
Group,
|
|
|
|
|
} from '@mantine/core';
|
2022-04-25 00:11:32 +02:00
|
|
|
import { NextLink } from '@mantine/next';
|
|
|
|
|
import { Logo } from './Logo';
|
2022-05-14 21:41:30 +02:00
|
|
|
import { SettingsMenuButton } from '../Settings/SettingsMenu';
|
|
|
|
|
import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
|
2022-05-16 13:54:08 +02:00
|
|
|
import SearchBar from '../SearchBar/SearchBar';
|
2022-04-25 00:11:32 +02:00
|
|
|
|
|
|
|
|
const HEADER_HEIGHT = 60;
|
|
|
|
|
|
|
|
|
|
const useStyles = createStyles((theme) => ({
|
|
|
|
|
root: {
|
|
|
|
|
position: 'relative',
|
|
|
|
|
zIndex: 1,
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
dropdown: {
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
top: HEADER_HEIGHT,
|
|
|
|
|
left: 0,
|
|
|
|
|
right: 0,
|
|
|
|
|
zIndex: 0,
|
|
|
|
|
borderTopRightRadius: 0,
|
|
|
|
|
borderTopLeftRadius: 0,
|
|
|
|
|
borderTopWidth: 0,
|
|
|
|
|
overflow: 'hidden',
|
|
|
|
|
|
2022-05-04 07:12:22 +02:00
|
|
|
[theme.fn.largerThan('md')]: {
|
2022-04-25 00:11:32 +02:00
|
|
|
display: 'none',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
header: {
|
|
|
|
|
display: 'flex',
|
|
|
|
|
height: '100%',
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
links: {
|
2022-05-04 07:12:22 +02:00
|
|
|
[theme.fn.smallerThan('md')]: {
|
2022-04-25 00:11:32 +02:00
|
|
|
display: 'none',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
burger: {
|
2022-05-04 07:12:22 +02:00
|
|
|
[theme.fn.largerThan('md')]: {
|
2022-04-25 00:11:32 +02:00
|
|
|
display: 'none',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
link: {
|
|
|
|
|
display: 'block',
|
|
|
|
|
lineHeight: 1,
|
|
|
|
|
padding: '8px 12px',
|
|
|
|
|
borderRadius: theme.radius.sm,
|
|
|
|
|
textDecoration: 'none',
|
|
|
|
|
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
|
|
|
|
|
fontSize: theme.fontSizes.sm,
|
|
|
|
|
fontWeight: 500,
|
|
|
|
|
|
|
|
|
|
'&:hover': {
|
|
|
|
|
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
[theme.fn.smallerThan('sm')]: {
|
|
|
|
|
borderRadius: 0,
|
|
|
|
|
padding: theme.spacing.md,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
linkActive: {
|
|
|
|
|
'&, &:hover': {
|
|
|
|
|
backgroundColor:
|
|
|
|
|
theme.colorScheme === 'dark'
|
|
|
|
|
? theme.fn.rgba(theme.colors[theme.primaryColor][9], 0.25)
|
|
|
|
|
: theme.colors[theme.primaryColor][0],
|
|
|
|
|
color: theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 3 : 7],
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
interface HeaderResponsiveProps {
|
|
|
|
|
links: { link: string; label: string }[];
|
|
|
|
|
}
|
|
|
|
|
|
2022-05-16 13:54:08 +02:00
|
|
|
export function Header(props: any) {
|
2022-04-25 00:11:32 +02:00
|
|
|
const { classes, cx } = useStyles();
|
|
|
|
|
|
|
|
|
|
return (
|
2022-05-14 21:41:30 +02:00
|
|
|
<Head height={HEADER_HEIGHT}>
|
|
|
|
|
<Group direction="row" align="center" position="apart" className={classes.header} mx="xl">
|
|
|
|
|
<NextLink style={{ textDecoration: 'none' }} href="/">
|
|
|
|
|
<Logo style={{ fontSize: 22 }} />
|
|
|
|
|
</NextLink>
|
2022-05-04 07:12:22 +02:00
|
|
|
<Group>
|
2022-05-16 13:54:08 +02:00
|
|
|
<SearchBar />
|
2022-05-04 07:12:22 +02:00
|
|
|
<SettingsMenuButton />
|
2022-05-14 21:41:30 +02:00
|
|
|
<AddItemShelfButton />
|
2022-05-04 07:12:22 +02:00
|
|
|
</Group>
|
2022-05-14 21:41:30 +02:00
|
|
|
</Group>
|
2022-04-25 00:11:32 +02:00
|
|
|
</Head>
|
|
|
|
|
);
|
|
|
|
|
}
|
