diff --git a/public/locales/en/layout/tools.json b/public/locales/en/layout/tools.json new file mode 100644 index 000000000..e27df9de5 --- /dev/null +++ b/public/locales/en/layout/tools.json @@ -0,0 +1,5 @@ +{ + "fallback": { + "title": "You currently do not have any tools" + } +} \ No newline at end of file diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx index 7130d7378..ebfc1839f 100644 --- a/src/components/layout/header/Header.tsx +++ b/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) { - - + + diff --git a/src/components/layout/header/ToolsMenu.tsx b/src/components/layout/header/ToolsMenu.tsx new file mode 100644 index 000000000..77a3b45c4 --- /dev/null +++ b/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 ( + + + + + + + + {/* TODO: Implement check to display fallback when no tools */} + + + + {t('fallback.title')} + + + + + ); +}; diff --git a/src/tools/translation-namespaces.ts b/src/tools/translation-namespaces.ts index e4f6c540a..2ab1dc672 100644 --- a/src/tools/translation-namespaces.ts +++ b/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',