2022-11-29 20:32:24 +09:00
|
|
|
import { Group, Header as Head, useMantineColorScheme, useMantineTheme } from '@mantine/core';
|
2022-11-29 20:30:53 +09:00
|
|
|
import { useViewportSize } from '@mantine/hooks';
|
2022-10-10 20:46:22 +02:00
|
|
|
import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
|
2022-07-22 13:20:02 +02:00
|
|
|
|
2022-10-10 20:46:22 +02:00
|
|
|
import DockerMenuButton from '../../../modules/docker/DockerModule';
|
|
|
|
|
import { SettingsMenuButton } from '../../Settings/SettingsMenu';
|
|
|
|
|
import { Logo } from '../Logo';
|
|
|
|
|
import { useConfig } from '../../../tools/state';
|
2022-11-29 20:30:53 +09:00
|
|
|
import { SearchModuleComponent } from '../../../modules/search/SearchModule';
|
2022-04-25 00:11:32 +02:00
|
|
|
|
2022-05-16 13:54:08 +02:00
|
|
|
export function Header(props: any) {
|
2022-11-29 20:30:53 +09:00
|
|
|
const { width } = useViewportSize();
|
|
|
|
|
const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
|
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-11-29 20:30:53 +09:00
|
|
|
<Group p="xs" noWrap grow>
|
|
|
|
|
{width > MIN_WIDTH_MOBILE && <Logo style={{ fontSize: 22 }} />}
|
|
|
|
|
<Group position="right" noWrap>
|
|
|
|
|
<SearchModuleComponent />
|
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>
|
|
|
|
|
);
|
|
|
|
|
}
|
