42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { IconSun } from '@tabler/icons-react';
|
|
import {
|
|
ActionIcon,
|
|
Burger,
|
|
Flex,
|
|
Group, Image,
|
|
MantineColorScheme,
|
|
useMantineColorScheme,
|
|
} from '@mantine/core';
|
|
import { useToggle } from '@mantine/hooks';
|
|
|
|
type HeaderProps = {
|
|
toggleMobile: () => void;
|
|
toggleDesktop: () => void;
|
|
|
|
mobileOpened: boolean;
|
|
desktopOpened: boolean;
|
|
};
|
|
const Header = ({ toggleMobile, toggleDesktop, mobileOpened, desktopOpened }: HeaderProps) => {
|
|
const { setColorScheme } = useMantineColorScheme();
|
|
const [theme, toggle] = useToggle(['light', 'dark']);
|
|
const onChangeThemeClick = () => {
|
|
toggle();
|
|
setColorScheme(theme as MantineColorScheme);
|
|
};
|
|
return (
|
|
<Flex align="center" justify="space-between" h="100%">
|
|
<Group h="100%" px="md">
|
|
<Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
|
|
<Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom="sm" size="sm" />
|
|
</Group>
|
|
к <Group h="100%" px="md">
|
|
<ActionIcon onClick={() => onChangeThemeClick()} variant="default">
|
|
<IconSun />
|
|
</ActionIcon>
|
|
</Group>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default Header;
|