Merge branch 'gridstack' of https://github.com/manuel-rw/homarr into gridstack

src/components/layout/header/Header.tsx

@@ -4,9 +4,9 @@ import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
 
 import DockerMenuButton from '../../../modules/docker/DockerModule';
 import { Search } from './Search';
-import { SettingsMenuButton } from '../../Settings/SettingsMenu';
 import { Logo } from '../Logo';
 import { useCardStyles } from '../useCardStyles';
+import { SettingsMenu } from './SettingsMenu';
 
 export const HeaderHeight = 64;
 
@@ -23,7 +23,7 @@ export function Header(props: any) {
         <Group position="right" noWrap>
           <Search />
           <DockerMenuButton />
-          <SettingsMenuButton />
+          <SettingsMenu />
           <AddItemShelfButton />
         </Group>
       </Group>

src/components/layout/header/SettingsMenu.tsx

@@ -0,0 +1,34 @@
+import { ActionIcon, Menu, Tooltip } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons';
+import { SettingsDrawer } from '../../Settings/SettingsDrawer';
+import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';
+
+export const SettingsMenu = () => {
+  const [drawerOpened, drawer] = useDisclosure(false);
+
+  return (
+    <>
+      <Tooltip label="Open Menu">
+        <Menu width={250}>
+          <Menu.Target>
+            <ActionIcon variant="default" radius="md" size="xl" color="blue">
+              <IconMenu2 />
+            </ActionIcon>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <ColorSchemeSwitch />
+            <Menu.Divider />
+            <Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>
+              Homarr Settings
+            </Menu.Item>
+            <Menu.Item icon={<IconInfoCircle strokeWidth={1.2} size={18} />} onClick={() => {}}>
+              About
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      </Tooltip>
+      <SettingsDrawer opened={drawerOpened} closeDrawer={drawer.close} />
+    </>
+  );
+};

src/components/layout/header/SettingsMenu/ColorSchemeSwitch.tsx

@@ -0,0 +1,22 @@
+import { Menu, useMantineColorScheme, useMantineTheme } from '@mantine/core';
+import { IconMoonStars, IconSun } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+
+export const ColorSchemeSwitch = () => {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  const { t } = useTranslation('settings/general/theme-selector');
+
+  const Icon = colorScheme === 'dark' ? IconSun : IconMoonStars;
+
+  return (
+    <Menu.Item
+      closeMenuOnClick={false}
+      icon={<Icon strokeWidth={1.2} size={18} />}
+      onClick={() => toggleColorScheme()}
+    >
+      {t('label', {
+        theme: colorScheme === 'dark' ? 'light' : 'dark',
+      })}
+    </Menu.Item>
+  );
+};