2022-05-14 21:41:30 +02:00
|
|
|
import React from 'react';
|
2022-06-06 15:20:46 +02:00
|
|
|
import {
|
|
|
|
|
createStyles,
|
|
|
|
|
Header as Head,
|
|
|
|
|
Group,
|
|
|
|
|
Box,
|
|
|
|
|
Burger,
|
|
|
|
|
Drawer,
|
|
|
|
|
Title,
|
|
|
|
|
ScrollArea,
|
|
|
|
|
ActionIcon,
|
|
|
|
|
Transition,
|
|
|
|
|
} from '@mantine/core';
|
|
|
|
|
import { useBooleanToggle } from '@mantine/hooks';
|
2022-04-25 00:11:32 +02:00
|
|
|
import { Logo } from './Logo';
|
2022-05-17 02:04:44 +02:00
|
|
|
import SearchBar from '../modules/search/SearchModule';
|
2022-05-16 15:56:16 +02:00
|
|
|
import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
|
|
|
|
|
import { SettingsMenuButton } from '../Settings/SettingsMenu';
|
2022-06-06 15:20:46 +02:00
|
|
|
import { ModuleWrapper } from '../modules/moduleWrapper';
|
2022-06-07 10:36:47 +02:00
|
|
|
import { CalendarModule, TotalDownloadsModule, WeatherModule, DateModule } from '../modules';
|
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-06-06 15:20:46 +02:00
|
|
|
const [opened, toggleOpened] = useBooleanToggle(false);
|
2022-04-25 00:11:32 +02:00
|
|
|
const { classes, cx } = useStyles();
|
2022-06-06 15:20:46 +02:00
|
|
|
const [hidden, toggleHidden] = useBooleanToggle(true);
|
2022-04-25 00:11:32 +02:00
|
|
|
|
|
|
|
|
return (
|
2022-05-16 15:56:16 +02:00
|
|
|
<Head height="auto">
|
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-05-04 07:12:22 +02:00
|
|
|
<SettingsMenuButton />
|
2022-05-14 21:41:30 +02:00
|
|
|
<AddItemShelfButton />
|
2022-06-06 15:20:46 +02:00
|
|
|
<ActionIcon className={classes.burger} variant="default" radius="md" size="xl">
|
|
|
|
|
<Burger
|
|
|
|
|
opened={!hidden}
|
|
|
|
|
onClick={(_) => {
|
|
|
|
|
toggleHidden();
|
|
|
|
|
toggleOpened();
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</ActionIcon>
|
|
|
|
|
<Drawer
|
|
|
|
|
size="auto"
|
|
|
|
|
padding="xl"
|
|
|
|
|
position="right"
|
|
|
|
|
hidden={hidden}
|
|
|
|
|
title={<Title order={3}>Modules</Title>}
|
|
|
|
|
opened
|
|
|
|
|
onClose={() => {
|
|
|
|
|
toggleHidden();
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Transition
|
|
|
|
|
mounted={opened}
|
|
|
|
|
transition="pop-top-right"
|
|
|
|
|
duration={300}
|
|
|
|
|
timingFunction="ease"
|
|
|
|
|
onExit={() => toggleOpened()}
|
|
|
|
|
>
|
|
|
|
|
{(styles) => (
|
|
|
|
|
<div style={styles}>
|
2022-06-21 19:38:32 +02:00
|
|
|
<ScrollArea offsetScrollbars style={{ height: '90vh' }}>
|
2022-06-06 15:20:46 +02:00
|
|
|
<Group my="sm" grow direction="column" style={{ width: 300 }}>
|
2022-06-07 00:30:42 +02:00
|
|
|
<ModuleWrapper module={CalendarModule} />
|
2022-06-06 15:20:46 +02:00
|
|
|
<ModuleWrapper module={TotalDownloadsModule} />
|
|
|
|
|
<ModuleWrapper module={WeatherModule} />
|
|
|
|
|
<ModuleWrapper module={DateModule} />
|
|
|
|
|
</Group>
|
|
|
|
|
</ScrollArea>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</Transition>
|
|
|
|
|
</Drawer>
|
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>
|
|
|
|
|
);
|
|
|
|
|
}
|
