draft mobile layout

2026-04-23 03:00:31 -04:00 · 2023-04-15 21:34:03 +02:00
parent 50eb02f68b
commit 2edd032ec7
19 changed files with 433 additions and 221 deletions
--- a/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx
@@ -0,0 +1,120 @@
+import { Flex, Grid, Link } from '@chakra-ui/react';
+
+import { FaBug, FaCube, FaDiscord, FaGithub, FaKeyboard } from 'react-icons/fa';
+
+import IAIIconButton from 'common/components/IAIIconButton';
+
+import HotkeysModal from './HotkeysModal/HotkeysModal';
+
+import ModelManagerModal from './ModelManager/ModelManagerModal';
+import SettingsModal from './SettingsModal/SettingsModal';
+import ThemeChanger from './ThemeChanger';
+
+import LanguagePicker from './LanguagePicker';
+
+import { useTranslation } from 'react-i18next';
+import { MdSettings } from 'react-icons/md';
+
+/**
+ * HeaderMenu, includes color mode toggle, settings button.
+ */
+const SiteHeaderMenu = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Grid gridTemplateColumns="auto max-content">
+      <Flex alignItems="center" gap={2}>
+        <ModelManagerModal>
+          <IAIIconButton
+            aria-label={t('modelManager.modelManager')}
+            tooltip={t('modelManager.modelManager')}
+            size="sm"
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            icon={<FaCube />}
+          />
+        </ModelManagerModal>
+
+        <HotkeysModal>
+          <IAIIconButton
+            aria-label={t('common.hotkeysLabel')}
+            tooltip={t('common.hotkeysLabel')}
+            size="sm"
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            icon={<FaKeyboard />}
+          />
+        </HotkeysModal>
+
+        <ThemeChanger />
+
+        <LanguagePicker />
+
+        <Link
+          isExternal
+          href="http://github.com/invoke-ai/InvokeAI/issues"
+          marginBottom="-0.25rem"
+        >
+          <IAIIconButton
+            aria-label={t('common.reportBugLabel')}
+            tooltip={t('common.reportBugLabel')}
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            size="sm"
+            icon={<FaBug />}
+          />
+        </Link>
+
+        <Link
+          isExternal
+          href="http://github.com/invoke-ai/InvokeAI"
+          marginBottom="-0.25rem"
+        >
+          <IAIIconButton
+            aria-label={t('common.githubLabel')}
+            tooltip={t('common.githubLabel')}
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            size="sm"
+            icon={<FaGithub />}
+          />
+        </Link>
+
+        <Link
+          isExternal
+          href="https://discord.gg/ZmtBAhwWhy"
+          marginBottom="-0.25rem"
+        >
+          <IAIIconButton
+            aria-label={t('common.discordLabel')}
+            tooltip={t('common.discordLabel')}
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            size="sm"
+            icon={<FaDiscord />}
+          />
+        </Link>
+
+        <SettingsModal>
+          <IAIIconButton
+            aria-label={t('common.settingsLabel')}
+            tooltip={t('common.settingsLabel')}
+            variant="link"
+            data-variant="link"
+            fontSize={22}
+            size="sm"
+            icon={<MdSettings />}
+          />
+        </SettingsModal>
+      </Flex>
+    </Grid>
+  );
+};
+
+SiteHeaderMenu.displayName = 'SiteHeaderMenu';
+export default SiteHeaderMenu;