From c41407f783e8b8420b754f7d32152d1b05d2d57a Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Thu, 11 Jul 2024 17:45:30 +0800
Subject: [PATCH] 12.0 change app structure (#6335)

* 01 change app structure

* 02 change setting page

* 03 optimize header style

* 04 change app mobile side panel logo
---
 frontend/src/app.js                           |  78 ++++++-------
 .../common}/event-bus-type.js                 |   4 +
 .../utils => components/common}/event-bus.js  |   0
 frontend/src/components/header.css            |   5 +
 frontend/src/components/header.js             |  12 +-
 frontend/src/components/logo.js               |  11 +-
 .../src/components/main-content-wrapper.js    |  22 ----
 frontend/src/components/side-panel.js         |  15 ++-
 .../src/components/toolbar/common-toolbar.js  |  30 ++++-
 .../src/components/toolbar/general-toolbar.js |  36 ------
 .../user-settings/setting-side-panel.js       |  31 ++++++
 .../setting-top-toolbar.js}                   |   8 +-
 frontend/src/css/layout.css                   |  15 ---
 frontend/src/css/repo-folder-trash.css        |   4 +-
 frontend/src/css/repo-history.css             |   4 +-
 frontend/src/css/repo-snapshot.css            |   4 +-
 frontend/src/css/search.css                   |   6 +-
 frontend/src/css/shared-dir-view.css          |  12 +-
 frontend/src/css/tc-accept.css                |   7 +-
 frontend/src/css/upload-link.css              |  11 +-
 .../popover/groupby-popover/index.jsx         |   2 +-
 .../metadata/metadata-view/constants/index.js |   2 +-
 .../src/metadata/metadata-view/context.js     |   2 +-
 frontend/src/pages/groups/group-view.js       |   9 --
 .../src/pages/invitations/invitations-view.js |   7 --
 .../lib-content-view/lib-content-toolbar.js   |   1 -
 .../lib-content-view/lib-content-view.js      |  57 +++-------
 frontend/src/pages/libraries/index.js         |  19 +---
 frontend/src/pages/my-libs/my-libs-deleted.js |   8 --
 frontend/src/pages/my-libs/my-libs.js         |  14 ---
 frontend/src/pages/share-admin/share-links.js |  13 ---
 .../src/pages/share-admin/upload-links.js     |  12 --
 .../pages/share-with-ocm/remote-dir-topbar.js |  30 -----
 .../pages/share-with-ocm/remote-dir-view.js   |  19 +---
 frontend/src/pages/shared-with-all/index.js   |   8 --
 frontend/src/pages/wikis/wikis.js             |  15 ---
 frontend/src/settings.js                      | 103 ++++++++----------
 media/css/seahub.css                          |  10 +-
 38 files changed, 238 insertions(+), 408 deletions(-)
 rename frontend/src/{metadata/metadata-view/constants => components/common}/event-bus-type.js (93%)
 rename frontend/src/{metadata/metadata-view/utils => components/common}/event-bus.js (100%)
 create mode 100644 frontend/src/components/header.css
 delete mode 100644 frontend/src/components/main-content-wrapper.js
 delete mode 100644 frontend/src/components/toolbar/general-toolbar.js
 create mode 100644 frontend/src/components/user-settings/setting-side-panel.js
 rename frontend/src/components/{toolbar/top-toolbar.js => user-settings/setting-top-toolbar.js} (83%)
 delete mode 100644 frontend/src/pages/share-with-ocm/remote-dir-topbar.js

diff --git a/frontend/src/app.js b/frontend/src/app.js
index 06ba0309f3..a9e44a307a 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -6,8 +6,8 @@ import { Modal } from 'reactstrap';
 import { siteRoot } from './utils/constants';
 import { Utils } from './utils/utils';
 import SystemNotification from './components/system-notification';
-//import Header from './components/header';
-import Logo from './components/logo';
+import EventBus from './components/common/event-bus';
+import Header from './components/header';
 import SidePanel from './components/side-panel';
 import MainPanel from './components/main-panel';
 import FilesActivities from './pages/dashboard/files-activities';
@@ -30,22 +30,11 @@ import Group from './pages/groups/group-view';
 import InvitationsView from './pages/invitations/invitations-view';
 import Wikis from './pages/wikis/wikis';
 import Libraries from './pages/libraries';
-import MainContentWrapper from './components/main-content-wrapper';
 
 import './css/layout.css';
 import './css/toolbar.css';
 import './css/search.css';
 
-const FilesActivitiesWrapper = MainContentWrapper(FilesActivities);
-const MyFileActivitiesWrapper = MainContentWrapper(MyFileActivities);
-const StarredWrapper = MainContentWrapper(Starred);
-const LinkedDevicesWrapper = MainContentWrapper(LinkedDevices);
-const SharedLibrariesWrapper = MainContentWrapper(SharedLibraries);
-const SharedWithOCMWrapper = MainContentWrapper(ShareWithOCM);
-const OCMViaWebdavWrapper = MainContentWrapper(OCMViaWebdav);
-const InvitationsViewWrapper = MainContentWrapper(InvitationsView);
-const ShareAdminLibrariesWrapper = MainContentWrapper(ShareAdminLibraries);
-const ShareAdminFoldersWrapper = MainContentWrapper(ShareAdminFolders);
 
 class App extends Component {
 
@@ -62,6 +51,8 @@ class App extends Component {
     };
     this.dirViewPanels = ['libraries', 'my-libs', 'shared-libs', 'org']; // and group
     window.onpopstate = this.onpopstate;
+    const eventBus = new EventBus();
+    this.eventBus = eventBus;
   }
 
   onpopstate = (event) => {
@@ -222,52 +213,55 @@ class App extends Component {
     return (
       <React.Fragment>
         <SystemNotification />
-        {/*<Header
+        <Header
           isSidePanelClosed={isSidePanelClosed}
           onCloseSidePanel={this.onCloseSidePanel}
           onShowSidePanel={this.onShowSidePanel}
           onSearchedClick={this.onSearchedClick}
+          eventBus={this.eventBus}
         />
-        */}
         <div id="main" className="user-panel">
-          <Logo onCloseSidePanel={this.onCloseSidePanel} positioned={true} />
           <SidePanel
             isSidePanelClosed={isSidePanelClosed}
             isSidePanelFolded={isSidePanelFolded}
             onCloseSidePanel={this.onCloseSidePanel}
             currentTab={currentTab}
             tabItemClick={this.tabItemClick}
-            showLogoOnlyInMobile={true}
             toggleFoldSideNav={this.toggleFoldSideNav}
           />
           <MainPanel>
             <Router className="reach-router">
-              <Libraries path={ siteRoot } onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <Libraries path={ siteRoot + 'libraries' } onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <FilesActivitiesWrapper path={siteRoot + 'dashboard'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <MyFileActivitiesWrapper path={siteRoot + 'my-activities'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <StarredWrapper path={siteRoot + 'starred'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <LinkedDevicesWrapper path={siteRoot + 'linked-devices'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <ShareAdminLibrariesWrapper path={siteRoot + 'share-admin-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <ShareAdminFoldersWrapper path={siteRoot + 'share-admin-folders'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <ShareAdminShareLinks path={siteRoot + 'share-admin-share-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <ShareAdminUploadLinks path={siteRoot + 'share-admin-upload-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <SharedLibrariesWrapper path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <SharedWithOCMWrapper path={siteRoot + 'shared-with-ocm'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <OCMViaWebdavWrapper path={siteRoot + 'ocm-via-webdav'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <MyLibraries path={siteRoot + 'my-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              <MyLibDeleted path={siteRoot + 'my-libs/deleted/'} onSearchedClick={this.onSearchedClick} />
-              <LibContentView path={siteRoot + 'library/:repoID/*'} pathPrefix={this.state.pathPrefix} isSidePanelFolded={isSidePanelFolded} onMenuClick={this.onShowSidePanel} onTabNavClick={this.tabItemClick}/>
-              <OCMRepoDir path={siteRoot + 'remote-library/:providerID/:repoID/*'} pathPrefix={this.state.pathPrefix} onMenuClick={this.onShowSidePanel} onTabNavClick={this.tabItemClick}/>
-              <Group
-                path={siteRoot + 'group/:groupID'}
-                onShowSidePanel={this.onShowSidePanel}
-                onSearchedClick={this.onSearchedClick}
-                onGroupChanged={this.onGroupChanged}
+              <Libraries path={siteRoot} />
+              <Libraries path={siteRoot + 'libraries'} />
+              <MyLibraries path={siteRoot + 'my-libs'} />
+              <MyLibDeleted path={siteRoot + 'my-libs/deleted/'} />
+              <ShareAdminShareLinks path={siteRoot + 'share-admin-share-links'} />
+              <ShareAdminUploadLinks path={siteRoot + 'share-admin-upload-links'} />
+              <PublicSharedView path={siteRoot + 'org/'} />
+              <Wikis path={siteRoot + 'published'} />
+              <Starred path={siteRoot + 'starred'} />
+              <InvitationsView path={siteRoot + 'invitations/'} />
+              <FilesActivities path={siteRoot + 'dashboard'} />
+              <MyFileActivities path={siteRoot + 'my-activities'} />
+              <Group path={siteRoot + 'group/:groupID'} onGroupChanged={this.onGroupChanged} />
+              <LinkedDevices path={siteRoot + 'linked-devices'} />
+              <ShareAdminLibraries path={siteRoot + 'share-admin-libs'} />
+              <ShareAdminFolders path={siteRoot + 'share-admin-folders'} />
+              <SharedLibraries path={siteRoot + 'shared-libs'} />
+              <ShareWithOCM path={siteRoot + 'shared-with-ocm'} />
+              <OCMViaWebdav path={siteRoot + 'ocm-via-webdav'} />
+              <OCMRepoDir
+                path={siteRoot + 'remote-library/:providerID/:repoID/*'}
+                pathPrefix={this.state.pathPrefix}
+                onTabNavClick={this.tabItemClick}
+              />
+              <LibContentView
+                path={siteRoot + 'library/:repoID/*'}
+                pathPrefix={this.state.pathPrefix}
+                isSidePanelFolded={isSidePanelFolded}
+                onTabNavClick={this.tabItemClick}
+                eventBus={this.eventBus}
               />
-              <Wikis path={siteRoot + 'published'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
-              <PublicSharedView path={siteRoot + 'org/'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} onTabNavClick={this.tabItemClick}/>
-              <InvitationsViewWrapper path={siteRoot + 'invitations/'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
             </Router>
           </MainPanel>
           <MediaQuery query="(max-width: 767.8px)">
diff --git a/frontend/src/metadata/metadata-view/constants/event-bus-type.js b/frontend/src/components/common/event-bus-type.js
similarity index 93%
rename from frontend/src/metadata/metadata-view/constants/event-bus-type.js
rename to frontend/src/components/common/event-bus-type.js
index 9a6faf0518..9be0551074 100644
--- a/frontend/src/metadata/metadata-view/constants/event-bus-type.js
+++ b/frontend/src/components/common/event-bus-type.js
@@ -1,4 +1,5 @@
 export const EVENT_BUS_TYPE = {
+  // metadata
   QUERY_COLLABORATORS: 'query-collaborators',
   QUERY_COLLABORATOR: 'query-collaborator',
   UPDATE_TABLE_ROWS: 'update-table-rows',
@@ -34,4 +35,7 @@ export const EVENT_BUS_TYPE = {
 
   // change
   VIEW_CHANGED: 'view_changed',
+
+  // library
+  CURRENT_LIBRARY_CHANGED: 'current_library_changed',
 };
diff --git a/frontend/src/metadata/metadata-view/utils/event-bus.js b/frontend/src/components/common/event-bus.js
similarity index 100%
rename from frontend/src/metadata/metadata-view/utils/event-bus.js
rename to frontend/src/components/common/event-bus.js
diff --git a/frontend/src/components/header.css b/frontend/src/components/header.css
new file mode 100644
index 0000000000..c8f7d17b2b
--- /dev/null
+++ b/frontend/src/components/header.css
@@ -0,0 +1,5 @@
+.top-header {
+  background-color: #f8fafd;
+  border-bottom: 1px solid #eee;
+  padding: .5rem 1rem;
+}
diff --git a/frontend/src/components/header.js b/frontend/src/components/header.js
index 17d84a04ac..1cb0109e6f 100644
--- a/frontend/src/components/header.js
+++ b/frontend/src/components/header.js
@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import Logo from './logo';
 import CommonToolbar from './toolbar/common-toolbar';
 
+import './header.css';
+
 const propTypes = {
+  children: PropTypes.object,
+  eventBus: PropTypes.object.isRequired,
   isSidePanelClosed: PropTypes.bool,
   onCloseSidePanel: PropTypes.func,
   onShowSidePanel: PropTypes.func,
@@ -15,21 +19,23 @@ const propTypes = {
 class Header extends React.Component {
 
   render() {
-    const { onShowSidePanel, onSearchedClick, showSearch } = this.props;
+    const { onShowSidePanel, onSearchedClick, showSearch, children } = this.props;
     return (
-      <div id="header" className="d-flex justify-content-between py-2 px-4">
+      <div id="header" className="top-header d-flex justify-content-between flex-shrink-0">
         <div className={'flex-shrink-0 d-none d-md-flex'}>
           <Logo onCloseSidePanel={this.props.onCloseSidePanel} />
         </div>
-        <div className="flex-shrink-0 d-flex flex-fill">
+        <div className={`flex-shrink-0 d-flex flex-fill ${children ? 'border-left-show' : ''}`}>
           <div className="cur-view-toolbar">
             <span title="Side Nav Menu" onClick={onShowSidePanel} className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none">
             </span>
+            {children}
           </div>
           <CommonToolbar
             showSearch={showSearch}
             searchPlaceholder={this.props.searchPlaceholder}
             onSearchedClick={onSearchedClick}
+            eventBus={this.props.eventBus}
           />
         </div>
       </div>
diff --git a/frontend/src/components/logo.js b/frontend/src/components/logo.js
index 1e7fefc215..82aced26c0 100644
--- a/frontend/src/components/logo.js
+++ b/frontend/src/components/logo.js
@@ -1,13 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from '../utils/constants';
-import { Utils } from '../utils/utils';
 
 const propTypes = {
   onCloseSidePanel: PropTypes.func,
   showCloseSidePanelIcon: PropTypes.bool,
-  positioned: PropTypes.bool,
-  showLogoOnlyInMobile: PropTypes.bool
 };
 
 class Logo extends React.Component {
@@ -17,14 +14,8 @@ class Logo extends React.Component {
   };
 
   render() {
-    const { positioned, showLogoOnlyInMobile } = this.props;
-
-    if (showLogoOnlyInMobile && Utils.isDesktop()) {
-      return null;
-    }
-
     return (
-      <div className={`top-logo ${positioned ? 'd-none d-md-block positioned-top-logo' : ''}`}>
+      <div className='top-logo'>
         <a href={siteRoot} id="logo">
           <img src={logoPath.indexOf('image-view') != -1 ? logoPath : mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" />
         </a>
diff --git a/frontend/src/components/main-content-wrapper.js b/frontend/src/components/main-content-wrapper.js
deleted file mode 100644
index 42e55afdbd..0000000000
--- a/frontend/src/components/main-content-wrapper.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { Fragment } from 'react';
-import GeneralToolBar from './toolbar/general-toolbar';
-
-const MainContentWrapper = (WrapperedComponent) => {
-  return class Wrapper extends React.Component {
-
-    constructor(props) {
-      super(props);
-    }
-
-    render() {
-      return (
-        <Fragment>
-          <GeneralToolBar {...this.props} />
-          <WrapperedComponent {...this.props} />
-        </Fragment>
-      );
-    }
-  };
-};
-
-export default MainContentWrapper;
diff --git a/frontend/src/components/side-panel.js b/frontend/src/components/side-panel.js
index 1ff78f1376..350badc55b 100644
--- a/frontend/src/components/side-panel.js
+++ b/frontend/src/components/side-panel.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import MediaQuery from 'react-responsive';
 import Logo from './logo';
 import MainSideNav from './main-side-nav';
 import { SIDE_PANEL_FOLDED_WIDTH } from '../constants';
@@ -11,7 +12,6 @@ const propTypes = {
   onCloseSidePanel: PropTypes.func,
   tabItemClick: PropTypes.func,
   children: PropTypes.object,
-  showLogoOnlyInMobile: PropTypes.bool,
   isSidePanelFolded: PropTypes.bool,
   toggleFoldSideNav: PropTypes.func
 };
@@ -19,16 +19,15 @@ const propTypes = {
 class SidePanel extends React.Component {
 
   render() {
-    const { children, isSidePanelFolded, showLogoOnlyInMobile = false } = this.props;
+    const { children, isSidePanelFolded } = this.props;
     const style = isSidePanelFolded ? { flexBasis: SIDE_PANEL_FOLDED_WIDTH } : {};
     return (
       <div className={classnames('side-panel', { 'side-panel-folded': isSidePanelFolded, 'left-zero': !this.props.isSidePanelClosed })} style={style}>
-        <div className={'side-panel-north'}>
-          <Logo
-            onCloseSidePanel={this.props.onCloseSidePanel}
-            showLogoOnlyInMobile={showLogoOnlyInMobile}
-          />
-        </div>
+        <MediaQuery query="(max-width: 767.8px)">
+          <div className='side-panel-north'>
+            <Logo onCloseSidePanel={this.props.onCloseSidePanel} />
+          </div>
+        </MediaQuery>
         <div className="side-panel-center">
           {children ? children : (
             <MainSideNav
diff --git a/frontend/src/components/toolbar/common-toolbar.js b/frontend/src/components/toolbar/common-toolbar.js
index c4686473be..28532cfaaa 100644
--- a/frontend/src/components/toolbar/common-toolbar.js
+++ b/frontend/src/components/toolbar/common-toolbar.js
@@ -7,6 +7,7 @@ import SearchByName from '../search/search-by-name';
 import Notification from '../common/notification';
 import Account from '../common/account';
 import Logout from '../common/logout';
+import { EVENT_BUS_TYPE } from '../common/event-bus-type';
 
 const propTypes = {
   repoID: PropTypes.string,
@@ -16,14 +17,41 @@ const propTypes = {
   onSearchedClick: PropTypes.func,
   searchPlaceholder: PropTypes.string,
   currentRepoInfo: PropTypes.object,
+  eventBus: PropTypes.object,
   isViewFile: PropTypes.bool,
   showSearch: PropTypes.bool
 };
 
 class CommonToolbar extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      repoID: props.repoID,
+      repoName: props.repoName,
+      isLibView: props.isLibView,
+      path: props.path,
+      isViewFile: props.isViewFile,
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.eventBus) {
+      this.unsubscribeLibChange = this.props.eventBus.subscribe(EVENT_BUS_TYPE.CURRENT_LIBRARY_CHANGED, this.onRepoChange);
+    }
+  }
+
+  componentWillUnmount() {
+    this.unsubscribeLibChange && this.unsubscribeLibChange();
+  }
+
+  onRepoChange = ({ repoID, repoName, isLibView, path, isViewFile }) => {
+    this.setState({ repoID, repoName, isLibView, path, isViewFile });
+  };
+
   renderSearch = () => {
-    const { repoID, repoName, isLibView, searchPlaceholder, path, isViewFile } = this.props;
+    const { repoID, repoName, isLibView, path, isViewFile } = this.state;
+    const { searchPlaceholder } = this.props;
     const placeholder = searchPlaceholder || gettext('Search files');
 
     if (isPro) {
diff --git a/frontend/src/components/toolbar/general-toolbar.js b/frontend/src/components/toolbar/general-toolbar.js
deleted file mode 100644
index ddd93c0457..0000000000
--- a/frontend/src/components/toolbar/general-toolbar.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import CommonToolbar from './common-toolbar';
-
-const propTypes = {
-  searchPlaceholder: PropTypes.string,
-  onShowSidePanel: PropTypes.func.isRequired,
-  onSearchedClick: PropTypes.func.isRequired,
-};
-
-class GeneralToolbar extends React.Component {
-
-  render() {
-    // todo get repoID?
-    let { onShowSidePanel, onSearchedClick } = this.props;
-    return (
-      <div className="main-panel-north">
-        <div className="cur-view-toolbar">
-          <span
-            className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none"
-            title="Side Nav Menu"
-            onClick={onShowSidePanel}>
-          </span>
-        </div>
-        <CommonToolbar
-          searchPlaceholder={this.props.searchPlaceholder}
-          onSearchedClick={onSearchedClick}
-        />
-      </div>
-    );
-  }
-}
-
-GeneralToolbar.propTypes = propTypes;
-
-export default GeneralToolbar;
diff --git a/frontend/src/components/user-settings/setting-side-panel.js b/frontend/src/components/user-settings/setting-side-panel.js
new file mode 100644
index 0000000000..71041a01ce
--- /dev/null
+++ b/frontend/src/components/user-settings/setting-side-panel.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Logo from '../logo';
+import classnames from 'classnames';
+import SideNav from './side-nav';
+
+const propTypes = {
+  isSidePanelClosed: PropTypes.bool,
+  curItemID: PropTypes.string.isRequired,
+  data: PropTypes.array.isRequired,
+  onCloseSidePanel: PropTypes.func.isRequired,
+};
+
+class SettingSidePanel extends React.Component {
+  render() {
+    return (
+      <div className={classnames('side-panel', { 'left-zero': !this.props.isSidePanelClosed })}>
+        <div className="side-panel-north">
+          <Logo onCloseSidePanel={this.props.onCloseSidePanel}/>
+        </div>
+        <div className="side-panel-center">
+          <SideNav data={this.props.data} curItemID={this.props.curItemID} />
+        </div>
+      </div>
+    );
+  }
+}
+
+SettingSidePanel.propTypes = propTypes;
+
+export default SettingSidePanel;
diff --git a/frontend/src/components/toolbar/top-toolbar.js b/frontend/src/components/user-settings/setting-top-toolbar.js
similarity index 83%
rename from frontend/src/components/toolbar/top-toolbar.js
rename to frontend/src/components/user-settings/setting-top-toolbar.js
index 4e0fa8a771..a4a88c3b8e 100644
--- a/frontend/src/components/toolbar/top-toolbar.js
+++ b/frontend/src/components/user-settings/setting-top-toolbar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import CommonToolbar from './common-toolbar';
+import CommonToolbar from '../toolbar/common-toolbar';
 
 const propTypes = {
   onShowSidePanel: PropTypes.func,
@@ -10,7 +10,7 @@ const propTypes = {
   showSearch: PropTypes.bool
 };
 
-class TopToolbar extends React.Component {
+class SettingTopToolbar extends React.Component {
 
   render() {
     const { onShowSidePanel, onSearchedClick, children, showSearch } = this.props;
@@ -31,6 +31,6 @@ class TopToolbar extends React.Component {
   }
 }
 
-TopToolbar.propTypes = propTypes;
+SettingTopToolbar.propTypes = propTypes;
 
-export default TopToolbar;
+export default SettingTopToolbar;
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css
index 6a24321a0a..b02cc698ab 100644
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -5,14 +5,6 @@
   flex-direction: column;
 }
 
-/* for top bottom layout*/
-#header {
-  background: #fff;
-  border-bottom: 1px solid #eee;
-  box-shadow: 0 2px 4px rgba(0,0,0, 10%);
-  z-index: 100;
-}
-
 /* for left right layout */
 #main {
   flex: 1;
@@ -37,13 +29,6 @@
   position: relative;
 }
 
-.positioned-top-logo {
-  position: absolute;
-  top: .5rem;
-  left: 1rem;
-  z-index: 101;
-}
-
 .main-panel {
   flex: 1 0 78%;
   display: flex;
diff --git a/frontend/src/css/repo-folder-trash.css b/frontend/src/css/repo-folder-trash.css
index 5336626290..9a62b63502 100644
--- a/frontend/src/css/repo-folder-trash.css
+++ b/frontend/src/css/repo-folder-trash.css
@@ -7,8 +7,8 @@ body {
 }
 
 .top-header {
-  background: #f4f4f7;
-  border-bottom: 1px solid #e8e8e8;
+  background-color: #f8fafd;
+  border-bottom: 1px solid #eee;
   padding: .5rem 1rem;
   flex-shrink: 0;
 }
diff --git a/frontend/src/css/repo-history.css b/frontend/src/css/repo-history.css
index 4da6422fca..b30cc6cd92 100644
--- a/frontend/src/css/repo-history.css
+++ b/frontend/src/css/repo-history.css
@@ -7,8 +7,8 @@ body {
 }
 
 .top-header {
-  background: #f4f4f7;
-  border-bottom: 1px solid #e8e8e8;
+  background-color: #f8fafd;
+  border-bottom: 1px solid #eee;
   padding: .5rem 1rem;
   flex-shrink: 0;
 }
diff --git a/frontend/src/css/repo-snapshot.css b/frontend/src/css/repo-snapshot.css
index 6b9f496edb..704cb488d2 100644
--- a/frontend/src/css/repo-snapshot.css
+++ b/frontend/src/css/repo-snapshot.css
@@ -7,8 +7,8 @@ body {
 }
 
 .top-header {
-  background: #f4f4f7;
-  border-bottom: 1px solid #e8e8e8;
+  background-color: #f8fafd;
+  border-bottom: 1px solid #eee;
   padding: .5rem 1rem;
   flex-shrink: 0;
 }
diff --git a/frontend/src/css/search.css b/frontend/src/css/search.css
index d41347590b..70bdb28a1b 100644
--- a/frontend/src/css/search.css
+++ b/frontend/src/css/search.css
@@ -5,12 +5,12 @@
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.2);
-  z-index: 1;
+  z-index: 3;
 }
 
 .search-container {
   position: relative;
-  z-index: 2;
+  z-index: 4;
 }
 
 .search-container.show {
@@ -298,7 +298,7 @@
 
   .search-container {
     position: fixed;
-    z-index: 2;
+    z-index: 4;
     top: 5rem;
     left: 0;
     right: 0;
diff --git a/frontend/src/css/shared-dir-view.css b/frontend/src/css/shared-dir-view.css
index 7354ce72cf..4847c67ed9 100644
--- a/frontend/src/css/shared-dir-view.css
+++ b/frontend/src/css/shared-dir-view.css
@@ -1,22 +1,26 @@
 body {
   overflow: hidden;
 }
+
 #wrapper {
   height: 100%;
 }
+
 .top-header {
-  background: #f4f4f7;
-  border-bottom: 1px solid #e8e8e8;
+  background-color: #f8fafd;
+  border-bottom: 1px solid #eee;
   padding: 8px 16px 4px;
   height: 53px;
   flex-shrink: 0;
 }
+
 .shared-dir-view-main {
   width: calc(100% - 40px);
   max-width: 950px;
   padding: 15px 0 40px;
   margin: 0 auto;
 }
+
 .op-bar {
   padding: 9px 10px;
   background: #f2f2f2;
@@ -34,18 +38,22 @@ body {
   font-size: 18px;
   border-radius: 2px;
 }
+
 .sf-view-mode-btn.current-mode {
   background-color: #ccc;
   color: #fff;
 }
+
 .shared-dir-op-btn {
   height: 30px;
   line-height: 30px;
   padding: 0 10px;
 }
+
 .shared-dir-upload-btn {
   border: 1px solid #ccc;
 }
+
 .grid-item .action-icon {
   position: absolute;
   top: 10px;
diff --git a/frontend/src/css/tc-accept.css b/frontend/src/css/tc-accept.css
index 81ca81fc60..df3fefa90e 100644
--- a/frontend/src/css/tc-accept.css
+++ b/frontend/src/css/tc-accept.css
@@ -1,15 +1,18 @@
 body {
   overflow: hidden;
 }
+
 #wrapper {
   height: 100%;
 }
+
 .top-header {
-  background: #f4f4f7;
-  border-bottom: 1px solid #e8e8e8;
+  background-color: #f8fafd;
+  border-bottom: 1px solid #eee;
   padding: .5rem 1rem;
   flex-shrink: 0;
 }
+
 .content {
   max-width: 950px;
 }
diff --git a/frontend/src/css/upload-link.css b/frontend/src/css/upload-link.css
index e5c47319a8..379ab1ae7b 100644
--- a/frontend/src/css/upload-link.css
+++ b/frontend/src/css/upload-link.css
@@ -1,12 +1,14 @@
 body {
   overflow: hidden;
 }
+
 #wrapper {
   height: 100%;
 }
+
 .top-header {
-  background: #f4f4f7;
-  border-bottom: 1px solid #e8e8e8;
+  background-color: #f8fafd;
+  border-bottom: 1px solid #eee;
   padding: .5rem 1rem;
   flex-shrink: 0;
 }
@@ -17,25 +19,30 @@ body {
   border: 1px solid #ddd;
   margin: 2em auto;
 }
+
 .shared-by .avatar {
   width: 20px;
   height: 20px;
 }
+
 #upload-link-panel .warning-icon {
   color: #f25041;
   font-size: 48px;
 }
+
 #upload-link-drop-zone {
   background: rgba(255, 152, 0, 0.1);
   border: 2px dashed #ff9800;
   border-radius: 4px;
   padding: 28px 0;
 }
+
 #upload-link-drop-zone .upload-icon {
   color: rgba(240, 159, 63, 0.8);
   font-size: 60px;
   line-height: 1;
 }
+
 .mh-2 {
   min-height: 2rem;
 }
diff --git a/frontend/src/metadata/metadata-view/components/popover/groupby-popover/index.jsx b/frontend/src/metadata/metadata-view/components/popover/groupby-popover/index.jsx
index 981d2709da..cc029c28bb 100644
--- a/frontend/src/metadata/metadata-view/components/popover/groupby-popover/index.jsx
+++ b/frontend/src/metadata/metadata-view/components/popover/groupby-popover/index.jsx
@@ -15,7 +15,7 @@ import GroupbyService from '../../services/groupby-service';
 import { isEsc } from '../../utils/hotkey';
 import { getEventClassName } from '../../utils/utils';
 import { generateDefaultGroupby, getDefaultCountType, getGroupbyColumns } from '../../../utils/groupby-utils';
-import eventBus from '../../../utils/event-bus';
+import eventBus from '../../../../../components/common/event-bus';
 import { GROUPBY_ACTION_TYPE, GROUPBY_DATE_GRANULARITY_LIST, GROUPBY_GEOLOCATION_GRANULARITY_LIST } from '../../constants/groupby';
 import { EVENT_BUS_TYPE } from '../../../constants';
 import { gettext } from '../../../utils';
diff --git a/frontend/src/metadata/metadata-view/constants/index.js b/frontend/src/metadata/metadata-view/constants/index.js
index fd4c77ea89..8e533a286d 100644
--- a/frontend/src/metadata/metadata-view/constants/index.js
+++ b/frontend/src/metadata/metadata-view/constants/index.js
@@ -1,5 +1,5 @@
 import { CellType } from '../_basic';
-import { EVENT_BUS_TYPE } from './event-bus-type';
+import { EVENT_BUS_TYPE } from '../../../components/common/event-bus-type';
 import TRANSFER_TYPES from './TransferTypes';
 
 export const CELL_NAVIGATION_MODE = {
diff --git a/frontend/src/metadata/metadata-view/context.js b/frontend/src/metadata/metadata-view/context.js
index d6a2d72ebb..c0ce991f61 100644
--- a/frontend/src/metadata/metadata-view/context.js
+++ b/frontend/src/metadata/metadata-view/context.js
@@ -1,6 +1,6 @@
 import metadataAPI from '../api';
 import { UserService, LocalStorage } from './_basic';
-import EventBus from './utils/event-bus';
+import EventBus from '../../components/common/event-bus';
 import { username } from '../../utils/constants';
 
 class Context {
diff --git a/frontend/src/pages/groups/group-view.js b/frontend/src/pages/groups/group-view.js
index 377c82a4b1..8c9846bc43 100644
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -10,7 +10,6 @@ import ModalPortal from '../../components/modal-portal';
 import Group from '../../models/group';
 import Repo from '../../models/repo';
 import toaster from '../../components/toast';
-import CommonToolbar from '../../components/toolbar/common-toolbar';
 import CreateRepoDialog from '../../components/dialog/create-repo-dialog';
 import GroupMembersDialog from '../../components/dialog/group-members-dialog';
 import DismissGroupDialog from '../../components/dialog/dismiss-group-dialog';
@@ -26,8 +25,6 @@ import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-tool
 import '../../css/group-view.css';
 
 const propTypes = {
-  onShowSidePanel: PropTypes.func.isRequired,
-  onSearchedClick: PropTypes.func.isRequired,
   onGroupChanged: PropTypes.func.isRequired,
   groupID: PropTypes.string,
 };
@@ -430,12 +427,6 @@ class GroupView extends React.Component {
     const opList = this.getOpList();
     return (
       <Fragment>
-        <div className="main-panel-north border-left-show">
-          <div className="cur-view-toolbar">
-            <span className="sf2-icon-menu side-nav-toggle d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
-          </div>
-          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
-        </div>
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path">
diff --git a/frontend/src/pages/invitations/invitations-view.js b/frontend/src/pages/invitations/invitations-view.js
index 7b1ccb04eb..8aa1214ded 100644
--- a/frontend/src/pages/invitations/invitations-view.js
+++ b/frontend/src/pages/invitations/invitations-view.js
@@ -300,11 +300,4 @@ Content.propTypes = {
   data: PropTypes.object.isRequired,
 };
 
-const InvitationsViewPropTypes = {
-  onShowSidePanel: PropTypes.func.isRequired,
-  onSearchedClick: PropTypes.func.isRequired,
-};
-
-InvitationsView.propTypes = InvitationsViewPropTypes;
-
 export default InvitationsView;
diff --git a/frontend/src/pages/lib-content-view/lib-content-toolbar.js b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
index 7f1b4d94f0..fd769c9acf 100644
--- a/frontend/src/pages/lib-content-view/lib-content-toolbar.js
+++ b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
@@ -29,7 +29,6 @@ class LibContentToolbar extends React.Component {
           repoName={this.props.repoName}
           currentRepoInfo={this.props.currentRepoInfo}
           onSearchedClick={this.props.onSearchedClick}
-          searchPlaceholder={gettext('Search files')}
         />
       </Fragment>
     );
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index b530de2d31..7618e564bf 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -16,17 +16,17 @@ import treeHelper from '../../components/tree-view/tree-helper';
 import toaster from '../../components/toast';
 import ModalPortal from '../../components/modal-portal';
 import LibDecryptDialog from '../../components/dialog/lib-decrypt-dialog';
-import LibContentToolbar from './lib-content-toolbar';
 import LibContentContainer from './lib-content-container';
 import FileUploader from '../../components/file-uploader/file-uploader';
 import CopyMoveDirentProgressDialog from '../../components/dialog/copy-move-dirent-progress-dialog';
 import DeleteFolderDialog from '../../components/dialog/delete-folder-dialog';
+import { EVENT_BUS_TYPE } from '../../components/common/event-bus-type';
 
 const propTypes = {
+  eventBus: PropTypes.object,
   isSidePanelFolded: PropTypes.bool,
   pathPrefix: PropTypes.array.isRequired,
   onTabNavClick: PropTypes.func.isRequired,
-  onMenuClick: PropTypes.func.isRequired,
   repoID: PropTypes.string,
 };
 
@@ -201,10 +201,24 @@ class LibContentView extends React.Component {
   componentWillUnmount() {
     window.onpopstate = this.oldonpopstate;
     collabServer.unwatchRepo(this.props.repoID, this.onRepoUpdateEvent);
+    this.props.eventBus.dispatch(EVENT_BUS_TYPE.CURRENT_LIBRARY_CHANGED, {
+      repoID: '',
+      repoName: '',
+      path: '',
+      isViewFile: false,
+      isLibView: false,
+    });
   }
 
   componentDidUpdate() {
     this.lastModifyTime = new Date();
+    this.props.eventBus.dispatch(EVENT_BUS_TYPE.CURRENT_LIBRARY_CHANGED, {
+      repoID: this.props.repoID,
+      repoName: this.state.repoName,
+      path: this.state.path,
+      isViewFile: this.state.isViewFile,
+      isLibView: true,
+    });
   }
 
   onpopstate = (event) => {
@@ -2027,45 +2041,6 @@ class LibContentView extends React.Component {
 
     return (
       <Fragment>
-        <div className="main-panel-north border-left-show">
-          <LibContentToolbar
-            isViewFile={this.state.isViewFile}
-            filePermission={this.state.filePermission}
-            fileTags={this.state.fileTags}
-            onFileTagChanged={this.onToolbarFileTagChanged}
-            onSideNavMenuClick={this.props.onMenuClick}
-            repoID={this.props.repoID}
-            path={this.state.path}
-            isDirentSelected={this.state.isDirentSelected}
-            selectedDirentList={this.state.selectedDirentList}
-            onItemsMove={this.onMoveItems}
-            onItemsCopy={this.onCopyItems}
-            onItemsDelete={this.onDeleteItems}
-            onItemRename={this.onMainPanelItemRename}
-            direntList={this.state.direntList}
-            repoName={this.state.repoName}
-            repoEncrypted={this.state.repoEncrypted}
-            isGroupOwnedRepo={this.state.isGroupOwnedRepo}
-            userPerm={this.state.userPerm}
-            showShareBtn={showShareBtn}
-            enableDirPrivateShare={enableDirPrivateShare}
-            onAddFile={this.onAddFile}
-            onAddFolder={this.onAddFolder}
-            onUploadFile={this.onUploadFile}
-            onUploadFolder={this.onUploadFolder}
-            currentMode={this.state.currentMode}
-            switchViewMode={this.switchViewMode}
-            onSearchedClick={this.onSearchedClick}
-            isRepoOwner={isRepoOwner}
-            currentRepoInfo={this.state.currentRepoInfo}
-            updateDirent={this.updateDirent}
-            onDirentSelected={this.onDirentSelected}
-            showDirentDetail={this.showDirentDetail}
-            unSelectDirent={this.unSelectDirent}
-            onFilesTagChanged={this.onFileTagChanged}
-            repoTags={this.state.repoTags}
-          />
-        </div>
         <div className="main-panel-center flex-row">
           <LibContentContainer
             isSidePanelFolded={this.props.isSidePanelFolded}
diff --git a/frontend/src/pages/libraries/index.js b/frontend/src/pages/libraries/index.js
index babcc12d08..c30e446dfa 100644
--- a/frontend/src/pages/libraries/index.js
+++ b/frontend/src/pages/libraries/index.js
@@ -1,5 +1,4 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import cookie from 'react-cookies';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, canAddRepo, canViewOrg } from '../../utils/constants';
@@ -10,7 +9,6 @@ import Group from '../../models/group';
 import Loading from '../../components/loading';
 import ViewModes from '../../components/view-modes';
 import ReposSortMenu from '../../components/repos-sort-menu';
-import TopToolbar from '../../components/toolbar/top-toolbar';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
 import SortOptionsDialog from '../../components/dialog/sort-options';
 import GuideForNewDialog from '../../components/dialog/guide-for-new-dialog';
@@ -22,11 +20,6 @@ import GroupItem from '../../pages/groups/group-item';
 
 import '../../css/files.css';
 
-const propTypes = {
-  onShowSidePanel: PropTypes.func.isRequired,
-  onSearchedClick: PropTypes.func.isRequired
-};
-
 class Libraries extends Component {
   constructor(props) {
     super(props);
@@ -238,11 +231,7 @@ class Libraries extends Component {
       };
     });
     return (
-      <Fragment>
-        <TopToolbar
-          onShowSidePanel={this.props.onShowSidePanel}
-          onSearchedClick={this.props.onSearchedClick}
-        />
+      <>
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path">
@@ -365,11 +354,9 @@ class Libraries extends Component {
             />
           )}
         </div>
-      </Fragment>
+      </>
     );
   }
 }
 
-Libraries.propTypes = propTypes;
-
 export default Libraries;
diff --git a/frontend/src/pages/my-libs/my-libs-deleted.js b/frontend/src/pages/my-libs/my-libs-deleted.js
index 9197da8f79..8e7d59d0aa 100644
--- a/frontend/src/pages/my-libs/my-libs-deleted.js
+++ b/frontend/src/pages/my-libs/my-libs-deleted.js
@@ -8,7 +8,6 @@ import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
 import Loading from '../../components/loading';
 import EmptyTip from '../../components/empty-tip';
-import CommonToolbar from '../../components/toolbar/common-toolbar';
 
 moment.locale(lang);
 
@@ -44,9 +43,6 @@ class MyLibsDeleted extends Component {
   render() {
     return (
       <Fragment>
-        <div className="main-panel-north">
-          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
-        </div>
         <div className="main-panel-center">
           <div className="cur-view-container">
             <div className="cur-view-path">
@@ -187,8 +183,4 @@ DeletedRepoItem.propTypes = {
   refreshDeletedRepoList: PropTypes.func.isRequired,
 };
 
-MyLibsDeleted.propTypes = {
-  onSearchedClick: PropTypes.func.isRequired,
-};
-
 export default MyLibsDeleted;
diff --git a/frontend/src/pages/my-libs/my-libs.js b/frontend/src/pages/my-libs/my-libs.js
index ce99c9cf4d..0724193127 100644
--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/frontend/src/pages/my-libs/my-libs.js
@@ -1,5 +1,4 @@
 import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
 import cookie from 'react-cookies';
 import { navigate } from '@gatsbyjs/reach-router';
 import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem } from 'reactstrap';
@@ -10,18 +9,12 @@ import toaster from '../../components/toast';
 import Repo from '../../models/repo';
 import Loading from '../../components/loading';
 import EmptyTip from '../../components/empty-tip';
-import TopToolbar from '../../components/toolbar/top-toolbar';
 import MylibRepoListView from './mylib-repo-list-view';
 import SortOptionsDialog from '../../components/dialog/sort-options';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
 import ModalPortal from '../../components/modal-portal';
 import CreateRepoDialog from '../../components/dialog/create-repo-dialog';
 
-const propTypes = {
-  onShowSidePanel: PropTypes.func.isRequired,
-  onSearchedClick: PropTypes.func.isRequired,
-};
-
 class MyLibraries extends Component {
   constructor(props) {
     super(props);
@@ -156,11 +149,6 @@ class MyLibraries extends Component {
     const { isDropdownMenuOpen } = this.state;
     return (
       <Fragment>
-        <TopToolbar
-          onShowSidePanel={this.props.onShowSidePanel}
-          onSearchedClick={this.props.onSearchedClick}
-        >
-        </TopToolbar>
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path">
@@ -229,6 +217,4 @@ class MyLibraries extends Component {
   }
 }
 
-MyLibraries.propTypes = propTypes;
-
 export default MyLibraries;
diff --git a/frontend/src/pages/share-admin/share-links.js b/frontend/src/pages/share-admin/share-links.js
index dc7fa67735..b54a5b397b 100644
--- a/frontend/src/pages/share-admin/share-links.js
+++ b/frontend/src/pages/share-admin/share-links.js
@@ -14,7 +14,6 @@ import ShareLinkPermissionSelect from '../../components/dialog/share-link-permis
 import ShareAdminLink from '../../components/dialog/share-admin-link';
 import SortOptionsDialog from '../../components/dialog/sort-options';
 import CommonOperationConfirmationDialog from '../../components/dialog/common-operation-confirmation-dialog';
-import TopToolbar from '../../components/toolbar/top-toolbar';
 import Selector from '../../components/single-selector';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
 
@@ -363,11 +362,6 @@ class Item extends Component {
 
 Item.propTypes = itemPropTypes;
 
-const propTypes = {
-  onShowSidePanel: PropTypes.func.isRequired,
-  onSearchedClick: PropTypes.func.isRequired
-};
-
 const PER_PAGE = 25;
 
 class ShareAdminShareLinks extends Component {
@@ -540,11 +534,6 @@ class ShareAdminShareLinks extends Component {
   render() {
     return (
       <Fragment>
-        <TopToolbar
-          onShowSidePanel={this.props.onShowSidePanel}
-          onSearchedClick={this.props.onSearchedClick}
-        >
-        </TopToolbar>
         <div className="main-panel-center">
           <div className="cur-view-container">
             <div className="cur-view-path share-upload-nav">
@@ -600,6 +589,4 @@ class ShareAdminShareLinks extends Component {
   }
 }
 
-ShareAdminShareLinks.propTypes = propTypes;
-
 export default ShareAdminShareLinks;
diff --git a/frontend/src/pages/share-admin/upload-links.js b/frontend/src/pages/share-admin/upload-links.js
index 81c587a80f..4184ecdd2b 100644
--- a/frontend/src/pages/share-admin/upload-links.js
+++ b/frontend/src/pages/share-admin/upload-links.js
@@ -12,7 +12,6 @@ import EmptyTip from '../../components/empty-tip';
 import UploadLink from '../../models/upload-link';
 import ShareAdminLink from '../../components/dialog/share-admin-link';
 import CommonOperationConfirmationDialog from '../../components/dialog/common-operation-confirmation-dialog';
-import TopToolbar from '../../components/toolbar/top-toolbar';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
 
 const contentPropTypes = {
@@ -203,11 +202,6 @@ class Item extends Component {
 
 Item.propTypes = itemPropTypes;
 
-const propTypes = {
-  onShowSidePanel: PropTypes.func.isRequired,
-  onSearchedClick: PropTypes.func.isRequired
-};
-
 class ShareAdminUploadLinks extends Component {
 
   constructor(props) {
@@ -273,10 +267,6 @@ class ShareAdminUploadLinks extends Component {
   render() {
     return (
       <Fragment>
-        <TopToolbar
-          onShowSidePanel={this.props.onShowSidePanel}
-          onSearchedClick={this.props.onSearchedClick}
-        />
         <div className="main-panel-center">
           <div className="cur-view-container">
             <div className="cur-view-path share-upload-nav">
@@ -318,6 +308,4 @@ class ShareAdminUploadLinks extends Component {
   }
 }
 
-ShareAdminUploadLinks.propTypes = propTypes;
-
 export default ShareAdminUploadLinks;
diff --git a/frontend/src/pages/share-with-ocm/remote-dir-topbar.js b/frontend/src/pages/share-with-ocm/remote-dir-topbar.js
deleted file mode 100644
index c242f57781..0000000000
--- a/frontend/src/pages/share-with-ocm/remote-dir-topbar.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Account from '../../components/common/account';
-
-const propTypes = {
-  children: PropTypes.object
-};
-
-class MainPanelTopbar extends Component {
-
-  render() {
-    return (
-      <div className={`main-panel-north ${this.props.children ? 'border-left-show' : ''}`}>
-        <div className="cur-view-toolbar">
-          <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu"></span>
-          <div className="operation">
-            {this.props.children}
-          </div>
-        </div>
-        <div className="common-toolbar">
-          <Account isAdminPanel={false} />
-        </div>
-      </div>
-    );
-  }
-}
-
-MainPanelTopbar.propTypes = propTypes;
-
-export default MainPanelTopbar;
diff --git a/frontend/src/pages/share-with-ocm/remote-dir-view.js b/frontend/src/pages/share-with-ocm/remote-dir-view.js
index bd57f1f061..7fa152efe9 100644
--- a/frontend/src/pages/share-with-ocm/remote-dir-view.js
+++ b/frontend/src/pages/share-with-ocm/remote-dir-view.js
@@ -1,12 +1,10 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
 import axios from 'axios';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
-import { siteRoot, gettext } from '../../utils/constants';
+import { siteRoot } from '../../utils/constants';
 import toaster from '../../components/toast';
-import MainPanelTopbar from './remote-dir-topbar';
 import DirPathBar from './remote-dir-path';
 import DirContent from './remote-dir-content';
 
@@ -129,20 +127,15 @@ class DirView extends Component {
   };
 
   render() {
-    const { loading, errorMsg,
-      repoName, direntList, path, userPerm } = this.state;
+    const { loading, errorMsg, repoName, direntList, path } = this.state;
     const { repoID } = this.props;
 
     return (
       <Fragment>
-        <MainPanelTopbar>
-          <Fragment>
-            <input className="d-none" type="file" onChange={this.onFileInputChange} ref={this.fileInput} />
-            {userPerm === 'rw' &&
-              <Button className="operation-item" onClick={this.openFileInput}>{gettext('Upload')}</Button>
-            }
-          </Fragment>
-        </MainPanelTopbar>
+        {/*
+          <input className="d-none" type="file" onChange={this.onFileInputChange} ref={this.fileInput} />
+          {userPerm === 'rw' && <Button className="operation-item" onClick={this.openFileInput}>{gettext('Upload')}</Button>}
+        */}
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path align-items-center">
diff --git a/frontend/src/pages/shared-with-all/index.js b/frontend/src/pages/shared-with-all/index.js
index d39f590d5b..b5ec9729e9 100644
--- a/frontend/src/pages/shared-with-all/index.js
+++ b/frontend/src/pages/shared-with-all/index.js
@@ -12,13 +12,10 @@ import SharedRepoListView from '../../components/shared-repo-list-view/shared-re
 import SortOptionsDialog from '../../components/dialog/sort-options';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
 import ModalPortal from '../../components/modal-portal';
-import TopToolbar from '../../components/toolbar/top-toolbar';
 import CreateRepoDialog from '../../components/dialog/create-repo-dialog';
 import ShareRepoDialog from '../../components/dialog/share-repo-dialog';
 
 const propTypes = {
-  onShowSidePanel: PropTypes.func,
-  onSearchedClick: PropTypes.func,
   currentViewMode: PropTypes.string,
   inAllLibs: PropTypes.bool,
   repoList: PropTypes.array,
@@ -222,11 +219,6 @@ class PublicSharedView extends React.Component {
 
     return (
       <Fragment>
-        <TopToolbar
-          onShowSidePanel={this.props.onShowSidePanel}
-          onSearchedClick={this.props.onSearchedClick}
-        >
-        </TopToolbar>
         <div className="main-panel-center">
           <div className="cur-view-container">
             <div className="cur-view-path">
diff --git a/frontend/src/pages/wikis/wikis.js b/frontend/src/pages/wikis/wikis.js
index 1bf56f4b0a..013f4dfc09 100644
--- a/frontend/src/pages/wikis/wikis.js
+++ b/frontend/src/pages/wikis/wikis.js
@@ -1,21 +1,14 @@
 import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { gettext, canPublishRepo } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
 import ModalPortal from '../../components/modal-portal';
 import EmptyTip from '../../components/empty-tip';
-import CommonToolbar from '../../components/toolbar/common-toolbar';
 import AddWikiDialog from '../../components/dialog/add-wiki-dialog';
 import wikiAPI from '../../utils/wiki-api';
 import WikiCardView from '../../components/wiki-card-view/wiki-card-view';
 
-const propTypes = {
-  onShowSidePanel: PropTypes.func.isRequired,
-  onSearchedClick: PropTypes.func.isRequired,
-};
-
 class Wikis extends Component {
   constructor(props) {
     super(props);
@@ -177,12 +170,6 @@ class Wikis extends Component {
   render() {
     return (
       <Fragment>
-        <div className="main-panel-north border-left-show">
-          <div className="cur-view-toolbar">
-            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
-          </div>
-          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
-        </div>
         {this.state.isShowAddDialog &&
           <ModalPortal>
             <AddWikiDialog
@@ -242,6 +229,4 @@ class Wikis extends Component {
   }
 }
 
-Wikis.propTypes = propTypes;
-
 export default Wikis;
diff --git a/frontend/src/settings.js b/frontend/src/settings.js
index 4131705feb..3334af1c85 100644
--- a/frontend/src/settings.js
+++ b/frontend/src/settings.js
@@ -6,10 +6,9 @@ import { Utils } from './utils/utils';
 import { isPro, isDBSqlite3, gettext, siteRoot } from './utils/constants';
 import { seafileAPI } from './utils/seafile-api';
 import toaster from './components/toast';
-import SidePanel from './components/side-panel';
 import MainPanel from './components/main-panel';
-import TopToolbar from './components/toolbar/top-toolbar';
-import SideNav from './components/user-settings/side-nav';
+import SettingSidePanel from './components/user-settings/setting-side-panel';
+import SettingTopToolbar from './components/user-settings/setting-top-toolbar';
 import UserAvatarForm from './components/user-settings/user-avatar-form';
 import UserBasicInfoForm from './components/user-settings/user-basic-info-form';
 import WebAPIAuthToken from './components/user-settings/web-api-auth-token';
@@ -124,60 +123,52 @@ class Settings extends React.Component {
   render() {
     const { isSidePanelClosed } = this.state;
     return (
-      <React.Fragment>
-        <div id="main" className="h-100">
-          <SidePanel
-            isSidePanelClosed={isSidePanelClosed}
-            onCloseSidePanel={this.onCloseSidePanel}
-          >
-            <SideNav data={this.sideNavItems} curItemID={this.state.curItemID} />
-          </SidePanel>
-          <MainPanel>
-            <>
-              <TopToolbar
-                onShowSidePanel={this.onShowSidePanel}
-                showSearch={false}
-              >
-              </TopToolbar>
-              <div className="main-panel-center flex-row">
-                <div className="cur-view-container">
-                  <div className="cur-view-path">
-                    <h3 className="sf-heading m-0">{gettext('Settings')}</h3>
-                  </div>
-                  <div className="cur-view-content content position-relative" onScroll={this.handleContentScroll}>
-                    <div id="user-basic-info" className="setting-item">
-                      <h3 className="setting-item-heading">{gettext('Profile Setting')}</h3>
-                      <UserAvatarForm />
-                      {this.state.userInfo && <UserBasicInfoForm userInfo={this.state.userInfo} updateUserInfo={this.updateUserInfo} />}
-                    </div>
-                    {canUpdatePassword &&
-                    <div id="update-user-passwd" className="setting-item">
-                      <h3 className="setting-item-heading">{gettext('Password')}</h3>
-                      <a href={`${siteRoot}accounts/password/change/`} className="btn btn-outline-primary">{passwordOperationText}</a>
-                    </div>
-                    }
-                    {enableGetAuthToken && <WebAPIAuthToken />}
-                    {enableWebdavSecret && <WebdavPassword />}
-                    {enableAddressBook && this.state.userInfo &&
-                    <ListInAddressBook userInfo={this.state.userInfo} updateUserInfo={this.updateUserInfo} />}
-                    <LanguageSetting />
-                    {(isPro || !isDBSqlite3) && <EmailNotice />}
-                    {twoFactorAuthEnabled && <TwoFactorAuthentication />}
-                    {enableWechatWork && <SocialLogin />}
-                    {enableDingtalk && <SocialLoginDingtalk />}
-                    {(enableADFS || (enableMultiADFS && isOrgContext)) && <SocialLoginSAML />}
-                    <LinkedDevices />
-                    {enableDeleteAccount && <DeleteAccount />}
-                  </div>
-                </div>
+      <div id="main" className="h-100">
+        <SettingSidePanel
+          isSidePanelClosed={isSidePanelClosed}
+          onCloseSidePanel={this.onCloseSidePanel}
+          data={this.sideNavItems}
+          curItemID={this.state.curItemID}
+        />
+        <MainPanel>
+          <SettingTopToolbar onShowSidePanel={this.onShowSidePanel} showSearch={false} />
+          <div className="main-panel-center flex-row">
+            <div className="cur-view-container">
+              <div className="cur-view-path">
+                <h3 className="sf-heading m-0">{gettext('Settings')}</h3>
               </div>
-            </>
-          </MainPanel>
-          <MediaQuery query="(max-width: 767.8px)">
-            <Modal zIndex="1030" isOpen={!isSidePanelClosed} toggle={this.toggleSidePanel} contentClassName="d-none"></Modal>
-          </MediaQuery>
-        </div>
-      </React.Fragment>
+              <div className="cur-view-content content position-relative" onScroll={this.handleContentScroll}>
+                <div id="user-basic-info" className="setting-item">
+                  <h3 className="setting-item-heading">{gettext('Profile Setting')}</h3>
+                  <UserAvatarForm />
+                  {this.state.userInfo && <UserBasicInfoForm userInfo={this.state.userInfo} updateUserInfo={this.updateUserInfo} />}
+                </div>
+                {canUpdatePassword &&
+                <div id="update-user-passwd" className="setting-item">
+                  <h3 className="setting-item-heading">{gettext('Password')}</h3>
+                  <a href={`${siteRoot}accounts/password/change/`} className="btn btn-outline-primary">{passwordOperationText}</a>
+                </div>
+                }
+                {enableGetAuthToken && <WebAPIAuthToken />}
+                {enableWebdavSecret && <WebdavPassword />}
+                {enableAddressBook && this.state.userInfo &&
+                <ListInAddressBook userInfo={this.state.userInfo} updateUserInfo={this.updateUserInfo} />}
+                <LanguageSetting />
+                {(isPro || !isDBSqlite3) && <EmailNotice />}
+                {twoFactorAuthEnabled && <TwoFactorAuthentication />}
+                {enableWechatWork && <SocialLogin />}
+                {enableDingtalk && <SocialLoginDingtalk />}
+                {(enableADFS || (enableMultiADFS && isOrgContext)) && <SocialLoginSAML />}
+                <LinkedDevices />
+                {enableDeleteAccount && <DeleteAccount />}
+              </div>
+            </div>
+          </div>
+        </MainPanel>
+        <MediaQuery query="(max-width: 767.8px)">
+          <Modal zIndex="1030" isOpen={!isSidePanelClosed} toggle={this.toggleSidePanel} contentClassName="d-none"></Modal>
+        </MediaQuery>
+      </div>
     );
   }
 }
diff --git a/media/css/seahub.css b/media/css/seahub.css
index 2dc58074e8..ee8f781396 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1188,15 +1188,13 @@ a.sf-popover-item {
 }
 /********** Container ***********/
 #header {
-    background: #fff;
+    background-color: #f8fafd;
     border-bottom: 1px solid #eee;
-    box-shadow: 0 2px 4px rgba(0,0,0, 10%);
     z-index: 100;
     width: 100%;
     height: 49px;
     font-size: 14px;
     padding: .5rem 1rem;
-    /*display:flex;*/
     justify-content: space-between;
     flex-shrink: 0;
 }
@@ -1399,9 +1397,9 @@ a.sf-popover-item {
 /*** separate pages ***/
 /* login */
 #lang {
-    font-weight:normal;
-    font-size:13px;
-    margin-top:12px;
+    font-weight: normal;
+    font-size: 13px;
+    margin-top: 12px;
 }
 #lang-context:hover {
     text-decoration:none;