2022-09-03 00:40:44 +02:00
|
|
|
import { Box, createStyles, Group, Header as Head, useMantineColorScheme } from '@mantine/core';
|
2022-05-16 15:56:16 +02:00
|
|
|
import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
|
2022-07-22 13:20:02 +02:00
|
|
|
|
2022-07-23 22:22:55 +02:00
|
|
|
import DockerMenuButton from '../../modules/docker/DockerModule';
|
|
|
|
|
import SearchBar from '../../modules/search/SearchModule';
|
2022-06-27 17:27:59 +02:00
|
|
|
import { SettingsMenuButton } from '../Settings/SettingsMenu';
|
|
|
|
|
import { Logo } from './Logo';
|
2022-09-03 00:40:44 +02:00
|
|
|
import { useConfig } from '../../tools/state';
|
2022-04-25 00:11:32 +02:00
|
|
|
|
|
|
|
|
const HEADER_HEIGHT = 60;
|
|
|
|
|
|
|
|
|
|
const useStyles = createStyles((theme) => ({
|
2022-05-16 15:56:16 +02:00
|
|
|
hide: {
|
2022-05-16 14:34:01 +02:00
|
|
|
[theme.fn.smallerThan('xs')]: {
|
2022-04-25 00:11:32 +02:00
|
|
|
display: 'none',
|
|
|
|
|
},
|
|
|
|
|
},
|
2022-06-06 15:20:46 +02:00
|
|
|
burger: {
|
|
|
|
|
[theme.fn.largerThan('sm')]: {
|
|
|
|
|
display: 'none',
|
|
|
|
|
},
|
|
|
|
|
},
|
2022-04-25 00:11:32 +02:00
|
|
|
}));
|
|
|
|
|
|
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();
|
2022-09-03 00:40:44 +02:00
|
|
|
const { config } = useConfig();
|
|
|
|
|
const { colorScheme } = useMantineColorScheme();
|
2022-04-25 00:11:32 +02:00
|
|
|
|
|
|
|
|
return (
|
2022-09-03 00:40:44 +02:00
|
|
|
<Head
|
|
|
|
|
height="auto"
|
|
|
|
|
style={{
|
|
|
|
|
background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
|
|
|
|
|
${(config.settings.appOpacity || 100) / 100}`,
|
|
|
|
|
borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
|
|
|
|
|
${(config.settings.appOpacity || 100) / 100}`,
|
|
|
|
|
}}
|
|
|
|
|
>
|
2022-06-07 17:36:05 +00:00
|
|
|
<Group p="xs" position="apart">
|
2022-05-16 15:56:16 +02:00
|
|
|
<Box className={classes.hide}>
|
|
|
|
|
<Logo style={{ fontSize: 22 }} />
|
|
|
|
|
</Box>
|
|
|
|
|
<Group noWrap>
|
2022-05-16 13:54:08 +02:00
|
|
|
<SearchBar />
|
2022-07-21 11:43:43 +02:00
|
|
|
<DockerMenuButton />
|
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>
|
|
|
|
|
);
|
|
|
|
|
}
|
