diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 779921b8b..f319c4c0e 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -1,95 +1,30 @@ import React from 'react'; -import { createStyles, Header as Head, Group } from '@mantine/core'; -import { NextLink } from '@mantine/next'; +import { createStyles, Header as Head, Group, Box } from '@mantine/core'; import { Logo } from './Logo'; -import { SettingsMenuButton } from '../Settings/SettingsMenu'; -import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem'; import SearchBar from '../SearchBar/SearchBar'; +import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem'; +import { SettingsMenuButton } from '../Settings/SettingsMenu'; const HEADER_HEIGHT = 60; const useStyles = createStyles((theme) => ({ - root: { - 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: { + hide: { [theme.fn.smallerThan('xs')]: { 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) { const { classes, cx } = useStyles(); return ( - - - - + + + + + +