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

src/components/layout/header/Header.tsx

@@ -7,6 +7,7 @@ import { Search } from './Search';
 import { Logo } from '../Logo';
 import { useCardStyles } from '../useCardStyles';
 import { SettingsMenu } from './SettingsMenu';
+import { ToolsMenu } from './ToolsMenu';
 
 export const HeaderHeight = 64;
 
@@ -22,9 +23,9 @@ export function Header(props: any) {
         </Box>
         <Group position="right" noWrap>
           <Search />
-          <DockerMenuButton />
-          <SettingsMenu />
           <AddItemShelfButton />
+          <ToolsMenu />
+          <SettingsMenu />
         </Group>
       </Group>
     </MantineHeader>

src/components/layout/header/ToolsMenu.tsx

@@ -0,0 +1,26 @@
+import { ActionIcon, Menu, Text } from '@mantine/core';
+import { IconAxe } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import DockerMenuButton from '../../../modules/docker/DockerModule';
+
+export const ToolsMenu = () => {
+  const { t } = useTranslation('layout/tools');
+  return (
+    <Menu>
+      <Menu.Target>
+        <ActionIcon variant="default" radius="md" size="xl" color="blue">
+          <IconAxe />
+        </ActionIcon>
+      </Menu.Target>
+      <Menu.Dropdown>
+        {/* TODO: Implement check to display fallback when no tools */}
+        <DockerMenuButton />
+        <Menu.Item closeMenuOnClick={false} disabled>
+          <Text size="sm" color="dimmed">
+            {t('fallback.title')}
+          </Text>
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+};