From f82d30f8c81da7249aa1046e9974a6b436ceec50 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Thu, 26 May 2022 10:04:14 +0800
Subject: [PATCH] client: update header layout

---
 .../layouts/router-header/index.module.scss   | 13 ---
 .../src/layouts/router-header/index.tsx       | 95 ++++++++++---------
 2 files changed, 49 insertions(+), 59 deletions(-)

diff --git a/packages/client/src/layouts/router-header/index.module.scss b/packages/client/src/layouts/router-header/index.module.scss
index 4d31ec37..d6929757 100644
--- a/packages/client/src/layouts/router-header/index.module.scss
+++ b/packages/client/src/layouts/router-header/index.module.scss
@@ -40,16 +40,3 @@
     }
   }
 }
-
-.mobileHeader {
-  display: flex;
-  width: 100%;
-  height: 60px;
-  padding-right: 24px;
-  padding-left: 24px;
-  border-right: none;
-  border-bottom: 1px solid var(--semi-color-border);
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-}
diff --git a/packages/client/src/layouts/router-header/index.tsx b/packages/client/src/layouts/router-header/index.tsx
index c960faaa..d9222d77 100644
--- a/packages/client/src/layouts/router-header/index.tsx
+++ b/packages/client/src/layouts/router-header/index.tsx
@@ -12,7 +12,6 @@ import { useWindowSize } from 'hooks/use-window-size';
 import Router, { useRouter } from 'next/router';
 import React from 'react';
 
-import styles from './index.module.scss';
 import { Recent, RecentModal } from './recent';
 import { Wiki, WikiModal } from './wiki';
 
@@ -77,51 +76,55 @@ export const RouterHeader: React.FC = () => {
   return (
     <SemiHeader>
       {isMobile ? (
-        <div className={styles.mobileHeader}>
-          <Space>
-            <LogoImage />
-            <LogoText />
-            <RecentModal visible={recentModalVisible} toggleVisible={toggleRecentModalVisible} />
-            <WikiModal visible={wikiModalVisible} toggleVisible={toggleWikiModalVisible} />
-            <Dropdown
-              trigger="click"
-              position="bottomRight"
-              visible={dropdownVisible}
-              onVisibleChange={toggleDropdownVisible}
-              render={
-                // @ts-ignore
-                <Dropdown.Menu onClick={toggleDropdownVisible}>
-                  {menus.slice(0, 1).map((menu) => {
-                    return (
-                      <Dropdown.Item key={menu.itemKey} onClick={menu.onClick}>
-                        {menu.text}
-                      </Dropdown.Item>
-                    );
-                  })}
-                  <Dropdown.Item onClick={toggleRecentModalVisible}>最近</Dropdown.Item>
-                  <Dropdown.Item onClick={toggleWikiModalVisible}>知识库</Dropdown.Item>
-                  {menus.slice(3).map((menu) => {
-                    return (
-                      <Dropdown.Item key={menu.itemKey} onClick={menu.onClick}>
-                        {menu.text}
-                      </Dropdown.Item>
-                    );
-                  })}
-                </Dropdown.Menu>
-              }
-            >
-              <Button icon={<IconMenu />} type="tertiary" theme="borderless" onMouseDown={toggleDropdownVisible} />
-            </Dropdown>
-          </Space>
-
-          <Space>
-            <WikiOrDocumentCreator />
-            <Search />
-            <Message />
-            <Theme />
-            <User />
-          </Space>
-        </div>
+        <Nav
+          mode="horizontal"
+          style={{ overflow: 'auto' }}
+          header={
+            <Space>
+              <LogoImage />
+              <RecentModal visible={recentModalVisible} toggleVisible={toggleRecentModalVisible} />
+              <WikiModal visible={wikiModalVisible} toggleVisible={toggleWikiModalVisible} />
+              <Dropdown
+                trigger="click"
+                position="bottomRight"
+                visible={dropdownVisible}
+                onVisibleChange={toggleDropdownVisible}
+                render={
+                  // @ts-ignore
+                  <Dropdown.Menu onClick={toggleDropdownVisible}>
+                    {menus.slice(0, 1).map((menu) => {
+                      return (
+                        <Dropdown.Item key={menu.itemKey} onClick={menu.onClick}>
+                          {menu.text}
+                        </Dropdown.Item>
+                      );
+                    })}
+                    <Dropdown.Item onClick={toggleRecentModalVisible}>最近</Dropdown.Item>
+                    <Dropdown.Item onClick={toggleWikiModalVisible}>知识库</Dropdown.Item>
+                    {menus.slice(3).map((menu) => {
+                      return (
+                        <Dropdown.Item key={menu.itemKey} onClick={menu.onClick}>
+                          {menu.text}
+                        </Dropdown.Item>
+                      );
+                    })}
+                  </Dropdown.Menu>
+                }
+              >
+                <Button icon={<IconMenu />} type="tertiary" theme="borderless" onMouseDown={toggleDropdownVisible} />
+              </Dropdown>
+            </Space>
+          }
+          footer={
+            <Space>
+              <WikiOrDocumentCreator />
+              <Search />
+              <Message />
+              <Theme />
+              <User />
+            </Space>
+          }
+        ></Nav>
       ) : (
         <Nav
           mode="horizontal"