draft mobile layout

invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx

@@ -2,6 +2,7 @@ import { Flex, Text, Image } from '@chakra-ui/react';
 import { RootState } from 'app/store';
 import { useAppSelector } from 'app/storeHooks';
 import InvokeAILogoImage from 'assets/images/logo.png';
+import MediaQuery from 'react-responsive';
 
 const InvokeAILogoComponent = () => {
   const appVersion = useAppSelector(
@@ -11,18 +12,20 @@ const InvokeAILogoComponent = () => {
   return (
     <Flex alignItems="center" gap={3} ps={1}>
       <Image src={InvokeAILogoImage} alt="invoke-ai-logo" w="32px" h="32px" />
-      <Text fontSize="xl">
-        invoke <strong>ai</strong>
-      </Text>
-      <Text
-        sx={{
-          fontWeight: 300,
-          marginTop: 1,
-        }}
-        variant="subtext"
-      >
-        {appVersion}
-      </Text>
+      <MediaQuery minDeviceWidth={768}>
+        <Text fontSize="xl">
+          invoke <strong>ai</strong>
+        </Text>
+        <Text
+          sx={{
+            fontWeight: 300,
+            marginTop: 1,
+          }}
+          variant="subtext"
+        >
+          {appVersion}
+        </Text>
+      </MediaQuery>
     </Flex>
   );
 };

invokeai/frontend/web/src/features/system/components/SiteHeader.tsx

@@ -1,127 +1,63 @@
-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 { Box, Flex, Grid } from '@chakra-ui/react';
+import React, { useState } from 'react';
 import ModelSelect from './ModelSelect';
-import SettingsModal from './SettingsModal/SettingsModal';
 import StatusIndicator from './StatusIndicator';
-import ThemeChanger from './ThemeChanger';
 
-import LanguagePicker from './LanguagePicker';
-
-import { useTranslation } from 'react-i18next';
-import { MdSettings } from 'react-icons/md';
 import InvokeAILogoComponent from './InvokeAILogoComponent';
+import MediaQuery from 'react-responsive';
+import SiteHeaderMenu from './SiteHeaderMenu';
+import { FaBars } from 'react-icons/fa';
 
 /**
- * Header, includes color mode toggle, settings button, status message.
+ * Header, includes logo, model select and status message.
  */
 const SiteHeader = () => {
-  const { t } = useTranslation();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const handleMenuToggle = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
 
   return (
-    <Grid gridTemplateColumns="auto max-content">
-      <InvokeAILogoComponent />
+    <>
+      <MediaQuery minDeviceWidth={768}>
+        <Grid gridTemplateColumns="auto max-content">
+          <InvokeAILogoComponent />
 
-      <Flex alignItems="center" gap={2}>
-        <StatusIndicator />
+          <Flex alignItems="center" gap={2}>
+            <StatusIndicator />
 
-        <ModelSelect />
+            <ModelSelect />
 
-        <ModelManagerModal>
-          <IAIIconButton
-            aria-label={t('modelManager.modelManager')}
-            tooltip={t('modelManager.modelManager')}
-            size="sm"
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            icon={<FaCube />}
-          />
-        </ModelManagerModal>
+            <SiteHeaderMenu />
+          </Flex>
+        </Grid>
+      </MediaQuery>
+      <MediaQuery maxDeviceWidth={768}>
+        <Flex>
+          <InvokeAILogoComponent />
 
-        <HotkeysModal>
-          <IAIIconButton
-            aria-label={t('common.hotkeysLabel')}
-            tooltip={t('common.hotkeysLabel')}
-            size="sm"
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            icon={<FaKeyboard />}
-          />
-        </HotkeysModal>
+          <Flex alignItems="center" gap={3} marginLeft="2rem">
+            <StatusIndicator />
 
-        <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>
+            <ModelSelect />
+          </Flex>
+          <Box
+            onClick={handleMenuToggle}
+            sx={{
+              marginLeft: '20px',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <FaBars />
+          </Box>
+        </Flex>
+        {isMenuOpen && <SiteHeaderMenu />}
+      </MediaQuery>
+    </>
   );
 };
 

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;