✨ Reorder header action icons

public/locales/en/layout/tools.json

@@ -0,0 +1,5 @@
+{
+    "fallback": {
+        "title": "You currently do not have any tools"
+    }
+}

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

src/tools/translation-namespaces.ts

@@ -3,6 +3,7 @@ export const dashboardNamespaces = [
   'layout/app-shelf',
   'layout/add-service-app-shelf',
   'layout/app-shelf-menu',
+  'layout/tools',
   'settings/common',
   'settings/general/theme-selector',
   'settings/general/config-changer',