Merge remote-tracking branch 'origin/master' into fix/landing-page

apps/venus/src/app/common/Footer.tsx

@@ -90,13 +90,14 @@ export const AFFiNEFooter = ({
                 sx={{
                     display: 'flex',
                     justifyContent: 'center',
-                    maxWidth: '400px',
+                    flexWrap: 'wrap',
+                    maxWidth: '420px',
                     margin: 'auto',
                     marginBottom: '2em',
                     '--joy-shadow-sm': 0,
                 }}
             >
-                <Box sx={{ display: 'flex', width: '100%' }}>
+                <Box sx={{ display: 'flex', width: '84px' }}>
                     <Button
                         variant="plain"
                         sx={{
@@ -144,7 +145,7 @@ export const AFFiNEFooter = ({
                         </Grid>
                     </Button>
                 </Box>
-                <Box sx={{ display: 'flex', width: '100%' }}>
+                <Box sx={{ display: 'flex', width: '84px' }}>
                     <Button
                         variant="plain"
                         sx={{
@@ -190,7 +191,7 @@ export const AFFiNEFooter = ({
                         </Grid>
                     </Button>
                 </Box>
-                <Box sx={{ display: 'flex', width: '100%' }}>
+                <Box sx={{ display: 'flex', width: '84px' }}>
                     <Button
                         variant="plain"
                         sx={{
@@ -239,7 +240,7 @@ export const AFFiNEFooter = ({
                 <Box
                     sx={{
                         display: 'flex',
-                        width: '100%',
+                        width: '84px',
                     }}
                 >
                     <Button
@@ -285,7 +286,7 @@ export const AFFiNEFooter = ({
                         </Grid>
                     </Button>
                 </Box>
-                <Box sx={{ display: 'flex', width: '100%' }}>
+                <Box sx={{ display: 'flex', width: '84px' }}>
                     <Button
                         variant="plain"
                         sx={{

apps/venus/src/app/common/Header.tsx

@@ -11,6 +11,7 @@ import GitHubIcon from '@mui/icons-material/GitHub';
 import { styled, useMediaQuery } from '@mui/material';
 import AFFiNETextLogo from './affine-text-logo.png';
 import { HoverMenu } from './HoverMenu';
+import { MobileHeader } from './MobileHeader';
 
 import { options } from '../i18n';
 
@@ -22,7 +23,10 @@ export const AFFiNEHeader = () => {
     const changeLanguage = (event: any) => {
         i18n.changeLanguage(event);
     };
-    const matchesIPAD = useMediaQuery('(max-width: 768px)');
+    const matchesIPAD = useMediaQuery('(max-width: 1080px)');
+    if (matchesIPAD) {
+        return <MobileHeader />;
+    }
     return (
         <Container container spacing={2}>
             <Grid xs={6} sx={{ display: 'flex', alignItems: 'center' }}>
@@ -135,6 +139,34 @@ export const AFFiNEHeader = () => {
                         window.open(href);
                     }}
                 />
+                <HoverMenu
+                    title={t('ContactUs')}
+                    options={[
+                        {
+                            title: 'Discord',
+                            value: 'https://discord.gg/Arn7TqJBvG',
+                        },
+                        {
+                            title: 'Telegram',
+                            value: 'https://t.me/affineworkos',
+                        },
+                        {
+                            title: 'Reddit',
+                            value: 'https://www.reddit.com/r/Affine/',
+                        },
+                        {
+                            title: 'Medium',
+                            value: 'https://medium.com/@affineworkos',
+                        },
+                        {
+                            title: 'Email',
+                            value: 'mailto:contact@toeverything.info',
+                        },
+                    ]}
+                    onSelect={href => {
+                        window.open(href);
+                    }}
+                />
                 <Select
                     defaultValue="en"
                     sx={{ display: matchesIPAD ? 'none' : 'intial' }}

apps/venus/src/app/common/MobileHeader.tsx

@@ -0,0 +1,208 @@
+import Close from '@mui/icons-material/Close';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import Menu from '@mui/icons-material/Menu';
+import { Button, Grid } from '@mui/joy';
+import { useRef, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import {
+    Checkbox,
+    Collapse,
+    Drawer,
+    List,
+    ListItemButton,
+    ListItemText,
+    styled,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import AFFiNETextLogo from './affine-text-logo.png';
+
+export const MobileHeader = () => {
+    const navigate = useNavigate();
+    const { i18n, t } = useTranslation();
+    const anchor = useRef<HTMLDivElement | null>(null);
+    const [openedDrawer, setDrawerState] = useState(false);
+    const handleDrawerOpenState = () => {
+        setDrawerState(!openedDrawer);
+    };
+    const [contactUsCollapse, setContactUsCollapse] = useState(false);
+    const handleContactUsClick = () => {
+        setContactUsCollapse(!contactUsCollapse);
+    };
+
+    const [languageCollapse, setLanguageCollapse] = useState(false);
+    const handleLanguageClick = () => {
+        setLanguageCollapse(!languageCollapse);
+    };
+
+    return (
+        <Container ref={anchor} container spacing={2}>
+            <Grid
+                xs={12}
+                sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }}
+            >
+                <StyledImage
+                    src={AFFiNETextLogo}
+                    alt="affine"
+                    onClick={() => navigate('/')}
+                />
+                <div>
+                    <Button
+                        variant="plain"
+                        onClick={() =>
+                            window.open(
+                                'https://github.com/toeverything/AFFiNE'
+                            )
+                        }
+                    >
+                        <GitHubIcon />
+                    </Button>
+                    <Button onClick={handleDrawerOpenState} variant="plain">
+                        {openedDrawer ? <Close /> : <Menu />}
+                    </Button>
+                </div>
+            </Grid>
+            <Drawer
+                anchor="top"
+                open={openedDrawer}
+                onClose={() => setDrawerState(false)}
+            >
+                <StyledDrawerContainer>
+                    <List>
+                        <ListItemButton onClick={() => navigate('/aboutus')}>
+                            <ListItemText primary={t('AboutUs') as string} />
+                        </ListItemButton>
+                        <ListItemButton
+                            onClick={() =>
+                                window.open('https://blog.affine.pro')
+                            }
+                        >
+                            <ListItemText primary={t('Blog') as string} />
+                        </ListItemButton>
+                        <ListItemButton
+                            onClick={() =>
+                                window.open('https://docs.affine.pro/')
+                            }
+                        >
+                            <ListItemText primary={t('Docs') as string} />
+                        </ListItemButton>
+                        <ListItemButton
+                            onClick={() =>
+                                window.open('https://feedback.affine.pro/')
+                            }
+                        >
+                            <ListItemText primary={t('Feedback') as string} />
+                        </ListItemButton>
+                        <ListItemButton onClick={handleContactUsClick}>
+                            <ListItemText primary={t('ContactUs') as string} />
+                            {contactUsCollapse ? (
+                                <ExpandLess />
+                            ) : (
+                                <ExpandMore />
+                            )}
+                        </ListItemButton>
+                        <Collapse
+                            in={contactUsCollapse}
+                            timeout="auto"
+                            unmountOnExit
+                        >
+                            <ListItemButton
+                                onClick={() =>
+                                    window.open('https://discord.gg/Arn7TqJBvG')
+                                }
+                            >
+                                <ListItemText primary="Discord" />
+                            </ListItemButton>
+                            <ListItemButton
+                                onClick={() =>
+                                    window.open('https://t.me/affineworkos')
+                                }
+                            >
+                                <ListItemText primary="Telegram" />
+                            </ListItemButton>
+                            <ListItemButton
+                                onClick={() =>
+                                    window.open(
+                                        'https://www.reddit.com/r/Affine/'
+                                    )
+                                }
+                            >
+                                <ListItemText primary="Reddit" />
+                            </ListItemButton>
+                            <ListItemButton
+                                onClick={() =>
+                                    window.open(
+                                        'https://medium.com/@affineworkos'
+                                    )
+                                }
+                            >
+                                <ListItemText primary="Medium" />
+                            </ListItemButton>
+                            <ListItemButton
+                                onClick={() =>
+                                    window.open(
+                                        'mailto:contact@toeverything.info'
+                                    )
+                                }
+                            >
+                                <ListItemText primary="Email" />
+                            </ListItemButton>
+                        </Collapse>
+                        <ListItemButton onClick={handleLanguageClick}>
+                            <ListItemText primary={t('language') as string} />
+                            {languageCollapse ? <ExpandLess /> : <ExpandMore />}
+                        </ListItemButton>
+                        <Collapse
+                            in={languageCollapse}
+                            timeout="auto"
+                            unmountOnExit
+                        >
+                            <ListItemButton
+                                onClick={() => i18n.changeLanguage('en')}
+                            >
+                                <ListItemText primary="English" />
+                                <Checkbox checked={i18n.language === 'en'} />
+                            </ListItemButton>
+                            <ListItemButton
+                                onClick={() => i18n.changeLanguage('zh')}
+                            >
+                                <ListItemText primary="简体中文" />
+                                <Checkbox checked={i18n.language === 'zh'} />
+                            </ListItemButton>
+                        </Collapse>
+                    </List>
+                </StyledDrawerContainer>
+            </Drawer>
+        </Container>
+    );
+};
+
+const Container = styled(Grid)({
+    position: 'fixed',
+    top: 0,
+    left: '50%',
+    transform: 'translateX(-50%)',
+    width: '100%',
+    paddingTop: '1em',
+    backgroundColor: '#fff',
+    zIndex: 1500,
+    maxWidth: '1440px',
+    margin: 'auto',
+    marginTop: '0 !important',
+});
+
+const StyledImage = styled('img')({
+    height: '24px',
+    marginRight: '16px',
+    cursor: 'pointer',
+});
+
+const StyledDrawerContainer = styled('div')({
+    paddingTop: '72px',
+});

apps/venus/src/app/i18n/resources/en.json

@@ -10,6 +10,7 @@
         "Alternative": "Alternative",
         "Check GitHub": "Check GitHub",
         "Try it Online": "Try it Online",
+        "language": "Language",
         "description1": {
             "part1": "Affine is the next-generation collaborative knowledge base for professionals.",
             "part2": "It's not just a collection of Docs, whiteboard, and tables.",

apps/venus/src/app/i18n/resources/zh.json

@@ -10,6 +10,7 @@
         "Alternative": "的另一种选择",
         "Check GitHub": "GitHub中查看",
         "Try it Online": "在线试用",
+        "language": "语言",
         "description1": {
             "part1": "Affine是面向专业人士的下一代协同知识库",
             "part2": "它不仅仅是一个文档、白板和表格的集合。",