diff --git a/frontend/src/pages/sys-admin/abuse-reports.js b/frontend/src/pages/sys-admin/abuse-reports.js
index 8665121a85..f91adb6382 100644
--- a/frontend/src/pages/sys-admin/abuse-reports.js
+++ b/frontend/src/pages/sys-admin/abuse-reports.js
@@ -5,6 +5,7 @@ import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../../components/toast';
 import moment from 'moment';
+import MainPanelTopbar from './main-panel-topbar';
 
 class AbuseReports extends Component {
 
@@ -76,23 +77,15 @@ class AbuseReports extends Component {
 
     return (
       <Fragment>
-        <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"></span>
-          </div>
-          <div className="common-toolbar">
-            <Account isAdminPanel={true}/>
-          </div>
-        </div>
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center">
           <div className="cur-view-container">
             <div className="cur-view-path">
               <h3 className="sf-heading">{gettext('Abuse Reports')}</h3>
             </div>
             <div className="cur-view-content">
-              <table className={`table-hover${isDesktop ? '' : ' table-thead-hidden'}`}>
+              <table className={`table-hover`}>
                 <thead>
-                  {isDesktop ?
                     <tr>
                       <th width="20%">{gettext('Library')}</th>
                       <th width="20%">{gettext('File')}</th>
@@ -102,12 +95,6 @@ class AbuseReports extends Component {
                       <th width="10%">{gettext('Time')}</th>
                       <th width="5%">{gettext('Handled')}</th>
                     </tr>
-                    :
-                    <tr>
-                      <th width="92%"></th>
-                      <th width="8%"></th>
-                    </tr>
-                  }
                 </thead>
                 <tbody>
                   {AbuseReportList}
diff --git a/frontend/src/pages/sys-admin/admin-logs/login-logs.js b/frontend/src/pages/sys-admin/admin-logs/login-logs.js
index a1a2db08e8..8f8048b259 100644
--- a/frontend/src/pages/sys-admin/admin-logs/login-logs.js
+++ b/frontend/src/pages/sys-admin/admin-logs/login-logs.js
@@ -146,7 +146,7 @@ class AdminLoginLogs extends Component {
     let { logList, currentPage, perPage, hasNextPage } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <LogsNav currentItem="adminLoginLogs" />
diff --git a/frontend/src/pages/sys-admin/admin-logs/operation-logs.js b/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
index c50b30d1ba..f1ca45f0d5 100644
--- a/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
+++ b/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
@@ -243,7 +243,7 @@ class AdminOperationLogs extends Component {
     let { logList, currentPage, perPage, hasNextPage } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <LogsNav currentItem="adminOperationLogs" />
diff --git a/frontend/src/pages/sys-admin/departments/department-detail.js b/frontend/src/pages/sys-admin/departments/department-detail.js
index d228ec4919..41a7502e66 100644
--- a/frontend/src/pages/sys-admin/departments/department-detail.js
+++ b/frontend/src/pages/sys-admin/departments/department-detail.js
@@ -280,7 +280,9 @@ class DepartmentDetail extends React.Component {
 
     return (
       <Fragment>
-        <MainPanelTopbar children={topbarChildren} />
+        <MainPanelTopbar {...this.props}>
+          {topbarChildren}
+        </MainPanelTopbar>
         <div className="main-panel-center flex-row h-100">
           <div className="cur-view-container o-auto">
             <div className="cur-view-path">
diff --git a/frontend/src/pages/sys-admin/departments/departments-list.js b/frontend/src/pages/sys-admin/departments/departments-list.js
index 0884e6e68a..094302f438 100644
--- a/frontend/src/pages/sys-admin/departments/departments-list.js
+++ b/frontend/src/pages/sys-admin/departments/departments-list.js
@@ -98,7 +98,9 @@ class DepartmentsList extends React.Component {
     );
     return (
       <Fragment>
-        <MainPanelTopbar children={topbarChildren}/>
+        <MainPanelTopbar {...this.props}>
+          {topbarChildren}
+        </MainPanelTopbar>
         <div className="main-panel-center flex-row h-100">
           <div className="cur-view-container o-auto">
             <div className="cur-view-path">
diff --git a/frontend/src/pages/sys-admin/devices/desktop-devices.js b/frontend/src/pages/sys-admin/devices/desktop-devices.js
index 2f489410a6..beed6f680d 100644
--- a/frontend/src/pages/sys-admin/devices/desktop-devices.js
+++ b/frontend/src/pages/sys-admin/devices/desktop-devices.js
@@ -12,7 +12,7 @@ class DesktopDevices extends Component {
   render() {
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <DevicesNav currentItem="desktop" />
diff --git a/frontend/src/pages/sys-admin/devices/devices-errors.js b/frontend/src/pages/sys-admin/devices/devices-errors.js
index 31436439f0..66ca4311a0 100644
--- a/frontend/src/pages/sys-admin/devices/devices-errors.js
+++ b/frontend/src/pages/sys-admin/devices/devices-errors.js
@@ -174,11 +174,11 @@ class DeviceErrors extends Component {
     return (
       <Fragment>
         {this.state.isCleanBtnShown ? (
-          <MainPanelTopbar>
+          <MainPanelTopbar {...this.props}>
             <Button className="operation-item" onClick={this.clean}>{gettext('Clean')}</Button>
           </MainPanelTopbar>
         ) : (
-          <MainPanelTopbar />
+          <MainPanelTopbar {...this.props} />
         )}
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
diff --git a/frontend/src/pages/sys-admin/devices/mobile-devices.js b/frontend/src/pages/sys-admin/devices/mobile-devices.js
index 41a9f4d2c6..33ef159fb8 100644
--- a/frontend/src/pages/sys-admin/devices/mobile-devices.js
+++ b/frontend/src/pages/sys-admin/devices/mobile-devices.js
@@ -12,7 +12,7 @@ class MobileDevices extends Component {
   render() {
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <DevicesNav currentItem="mobile" />
diff --git a/frontend/src/pages/sys-admin/dingtalk-departments.js b/frontend/src/pages/sys-admin/dingtalk-departments.js
index 9a092fddcf..42ce785d3a 100644
--- a/frontend/src/pages/sys-admin/dingtalk-departments.js
+++ b/frontend/src/pages/sys-admin/dingtalk-departments.js
@@ -4,8 +4,8 @@ import deepCopy from 'deep-copy';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot, isPro } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import MainPanelTopbar from './main-panel-topbar';
 import toaster from '../../components/toast';
-import Account from '../../components/common/account';
 import { DingtalkDepartmentMembersList, DingtalkDepartmentsTreePanel } from './dingtalk';
 import ImportDingtalkDepartmentDialog from '../../components/dialog/import-dingtalk-department-dialog';
 
@@ -289,28 +289,14 @@ class DingtalkDepartments extends Component {
     this.getDingtalkDepartmentsList(null);
   }
 
-  renderNav() {
-    const btnClass = 'btn btn-secondary operation-item ';
-    return (
-      <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"></span>
-          <Button className={btnClass + 'my-1 d-md-none'} onClick={this.onSubmit}>{'导入用户'}</Button>
-          <Button className={btnClass + 'hidden-md-up'} onClick={this.onSubmit}>{'导入用户'}</Button>
-        </div>
-        <div className="common-toolbar">
-          <Account isAdminPanel={true}/>
-        </div>
-      </div>
-    );
-  }
-
   render() {
     const { isImportDepartmentDialogShow, isTreeLoading, importDepartment, importDepartmentChildrenCount, importDepartmentMembersCount } = this.state;
     let canImportDepartment = !!(isPro && isImportDepartmentDialogShow && !isTreeLoading && importDepartment);
     return (
       <Fragment>
-        {this.renderNav()}
+        <MainPanelTopbar {...this.props}>
+          <Button className="operation-item" onClick={this.onSubmit}>{'导入用户'}</Button>
+        </MainPanelTopbar>
         <div className="main-panel-center">
           <div className="cur-view-container">
             <div className="cur-view-path">
diff --git a/frontend/src/pages/sys-admin/file-scan-records.js b/frontend/src/pages/sys-admin/file-scan-records.js
index abc6bae796..c8e81dcf4c 100644
--- a/frontend/src/pages/sys-admin/file-scan-records.js
+++ b/frontend/src/pages/sys-admin/file-scan-records.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
-import Account from '../../components/common/account';
+import MainPanelTopbar from './main-panel-topbar';
 
 
 const tablePropTypes = {
@@ -104,14 +104,7 @@ class FileScanRecords extends Component {
   render() {
     return (
       <React.Fragment>
-        <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"></span>
-          </div>
-          <div className="common-toolbar">
-            <Account isAdminPanel={true} />
-          </div>
-        </div>
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center">
           <div className="cur-view-container" id="content-scan-records">
             <div className="cur-view-path">
diff --git a/frontend/src/pages/sys-admin/groups/group-members.js b/frontend/src/pages/sys-admin/groups/group-members.js
index 88eecb8d1c..aa4b5cf414 100644
--- a/frontend/src/pages/sys-admin/groups/group-members.js
+++ b/frontend/src/pages/sys-admin/groups/group-members.js
@@ -277,7 +277,7 @@ class GroupMembers extends Component {
     let { isAddMemberDialogOpen } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar>
+        <MainPanelTopbar {...this.props}>
           <Button className="btn btn-secondary operation-item" onClick={this.toggleAddMemgerDialog}>{gettext('Add Member')}</Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
diff --git a/frontend/src/pages/sys-admin/groups/group-repos.js b/frontend/src/pages/sys-admin/groups/group-repos.js
index 83af8654ed..21a097bd2d 100644
--- a/frontend/src/pages/sys-admin/groups/group-repos.js
+++ b/frontend/src/pages/sys-admin/groups/group-repos.js
@@ -189,7 +189,7 @@ class GroupRepos extends Component {
   render() {
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <GroupNav
diff --git a/frontend/src/pages/sys-admin/groups/groups.js b/frontend/src/pages/sys-admin/groups/groups.js
index c01e15ad56..d69322e23d 100644
--- a/frontend/src/pages/sys-admin/groups/groups.js
+++ b/frontend/src/pages/sys-admin/groups/groups.js
@@ -125,7 +125,7 @@ class Groups extends Component {
 
     return (
       <Fragment>
-        <MainPanelTopbar search={this.getSearch()}>
+        <MainPanelTopbar search={this.getSearch()} {...this.props}>
           <Fragment>
             <Button className="operation-item" onClick={this.toggleCreateGroupDialog}>{gettext('New Group')}</Button>
             <a className="btn btn-secondary operation-item" href={`${siteRoot}sys/groupadmin/export-excel/`}>{gettext('Export Excel')}</a>
diff --git a/frontend/src/pages/sys-admin/groups/search-groups.js b/frontend/src/pages/sys-admin/groups/search-groups.js
index e7e792f95e..23cc27088d 100644
--- a/frontend/src/pages/sys-admin/groups/search-groups.js
+++ b/frontend/src/pages/sys-admin/groups/search-groups.js
@@ -94,7 +94,7 @@ class SearchGroups extends Component {
 
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path">
diff --git a/frontend/src/pages/sys-admin/index.js b/frontend/src/pages/sys-admin/index.js
index bed84a08b2..1188ee7438 100644
--- a/frontend/src/pages/sys-admin/index.js
+++ b/frontend/src/pages/sys-admin/index.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import ReactDom from 'react-dom';
+import MediaQuery from 'react-responsive';
+import { Modal } from 'reactstrap';
 import { Router } from '@gatsbyjs/reach-router';
 import { siteRoot } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+
 import SidePanel from './side-panel';
 import MainPanel from './main-panel';
 
@@ -16,7 +20,6 @@ import StatisticReport from './statistic/statistic-reports';
 import DesktopDevices from './devices/desktop-devices';
 import MobileDevices from './devices/mobile-devices';
 import DeviceErrors from './devices/devices-errors';
-import AbuseReports from './abuse-reports';
 
 import Users from './users/users';
 import AdminUsers from './users/admin-users';
@@ -78,6 +81,8 @@ import UnhandledVirusFiles from './virus-scan/unhandled-virus-files';
 import AdminOperationLogs from './admin-logs/operation-logs';
 import AdminLoginLogs from './admin-logs/login-logs';
 
+import AbuseReports from './abuse-reports';
+
 import '../../css/layout.css';
 import '../../css/toolbar.css';
 
@@ -154,6 +159,14 @@ class SysAdmin extends React.Component {
     this.setState({currentTab: currentTab});
   }
 
+  componentWillMount() {
+    if (!Utils.isDesktop()) {
+      this.setState({
+        isSidePanelClosed: true
+      });
+    }
+  }
+
   getCurrentTabForPageList = (pageList) => {
     let urlPartList, tab;
     const urlBase = `${siteRoot}sys/`;
@@ -174,10 +187,22 @@ class SysAdmin extends React.Component {
 
   tabItemClick = (param) => {
     this.setState({currentTab: param});
+    if (!Utils.isDesktop() && !this.state.isSidePanelClosed) {
+      this.setState({ isSidePanelClosed: true });
+    }
+  }
+
+  toggleSidePanel = () => {
+    this.setState({
+      isSidePanelClosed: !this.state.isSidePanelClosed
+    });
   }
 
   render() {
-    let { currentTab, isSidePanelClosed } = this.state;
+    const { currentTab, isSidePanelClosed } = this.state;
+    const commonProps = {
+      toggleSidePanel: this.toggleSidePanel
+    };
 
     return (
       <div id="main">
@@ -189,85 +214,75 @@ class SysAdmin extends React.Component {
         />
         <MainPanel>
           <Router className="reach-router">
-            <Info path={siteRoot + 'sys/info'} />
-            <StatisticFile path={siteRoot + 'sys/statistics/file'} />
-            <StatisticStorage path={siteRoot + 'sys/statistics/storage'} />
-            <StatisticUsers path={siteRoot + 'sys/statistics/user'} />
-            <StatisticTraffic path={siteRoot + 'sys/statistics/traffic'} />
-            <StatisticReport path={siteRoot + 'sys/statistics/reports'} />
-            <DesktopDevices path={siteRoot + 'sys/desktop-devices'} />
-            <MobileDevices path={siteRoot + 'sys/mobile-devices'} />
-            <DeviceErrors path={siteRoot + 'sys/device-errors'} />
-            <AllRepos path={siteRoot + 'sys/all-libraries'} />
-            <SystemRepo path={siteRoot + 'sys/system-library'} />
-            <TrashRepos path={siteRoot + 'sys/trash-libraries'} />
-            <SearchRepos path={siteRoot + 'sys/search-libraries'} />
-            <DirView path={siteRoot + 'sys/libraries/:repoID/*'} />
-            <WebSettings path={siteRoot + 'sys/web-settings'} />
-            <Notifications path={siteRoot + 'sys/notifications'} />
-            <Groups path={siteRoot + 'sys/groups'} />
-            <SearchGroups path={siteRoot + 'sys/search-groups'} />
-            <GroupRepos path={siteRoot + 'sys/groups/:groupID/libraries'} />
-            <GroupMembers path={siteRoot + 'sys/groups/:groupID/members'} />
+            <Info path={siteRoot + 'sys/info'} {...commonProps} />
+            <StatisticFile path={siteRoot + 'sys/statistics/file'} {...commonProps} />
+            <StatisticStorage path={siteRoot + 'sys/statistics/storage'} {...commonProps} />
+            <StatisticUsers path={siteRoot + 'sys/statistics/user'} {...commonProps} />
+            <StatisticTraffic path={siteRoot + 'sys/statistics/traffic'} {...commonProps} />
+            <StatisticReport path={siteRoot + 'sys/statistics/reports'} {...commonProps} />
+            <DesktopDevices path={siteRoot + 'sys/desktop-devices'} {...commonProps} />
+            <MobileDevices path={siteRoot + 'sys/mobile-devices'} {...commonProps} />
+            <DeviceErrors path={siteRoot + 'sys/device-errors'} {...commonProps} />
+            <AllRepos path={siteRoot + 'sys/all-libraries'} {...commonProps} />
+            <SystemRepo path={siteRoot + 'sys/system-library'} {...commonProps} />
+            <TrashRepos path={siteRoot + 'sys/trash-libraries'} {...commonProps} />
+            <SearchRepos path={siteRoot + 'sys/search-libraries'} {...commonProps} />
+            <DirView path={siteRoot + 'sys/libraries/:repoID/*'} {...commonProps} />
+            <WebSettings path={siteRoot + 'sys/web-settings'} {...commonProps} />
+            <Notifications path={siteRoot + 'sys/notifications'} {...commonProps} />
+            <Groups path={siteRoot + 'sys/groups'} {...commonProps} />
+            <SearchGroups path={siteRoot + 'sys/search-groups'} {...commonProps} />
+            <GroupRepos path={siteRoot + 'sys/groups/:groupID/libraries'} {...commonProps} />
+            <GroupMembers path={siteRoot + 'sys/groups/:groupID/members'} {...commonProps} />
             <Departments path={siteRoot + 'sys/departments'}>
-              <DepartmentsList path='/'/>
-              <DepartmentDetail path='/:groupID'/>
+              <DepartmentsList path='/' {...commonProps} />
+              <DepartmentDetail path='/:groupID' {...commonProps} />
             </Departments>
-            <ShareLinks path={siteRoot + 'sys/share-links'} />
-            <UploadLinks path={siteRoot + 'sys/upload-links'} />
-            <Orgs path={siteRoot + 'sys/organizations'} />
-            <SearchOrgs path={siteRoot + 'sys/search-organizations'} />
-            <OrgInfo path={siteRoot + 'sys/organizations/:orgID/info'} />
-            <OrgUsers path={siteRoot + 'sys/organizations/:orgID/users'} />
-            <OrgGroups path={siteRoot + 'sys/organizations/:orgID/groups'} />
-            <OrgRepos path={siteRoot + 'sys/organizations/:orgID/libraries'} />
-            <Institutions path={siteRoot + 'sys/institutions'} />
-            <InstitutionInfo path={siteRoot + 'sys/institutions/:institutionID/info'} />
-            <InstitutionUsers path={siteRoot + 'sys/institutions/:institutionID/members'} />
-            <InstitutionAdmins path={siteRoot + 'sys/institutions/:institutionID/admins'} />
-            <LoginLogs path={siteRoot + 'sys/logs/login'} />
-            <FileAccessLogs path={siteRoot + 'sys/logs/file-access'} />
-            <FileUpdateLogs path={siteRoot + 'sys/logs/file-update'} />
-            <SharePermissionLogs path={siteRoot + 'sys/logs/share-permission'} />
-            <AdminOperationLogs path={siteRoot + 'sys/admin-logs/operation'} />
-            <AdminLoginLogs path={siteRoot + 'sys/admin-logs/login'} />
+            <ShareLinks path={siteRoot + 'sys/share-links'} {...commonProps} />
+            <UploadLinks path={siteRoot + 'sys/upload-links'} {...commonProps} />
+            <Orgs path={siteRoot + 'sys/organizations'} {...commonProps} />
+            <SearchOrgs path={siteRoot + 'sys/search-organizations'} {...commonProps} />
+            <OrgInfo path={siteRoot + 'sys/organizations/:orgID/info'} {...commonProps} />
+            <OrgUsers path={siteRoot + 'sys/organizations/:orgID/users'} {...commonProps} />
+            <OrgGroups path={siteRoot + 'sys/organizations/:orgID/groups'} {...commonProps} />
+            <OrgRepos path={siteRoot + 'sys/organizations/:orgID/libraries'} {...commonProps} />
+            <Institutions path={siteRoot + 'sys/institutions'} {...commonProps} />
+            <InstitutionInfo path={siteRoot + 'sys/institutions/:institutionID/info'} {...commonProps} />
+            <InstitutionUsers path={siteRoot + 'sys/institutions/:institutionID/members'} {...commonProps} />
+            <InstitutionAdmins path={siteRoot + 'sys/institutions/:institutionID/admins'} {...commonProps} />
+            <LoginLogs path={siteRoot + 'sys/logs/login'} {...commonProps} />
+            <FileAccessLogs path={siteRoot + 'sys/logs/file-access'} {...commonProps} />
+            <FileUpdateLogs path={siteRoot + 'sys/logs/file-update'} {...commonProps} />
+            <SharePermissionLogs path={siteRoot + 'sys/logs/share-permission'} {...commonProps} />
+            <AdminOperationLogs path={siteRoot + 'sys/admin-logs/operation'} {...commonProps} />
+            <AdminLoginLogs path={siteRoot + 'sys/admin-logs/login'} {...commonProps} />
 
-            <Users path={siteRoot + 'sys/users'} />
-            <AdminUsers path={siteRoot + 'sys/users/admins'} />
-            <LDAPImportedUsers path={siteRoot + 'sys/users/ldap-imported'} />
-            <LDAPUsers path={siteRoot + 'sys/users/ldap'} />
-            <SearchUsers path={siteRoot + 'sys/search-users'} />
-            <User path={siteRoot + 'sys/users/:email'} />
-            <UserOwnedRepos path={siteRoot + 'sys/users/:email/owned-libraries'} />
-            <UserSharedRepos path={siteRoot + 'sys/users/:email/shared-libraries'} />
-            <UserLinks path={siteRoot + 'sys/users/:email/shared-links'} />
-            <UserGroups path={siteRoot + 'sys/users/:email/groups'} />
+            <Users path={siteRoot + 'sys/users'} {...commonProps} />
+            <AdminUsers path={siteRoot + 'sys/users/admins'} {...commonProps} />
+            <LDAPImportedUsers path={siteRoot + 'sys/users/ldap-imported'} {...commonProps} />
+            <LDAPUsers path={siteRoot + 'sys/users/ldap'} {...commonProps} />
+            <SearchUsers path={siteRoot + 'sys/search-users'} {...commonProps} />
+            <User path={siteRoot + 'sys/users/:email'} {...commonProps} />
+            <UserOwnedRepos path={siteRoot + 'sys/users/:email/owned-libraries'} {...commonProps} />
+            <UserSharedRepos path={siteRoot + 'sys/users/:email/shared-libraries'} {...commonProps} />
+            <UserLinks path={siteRoot + 'sys/users/:email/shared-links'} {...commonProps} />
+            <UserGroups path={siteRoot + 'sys/users/:email/groups'} {...commonProps} />
 
-            <Invitations path={siteRoot + 'sys/invitations'} />
-            <TermsAndConditions path={siteRoot + 'sys/terms-and-conditions/'} />
+            <Invitations path={siteRoot + 'sys/invitations'} {...commonProps} />
+            <TermsAndConditions path={siteRoot + 'sys/terms-and-conditions/'} {...commonProps} />
 
-            <AllVirusFiles path={siteRoot + 'sys/virus-files/all'} />
-            <UnhandledVirusFiles path={siteRoot + 'sys/virus-files/unhandled'} />
+            <AllVirusFiles path={siteRoot + 'sys/virus-files/all'} {...commonProps} />
+            <UnhandledVirusFiles path={siteRoot + 'sys/virus-files/unhandled'} {...commonProps} />
 
-            <FileScanRecords
-              path={siteRoot + 'sys/file-scan-records'}
-              currentTab={currentTab}
-              tabItemClick={this.tabItemClick}
-            />
-
-            <WorkWeixinDepartments
-              path={siteRoot + 'sys/work-weixin'}
-              currentTab={currentTab}
-              tabItemClick={this.tabItemClick}
-            />
-            <DingtalkDepartments
-              path={siteRoot + 'sys/dingtalk'}
-              currentTab={currentTab}
-              tabItemClick={this.tabItemClick}
-            />
-            <AbuseReports path={siteRoot + 'sys/abuse-reports'} />
+            <FileScanRecords path={siteRoot + 'sys/file-scan-records'} {...commonProps} />
+            <WorkWeixinDepartments path={siteRoot + 'sys/work-weixin'} {...commonProps} />
+            <DingtalkDepartments path={siteRoot + 'sys/dingtalk'} {...commonProps} />
+            <AbuseReports path={siteRoot + 'sys/abuse-reports'} {...commonProps} />
           </Router>
         </MainPanel>
+          <MediaQuery query="(max-width: 767.8px)">
+            <Modal zIndex="1030" isOpen={!isSidePanelClosed} toggle={this.toggleSidePanel} contentClassName="d-none"></Modal>
+          </MediaQuery>
       </div>
     );
   }
diff --git a/frontend/src/pages/sys-admin/info.js b/frontend/src/pages/sys-admin/info.js
index 9593edb892..93985c08b2 100644
--- a/frontend/src/pages/sys-admin/info.js
+++ b/frontend/src/pages/sys-admin/info.js
@@ -81,7 +81,7 @@ class Info extends Component {
 
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container system-admin-info">
             <h2 className="heading">{gettext('Info')}</h2>
diff --git a/frontend/src/pages/sys-admin/institutions/institution-admins.js b/frontend/src/pages/sys-admin/institutions/institution-admins.js
index 6db641e03d..dcf75c3666 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-admins.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-admins.js
@@ -250,7 +250,7 @@ class InstitutionAdmins extends Component {
     const { institutionName } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <InstitutionNav
diff --git a/frontend/src/pages/sys-admin/institutions/institution-info.js b/frontend/src/pages/sys-admin/institutions/institution-info.js
index 9289f1c0fd..a9eae7534d 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-info.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-info.js
@@ -112,7 +112,7 @@ class InstitutionInfo extends Component {
     const { institutionInfo } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <InstitutionNav currentItem="info" institutionID={this.props.institutionID} institutionName={institutionInfo.name} />
diff --git a/frontend/src/pages/sys-admin/institutions/institution-users.js b/frontend/src/pages/sys-admin/institutions/institution-users.js
index ecd96bd1dc..3d2f4aeec4 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-users.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-users.js
@@ -333,7 +333,7 @@ class InstitutionUsers extends Component {
     const { isAddUserDialogOpen, institutionName, hasNextPage, currentPage, perPage } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar>
+        <MainPanelTopbar {...this.props}>
           <Button className="btn btn-secondary operation-item" onClick={this.toggleAddUserDialog}>{gettext('Add Member')}</Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
diff --git a/frontend/src/pages/sys-admin/institutions/institutions.js b/frontend/src/pages/sys-admin/institutions/institutions.js
index 4d908cbcfc..2299854ebb 100644
--- a/frontend/src/pages/sys-admin/institutions/institutions.js
+++ b/frontend/src/pages/sys-admin/institutions/institutions.js
@@ -215,7 +215,7 @@ class Institutions extends Component {
     const { isAddInstitutionDialogOpen, hasNextPage, currentPage, perPage } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar>
+        <MainPanelTopbar {...this.props}>
           <Button className="btn btn-secondary operation-item" onClick={this.toggleAddInstitutionDialog}>{gettext('Add Institution')}</Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
diff --git a/frontend/src/pages/sys-admin/invitations/invitations.js b/frontend/src/pages/sys-admin/invitations/invitations.js
index 55977f6879..68fcf1b6e7 100644
--- a/frontend/src/pages/sys-admin/invitations/invitations.js
+++ b/frontend/src/pages/sys-admin/invitations/invitations.js
@@ -299,7 +299,7 @@ class Invitations extends Component {
   render() {
     return (
       <Fragment>
-        <MainPanelTopbar>
+        <MainPanelTopbar {...this.props}>
           <Button className="btn btn-secondary operation-item" onClick={this.deleteItemInBatch}>{gettext('Delete Expired Invitations')}</Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
diff --git a/frontend/src/pages/sys-admin/links/share-links.js b/frontend/src/pages/sys-admin/links/share-links.js
index 0bcf434a1c..12d282cba0 100644
--- a/frontend/src/pages/sys-admin/links/share-links.js
+++ b/frontend/src/pages/sys-admin/links/share-links.js
@@ -242,7 +242,7 @@ class ShareLinks extends Component {
     let { shareLinkList, currentPage, perPage, hasNextPage } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />  
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <LinksNav currentItem="shareLinks" />
diff --git a/frontend/src/pages/sys-admin/links/upload-links.js b/frontend/src/pages/sys-admin/links/upload-links.js
index efcfcb23b2..8d0b8eb4c9 100644
--- a/frontend/src/pages/sys-admin/links/upload-links.js
+++ b/frontend/src/pages/sys-admin/links/upload-links.js
@@ -201,7 +201,7 @@ class UploadLinks extends Component {
     let { uploadLinkList, currentPage, perPage, hasNextPage } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <LinksNav currentItem="uploadLinks" />
diff --git a/frontend/src/pages/sys-admin/logs-page/file-access-logs.js b/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
index 8946aeb705..b309a0b892 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
@@ -300,7 +300,7 @@ class FileAccessLogs extends Component {
     } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar>
+        <MainPanelTopbar {...this.props}>
           <Button className="btn btn-secondary operation-item" onClick={this.toggleExportExcelDialog}>{gettext('Export Excel')}</Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
diff --git a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
index 7053695b42..ed2f686087 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
@@ -201,7 +201,7 @@ class FileUpdateLogs extends Component {
     let { logList, currentPage, perPage, hasNextPage, isExportExcelDialogOpen } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar>
+        <MainPanelTopbar {...this.props}>
           <Button className="btn btn-secondary operation-item" onClick={this.toggleExportExcelDialog}>{gettext('Export Excel')}</Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
diff --git a/frontend/src/pages/sys-admin/logs-page/login-logs.js b/frontend/src/pages/sys-admin/logs-page/login-logs.js
index dd7d458573..5327da0a5c 100644
--- a/frontend/src/pages/sys-admin/logs-page/login-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/login-logs.js
@@ -169,7 +169,7 @@ class LoginLogs extends Component {
     let { logList, currentPage, perPage, hasNextPage, isExportExcelDialogOpen } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar>
+        <MainPanelTopbar {...this.props}>
           <Button className="btn btn-secondary operation-item" onClick={this.toggleExportExcelDialog}>{gettext('Export Excel')}</Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
diff --git a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
index 11cb342710..d3065636f7 100644
--- a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
@@ -202,7 +202,7 @@ class SharePermissionLogs extends Component {
     let { logList, currentPage, perPage, hasNextPage, isExportExcelDialogOpen } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar>
+        <MainPanelTopbar {...this.props}>
           <Button className="btn btn-secondary operation-item" onClick={this.toggleExportExcelDialog}>{gettext('Export Excel')}</Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
diff --git a/frontend/src/pages/sys-admin/main-panel-topbar.js b/frontend/src/pages/sys-admin/main-panel-topbar.js
index 21cedc8ee5..104de78ac4 100644
--- a/frontend/src/pages/sys-admin/main-panel-topbar.js
+++ b/frontend/src/pages/sys-admin/main-panel-topbar.js
@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Account from '../../components/common/account';
+import { gettext } from '../../utils/constants';
 
 const propTypes = {
-  children: PropTypes.object
+  children: PropTypes.object,
+  toggleSidePanel: PropTypes.func
 };
 
 class MainPanelTopbar extends Component {
@@ -12,7 +14,11 @@ class MainPanelTopbar extends Component {
     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>
+          <span 
+            className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none"
+            title={gettext("Side Nav Menu")}
+            onClick={this.props.toggleSidePanel}
+          ></span>
           <div className="operation">
             {this.props.children}
           </div>
diff --git a/frontend/src/pages/sys-admin/notifications/notifications.js b/frontend/src/pages/sys-admin/notifications/notifications.js
index 8e4a1791e9..60b2c88f60 100644
--- a/frontend/src/pages/sys-admin/notifications/notifications.js
+++ b/frontend/src/pages/sys-admin/notifications/notifications.js
@@ -271,7 +271,7 @@ class Notifications extends Component {
     const { isAddNotificationDialogOpen } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar>
+        <MainPanelTopbar {...this.props}>
           <Button className="btn btn-secondary operation-item" onClick={this.toggleAddNotificationDialog}>{gettext('Add new notification')}</Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
diff --git a/frontend/src/pages/sys-admin/orgs/org-groups.js b/frontend/src/pages/sys-admin/orgs/org-groups.js
index 20f5940f15..684a048caa 100644
--- a/frontend/src/pages/sys-admin/orgs/org-groups.js
+++ b/frontend/src/pages/sys-admin/orgs/org-groups.js
@@ -169,7 +169,7 @@ class OrgGroups extends Component {
   render() {
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <OrgNav
diff --git a/frontend/src/pages/sys-admin/orgs/org-info.js b/frontend/src/pages/sys-admin/orgs/org-info.js
index e8f11ca262..89751d6092 100644
--- a/frontend/src/pages/sys-admin/orgs/org-info.js
+++ b/frontend/src/pages/sys-admin/orgs/org-info.js
@@ -180,7 +180,7 @@ class OrgInfo extends Component {
     const { orgInfo } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <OrgNav currentItem="info" orgID={this.props.orgID} orgName={orgInfo.org_name} />
diff --git a/frontend/src/pages/sys-admin/orgs/org-repos.js b/frontend/src/pages/sys-admin/orgs/org-repos.js
index 9618a4c8e3..567f50669e 100644
--- a/frontend/src/pages/sys-admin/orgs/org-repos.js
+++ b/frontend/src/pages/sys-admin/orgs/org-repos.js
@@ -175,7 +175,7 @@ class OrgRepos extends Component {
   render() {
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <OrgNav
diff --git a/frontend/src/pages/sys-admin/orgs/org-users.js b/frontend/src/pages/sys-admin/orgs/org-users.js
index b2e921a770..64148c7161 100644
--- a/frontend/src/pages/sys-admin/orgs/org-users.js
+++ b/frontend/src/pages/sys-admin/orgs/org-users.js
@@ -347,7 +347,7 @@ class OrgUsers extends Component {
     const { isAddUserDialogOpen, orgName } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar>
+        <MainPanelTopbar {...this.props}> 
           <Button className="btn btn-secondary operation-item" onClick={this.toggleAddUserDialog}>{gettext('Add Member')}</Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
diff --git a/frontend/src/pages/sys-admin/orgs/orgs.js b/frontend/src/pages/sys-admin/orgs/orgs.js
index 835945b2e5..1e4cf18947 100644
--- a/frontend/src/pages/sys-admin/orgs/orgs.js
+++ b/frontend/src/pages/sys-admin/orgs/orgs.js
@@ -124,7 +124,7 @@ class Orgs extends Component {
     const { isAddOrgDialogOpen } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar search={this.getSearch()}>
+        <MainPanelTopbar search={this.getSearch()} {...this.props}>
           <Button className="btn btn-secondary operation-item" onClick={this.toggleAddOrgDialog}>{gettext('Add Organization')}</Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
diff --git a/frontend/src/pages/sys-admin/orgs/search-orgs.js b/frontend/src/pages/sys-admin/orgs/search-orgs.js
index 5d3a8e3777..aaacd053d4 100644
--- a/frontend/src/pages/sys-admin/orgs/search-orgs.js
+++ b/frontend/src/pages/sys-admin/orgs/search-orgs.js
@@ -90,7 +90,7 @@ class SearchOrgs extends Component {
     const { query, isSubmitBtnActive } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path">
diff --git a/frontend/src/pages/sys-admin/repos/all-repos.js b/frontend/src/pages/sys-admin/repos/all-repos.js
index 4731521206..f099787063 100644
--- a/frontend/src/pages/sys-admin/repos/all-repos.js
+++ b/frontend/src/pages/sys-admin/repos/all-repos.js
@@ -127,7 +127,7 @@ class AllRepos extends Component {
     let { isCreateRepoDialogOpen } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar search={this.getSearch()}>
+        <MainPanelTopbar search={this.getSearch()} {...this.props}>
           <Button className="btn btn-secondary operation-item" onClick={this.toggleCreateRepoDialog}>
             <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
           </Button>
diff --git a/frontend/src/pages/sys-admin/repos/dir-view.js b/frontend/src/pages/sys-admin/repos/dir-view.js
index 59969ca1b0..81552153de 100644
--- a/frontend/src/pages/sys-admin/repos/dir-view.js
+++ b/frontend/src/pages/sys-admin/repos/dir-view.js
@@ -168,13 +168,13 @@ class DirView extends Component {
     return (
       <Fragment>
         {isSystemRepo ?
-          <MainPanelTopbar>
+          <MainPanelTopbar {...this.props}>
             <Fragment>
               <input className="d-none" type="file" onChange={this.onFileInputChange} ref={this.fileInput} />
               <Button className="operation-item" onClick={this.openFileInput}>{gettext('Upload')}</Button>
               <Button className="operation-item" onClick={this.toggleNewFolderDialog}>{gettext('New Folder')}</Button>
             </Fragment>
-          </MainPanelTopbar> : <MainPanelTopbar />
+          </MainPanelTopbar> : <MainPanelTopbar {...this.props} />
         }
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
diff --git a/frontend/src/pages/sys-admin/repos/search-repos.js b/frontend/src/pages/sys-admin/repos/search-repos.js
index 24ecef2afc..204d0c6b80 100644
--- a/frontend/src/pages/sys-admin/repos/search-repos.js
+++ b/frontend/src/pages/sys-admin/repos/search-repos.js
@@ -81,7 +81,7 @@ class SearchRepos extends Component {
     const { name, isSubmitBtnActive } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path">
diff --git a/frontend/src/pages/sys-admin/repos/system-repo.js b/frontend/src/pages/sys-admin/repos/system-repo.js
index c2119d3ffb..452883e43b 100644
--- a/frontend/src/pages/sys-admin/repos/system-repo.js
+++ b/frontend/src/pages/sys-admin/repos/system-repo.js
@@ -92,7 +92,7 @@ class SystemRepo extends Component {
   render() {
     return (
       <Fragment>
-        <MainPanelTopbar/>
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <ReposNav currentItem="system" />
diff --git a/frontend/src/pages/sys-admin/repos/trash-repos.js b/frontend/src/pages/sys-admin/repos/trash-repos.js
index 35cf832821..b9978c7d17 100644
--- a/frontend/src/pages/sys-admin/repos/trash-repos.js
+++ b/frontend/src/pages/sys-admin/repos/trash-repos.js
@@ -373,10 +373,10 @@ class TrashRepos extends Component {
     return (
       <Fragment>
         {this.state.repos.length ? (
-          <MainPanelTopbar>
+          <MainPanelTopbar {...this.props}>
             <Button className="operation-item" onClick={this.toggleCleanTrashDialog}>{gettext('Clean')}</Button>
           </MainPanelTopbar>
-        ) : <MainPanelTopbar />
+        ) : <MainPanelTopbar {...this.props} />
         }
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-file.js b/frontend/src/pages/sys-admin/statistic/statistic-file.js
index 4fb78863af..96ee5ab3cc 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-file.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-file.js
@@ -78,7 +78,7 @@ class StatisticFile extends React.Component {
 
     return(
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="cur-view-container">
           <StatisticNav currentItem="fileStatistic" />
           <div className="cur-view-content">
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-reports.js b/frontend/src/pages/sys-admin/statistic/statistic-reports.js
index c6a66f0a14..77753375d1 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-reports.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-reports.js
@@ -61,7 +61,7 @@ class StatisticReports extends React.Component {
     let { errorMessage } = this.state;
     return(
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="cur-view-container">
           <StatisticNav currentItem="reportsStatistic" />
           <div className="cur-view-content">
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-storage.js b/frontend/src/pages/sys-admin/statistic/statistic-storage.js
index ef2fb68b3f..b254ad3e49 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-storage.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-storage.js
@@ -54,7 +54,7 @@ class StatisticStorage extends React.Component {
     let { labels, filesData, isLoading } = this.state;
     return(
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="cur-view-container">
           <StatisticNav currentItem="storageStatistic" />
           <div className="cur-view-content">
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-traffic.js b/frontend/src/pages/sys-admin/statistic/statistic-traffic.js
index 41e2fbd03f..5f4d409dc3 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-traffic.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-traffic.js
@@ -141,7 +141,7 @@ class StatisticTraffic extends React.Component {
 
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="cur-view-container">
           <StatisticNav currentItem="trafficStatistic" />
           <div className="cur-view-content">
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-users.js b/frontend/src/pages/sys-admin/statistic/statistic-users.js
index de18b42d04..ed810d3677 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-users.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-users.js
@@ -54,7 +54,7 @@ class StatisticUsers extends React.Component {
     let { labels, filesData, isLoading } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="cur-view-container">
           <StatisticNav currentItem="usersStatistic" />
           <div className="cur-view-content">
diff --git a/frontend/src/pages/sys-admin/terms-and-conditions/terms-and-conditions.js b/frontend/src/pages/sys-admin/terms-and-conditions/terms-and-conditions.js
index e0d5c8ae93..62a031c805 100644
--- a/frontend/src/pages/sys-admin/terms-and-conditions/terms-and-conditions.js
+++ b/frontend/src/pages/sys-admin/terms-and-conditions/terms-and-conditions.js
@@ -81,7 +81,7 @@ class TermsAndConditions extends Component {
     let { termList, isAddTermDialogOpen } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar>
+        <MainPanelTopbar {...this.props}>
           <Button className="btn btn-secondary operation-item" onClick={this.toggleAddTermDialog}>{gettext('Add')}</Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
diff --git a/frontend/src/pages/sys-admin/users/admin-users.js b/frontend/src/pages/sys-admin/users/admin-users.js
index 57fb00343b..61f8b3e469 100644
--- a/frontend/src/pages/sys-admin/users/admin-users.js
+++ b/frontend/src/pages/sys-admin/users/admin-users.js
@@ -4,7 +4,7 @@ import Users from './users';
 class AdminUsers extends Component {
 
   render() {
-    return <Users isAdmin={true} />;
+    return <Users isAdmin={true} {...this.props} />;
   }
 }
 
diff --git a/frontend/src/pages/sys-admin/users/ldap-imported-users.js b/frontend/src/pages/sys-admin/users/ldap-imported-users.js
index 48f6d7b06a..e7681b1fce 100644
--- a/frontend/src/pages/sys-admin/users/ldap-imported-users.js
+++ b/frontend/src/pages/sys-admin/users/ldap-imported-users.js
@@ -4,7 +4,7 @@ import Users from './users';
 class LDAPImportedUsers extends Component {
 
   render() {
-    return <Users isLDAPImported={true} />;
+    return <Users isLDAPImported={true} {...this.props} />;
   }
 }
 
diff --git a/frontend/src/pages/sys-admin/users/ldap-users.js b/frontend/src/pages/sys-admin/users/ldap-users.js
index 64b8662bdc..26fd542b34 100644
--- a/frontend/src/pages/sys-admin/users/ldap-users.js
+++ b/frontend/src/pages/sys-admin/users/ldap-users.js
@@ -149,7 +149,7 @@ class Users extends Component {
   render() {
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <UsersNav currentItem="ldap" />
diff --git a/frontend/src/pages/sys-admin/users/search-users.js b/frontend/src/pages/sys-admin/users/search-users.js
index 246de9e0ff..4ca403360d 100644
--- a/frontend/src/pages/sys-admin/users/search-users.js
+++ b/frontend/src/pages/sys-admin/users/search-users.js
@@ -280,13 +280,13 @@ class SearchUsers extends Component {
     return (
       <Fragment>
         {hasUserSelected ?
-          <MainPanelTopbar>
+          <MainPanelTopbar {...this.props}>
             <Fragment>
               <Button className="btn btn-secondary operation-item" onClick={this.toggleBatchSetQuotaDialog}>{gettext('Set Quota')}</Button>
               <Button className="btn btn-secondary operation-item" onClick={this.toggleBatchDeleteUserDialog}>{gettext('Delete Users')}</Button>
             </Fragment>
           </MainPanelTopbar> :
-          <MainPanelTopbar />
+          <MainPanelTopbar {...this.props} />
         }
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
diff --git a/frontend/src/pages/sys-admin/users/user-groups.js b/frontend/src/pages/sys-admin/users/user-groups.js
index 7176b42fd4..658adb97ea 100644
--- a/frontend/src/pages/sys-admin/users/user-groups.js
+++ b/frontend/src/pages/sys-admin/users/user-groups.js
@@ -177,7 +177,7 @@ class Groups extends Component {
   render() {
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <Nav currentItem="groups" email={this.props.email} userName={this.state.userInfo.name} />
diff --git a/frontend/src/pages/sys-admin/users/user-info.js b/frontend/src/pages/sys-admin/users/user-info.js
index 81b2ab3b24..027904ecd3 100644
--- a/frontend/src/pages/sys-admin/users/user-info.js
+++ b/frontend/src/pages/sys-admin/users/user-info.js
@@ -299,7 +299,7 @@ class User extends Component {
     const { userInfo } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <Nav currentItem="info" email={this.props.email} userName={userInfo.name} />
diff --git a/frontend/src/pages/sys-admin/users/user-links.js b/frontend/src/pages/sys-admin/users/user-links.js
index 14b29fdcf7..d4fdb5ccf9 100644
--- a/frontend/src/pages/sys-admin/users/user-links.js
+++ b/frontend/src/pages/sys-admin/users/user-links.js
@@ -303,7 +303,7 @@ class Links extends Component {
     const { shareLinkItems, uploadLinkItems } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <Nav currentItem="links" email={this.props.email} userName={this.state.userInfo.name} />
diff --git a/frontend/src/pages/sys-admin/users/user-repos.js b/frontend/src/pages/sys-admin/users/user-repos.js
index a28185210c..c63260bb36 100644
--- a/frontend/src/pages/sys-admin/users/user-repos.js
+++ b/frontend/src/pages/sys-admin/users/user-repos.js
@@ -284,7 +284,7 @@ class Repos extends Component {
   render() {
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <Nav currentItem="owned-repos" email={this.props.email} userName={this.state.userInfo.name} />
diff --git a/frontend/src/pages/sys-admin/users/user-shared-repos.js b/frontend/src/pages/sys-admin/users/user-shared-repos.js
index f8a2c7b0af..ec194207df 100644
--- a/frontend/src/pages/sys-admin/users/user-shared-repos.js
+++ b/frontend/src/pages/sys-admin/users/user-shared-repos.js
@@ -144,7 +144,7 @@ class Repos extends Component {
   render() {
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <Nav currentItem="shared-repos" email={this.props.email} userName={this.state.userInfo.name} />
diff --git a/frontend/src/pages/sys-admin/users/users.js b/frontend/src/pages/sys-admin/users/users.js
index 0da88d4c0a..0c9c3723fe 100644
--- a/frontend/src/pages/sys-admin/users/users.js
+++ b/frontend/src/pages/sys-admin/users/users.js
@@ -441,7 +441,7 @@ class Users extends Component {
     } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar search={this.getSearch()}>
+        <MainPanelTopbar search={this.getSearch()} {...this.props}>
           {hasUserSelected ?
             <Fragment>
               <Button className="btn btn-secondary operation-item" onClick={this.toggleBatchSetQuotaDialog}>{gettext('Set Quota')}</Button>
diff --git a/frontend/src/pages/sys-admin/virus-scan/all-virus-files.js b/frontend/src/pages/sys-admin/virus-scan/all-virus-files.js
index 7d463b4fb7..6634d21fbe 100644
--- a/frontend/src/pages/sys-admin/virus-scan/all-virus-files.js
+++ b/frontend/src/pages/sys-admin/virus-scan/all-virus-files.js
@@ -286,7 +286,7 @@ class AllVirusFiles extends Component {
   render() {
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center">
           <div className="cur-view-container">
             <Nav currentItem="all" />
diff --git a/frontend/src/pages/sys-admin/virus-scan/unhandled-virus-files.js b/frontend/src/pages/sys-admin/virus-scan/unhandled-virus-files.js
index c4e4eca503..2093a6430d 100644
--- a/frontend/src/pages/sys-admin/virus-scan/unhandled-virus-files.js
+++ b/frontend/src/pages/sys-admin/virus-scan/unhandled-virus-files.js
@@ -384,13 +384,13 @@ class UnhandledVirusFiles extends Component {
     return (
       <Fragment>
         {this.state.virusFiles.some(item => item.isSelected) ? (
-          <MainPanelTopbar>
+          <MainPanelTopbar {...this.props}>
             <Fragment>
               <Button onClick={this.deleteSelectedItems} className="operation-item">{gettext('Delete')}</Button>
               <Button onClick={this.ignoreSelectedItems} className="operation-item">{gettext('Ignore')}</Button>
             </Fragment>
           </MainPanelTopbar>
-        ) : <MainPanelTopbar />
+        ) : <MainPanelTopbar {...this.props} />
         }
         <div className="main-panel-center">
           <div className="cur-view-container">
diff --git a/frontend/src/pages/sys-admin/web-settings/web-settings.js b/frontend/src/pages/sys-admin/web-settings/web-settings.js
index c170ee0090..ff14196bb5 100644
--- a/frontend/src/pages/sys-admin/web-settings/web-settings.js
+++ b/frontend/src/pages/sys-admin/web-settings/web-settings.js
@@ -86,7 +86,7 @@ class WebSettings extends Component {
     const { loading, errorMsg, config_dict, logoPath, faviconPath, loginBGPath } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar />
+        <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path">
diff --git a/frontend/src/pages/sys-admin/work-weixin-departments.js b/frontend/src/pages/sys-admin/work-weixin-departments.js
index 303ad662bc..6182707854 100644
--- a/frontend/src/pages/sys-admin/work-weixin-departments.js
+++ b/frontend/src/pages/sys-admin/work-weixin-departments.js
@@ -5,7 +5,7 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot, isPro } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
-import Account from '../../components/common/account';
+import MainPanelTopbar from './main-panel-topbar';
 import { WorkWeixinDepartmentMembersList, WorkWeixinDepartmentsTreePanel } from './work-weixin';
 import ImportWorkWeixinDepartmentDialog from '../../components/dialog/import-work-weixin-department-dialog';
 
@@ -289,28 +289,14 @@ class WorkWeixinDepartments extends Component {
     this.getWorkWeixinDepartmentsList(null);
   }
 
-  renderNav() {
-    const btnClass = 'btn btn-secondary operation-item ';
-    return (
-      <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"></span>
-          <Button className={btnClass + 'my-1 d-md-none'} onClick={this.onSubmit}>{'导入用户'}</Button>
-          <Button className={btnClass + 'hidden-md-up'} onClick={this.onSubmit}>{'导入用户'}</Button>
-        </div>
-        <div className="common-toolbar">
-          <Account isAdminPanel={true}/>
-        </div>
-      </div>
-    );
-  }
-
   render() {
     const { isImportDepartmentDialogShow, isTreeLoading, importDepartment, importDepartmentChildrenCount, importDepartmentMembersCount } = this.state;
     let canImportDepartment = !!(isPro && isImportDepartmentDialogShow && !isTreeLoading && importDepartment);
     return (
       <Fragment>
-        {this.renderNav()}
+        <MainPanelTopbar {...this.props}>
+          <Button className="operation-item" onClick={this.onSubmit}>{'导入用户'}</Button>
+        </MainPanelTopbar>
         <div className="main-panel-center">
           <div className="cur-view-container">
             <div className="cur-view-path">