import React from 'react'; import { createStyles, Header as Head, Group, Box, Burger, Drawer, Title, ScrollArea, ActionIcon, Transition, } from '@mantine/core'; import { useBooleanToggle } from '@mantine/hooks'; import { Logo } from './Logo'; import SearchBar from '../modules/search/SearchModule'; import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem'; import { SettingsMenuButton } from '../Settings/SettingsMenu'; import { ModuleWrapper } from '../modules/moduleWrapper'; import { CalendarModule, TotalDownloadsModule, WeatherModule, DateModule } from '../modules'; const HEADER_HEIGHT = 60; const useStyles = createStyles((theme) => ({ hide: { [theme.fn.smallerThan('xs')]: { display: 'none', }, }, burger: { [theme.fn.largerThan('sm')]: { display: 'none', }, }, })); export function Header(props: any) { const [opened, toggleOpened] = useBooleanToggle(false); const { classes, cx } = useStyles(); const [hidden, toggleHidden] = useBooleanToggle(true); return ( { toggleHidden(); toggleOpened(); }} /> ); }