123

components/Layout/Header/Header.tsx

@@ -0,0 +1,41 @@
+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;