✨Add improved settings button

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} />
+    </>
+  );
+};