client: update header layout

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;
-}

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,10 +76,12 @@ export const RouterHeader: React.FC = () => {
   return (
     <SemiHeader>
       {isMobile ? (
-        <div className={styles.mobileHeader}>
+        <Nav
+          mode="horizontal"
+          style={{ overflow: 'auto' }}
+          header={
             <Space>
               <LogoImage />
-            <LogoText />
               <RecentModal visible={recentModalVisible} toggleVisible={toggleRecentModalVisible} />
               <WikiModal visible={wikiModalVisible} toggleVisible={toggleWikiModalVisible} />
               <Dropdown
@@ -113,7 +114,8 @@ export const RouterHeader: React.FC = () => {
                 <Button icon={<IconMenu />} type="tertiary" theme="borderless" onMouseDown={toggleDropdownVisible} />
               </Dropdown>
             </Space>
-
+          }
+          footer={
             <Space>
               <WikiOrDocumentCreator />
               <Search />
@@ -121,7 +123,8 @@ export const RouterHeader: React.FC = () => {
               <Theme />
               <User />
             </Space>
-        </div>
+          }
+        ></Nav>
       ) : (
         <Nav
           mode="horizontal"