Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-06 13:35:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

� Header styling

Browse Source
This commit is contained in:
Aj - Thomas
2022-05-16 15:56:16 +02:00
committed by ajnart
parent ebc7ba9684
commit 08daeb87bc
1 changed files with 10 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/layout/Header.tsx
View File

@@ -1,95 +1,30 @@
import React from 'react'; import React from 'react';
import { createStyles, Header as Head, Group } from '@mantine/core'; import { createStyles, Header as Head, Group, Box } from '@mantine/core';
import { NextLink } from '@mantine/next';
import { Logo } from './Logo'; import { Logo } from './Logo';
import { SettingsMenuButton } from '../Settings/SettingsMenu';
import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
import SearchBar from '../SearchBar/SearchBar'; import SearchBar from '../SearchBar/SearchBar';
import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
import { SettingsMenuButton } from '../Settings/SettingsMenu';
const HEADER_HEIGHT = 60; const HEADER_HEIGHT = 60;
const useStyles = createStyles((theme) => ({ const useStyles = createStyles((theme) => ({
root: { hide: {
position: 'relative',
zIndex: 1,
},
dropdown: {
position: 'absolute',
top: HEADER_HEIGHT,
left: 0,
right: 0,
zIndex: 0,
borderTopRightRadius: 0,
borderTopLeftRadius: 0,
borderTopWidth: 0,
overflow: 'hidden',
[theme.fn.largerThan('md')]: {
display: 'none',
},
},
header: {
display: 'flex',
height: '100%',
},
links: {
[theme.fn.smallerThan('xs')]: { [theme.fn.smallerThan('xs')]: {
display: 'none', display: 'none',
}, },
}, },
burger: {
[theme.fn.largerThan('md')]: {
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 }[];
}
export function Header(props: any) { export function Header(props: any) {
const { classes, cx } = useStyles(); const { classes, cx } = useStyles();
return ( return (
<Head height={HEADER_HEIGHT}> <Head height="auto">
<Group direction="row" align="center" position="apart" className={classes.header} mx="xl"> <Group m="xs" position="apart">
<Box className={classes.hide}>
<Logo style={{ fontSize: 22 }} /> <Logo style={{ fontSize: 22 }} />
<Group> </Box>
<Group noWrap>
<SearchBar /> <SearchBar />
<SettingsMenuButton /> <SettingsMenuButton />
<AddItemShelfButton /> <AddItemShelfButton />