Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-14 09:25:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Add new config format

Browse Source
This commit is contained in:
Meierschlumpf
2022-12-04 17:36:30 +01:00
parent b2f5149527
commit d5a3b3f3ba
76 changed files with 2461 additions and 1034 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/layout/header/Header.tsx
View File

@@ -1,38 +1,40 @@
import { Group, Header as Head, useMantineColorScheme, useMantineTheme } from '@mantine/core';
import { Box, createStyles, Group, Header as MantineHeader, useMantineTheme } from '@mantine/core';
import { useViewportSize } from '@mantine/hooks';
import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
import DockerMenuButton from '../../../modules/docker/DockerModule';
import { Search } from './Search';
import { SettingsMenuButton } from '../../Settings/SettingsMenu';
import { Logo } from '../Logo';
import { useConfig } from '../../../tools/state';
import { SearchModuleComponent } from '../../../modules/search/SearchModule';
import { useCardStyles } from '../useCardStyles';
export const HeaderHeight = 64;
export function Header(props: any) {
const { width } = useViewportSize();
const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
const { config } = useConfig();
const { colorScheme } = useMantineColorScheme();
const { classes } = useStyles();
const { classes: cardClasses } = useCardStyles();
return (
<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}`,
}}
>
<MantineHeader height={HeaderHeight} className={cardClasses.card}>
<Group p="xs" noWrap grow>
{width > MIN_WIDTH_MOBILE && <Logo style={{ fontSize: 22 }} />}
<Box className={classes.hide}>
<Logo />
</Box>
<Group position="right" noWrap>
<SearchModuleComponent />
<Search />
<DockerMenuButton />
<SettingsMenuButton />
<AddItemShelfButton />
</Group>
</Group>
</Head>
</MantineHeader>
);
}
const useStyles = createStyles((theme) => ({
hide: {
[theme.fn.smallerThan('xs')]: {
display: 'none',
},
},
}));