12.0 nav side highlight (#6220)

* 01 fix code format

* 02 add nav highlight

frontend/src/components/main-side-nav.js

@@ -98,7 +98,7 @@ class MainSideNav extends React.Component {
       <>
         {this.state.groupItems.map(item => {
           return (
-            <li key={item.id} className="nav-item">
+            <li key={item.id} className={`nav-item ${this.getActiveClass(item.name)}`}>
               <Link
                 to={siteRoot + 'group/' + item.id + '/'}
                 className={`nav-link ellipsis ${this.getActiveClass(item.name)}`}
@@ -112,7 +112,7 @@ class MainSideNav extends React.Component {
         })}
         {canAddGroup && (
           <>
-            <li className="nav-item" onClick={this.toggleCreateGroupDialog}>
+            <li className='nav-item' onClick={this.toggleCreateGroupDialog}>
               <span className="nav-link" role="button">
                 <i className="sf2-icon-plus nav-icon" aria-hidden="true"></i>
                 {gettext('New Group')}
@@ -143,7 +143,7 @@ class MainSideNav extends React.Component {
     let linksNavItem = null;
     if (canGenerateShareLink) {
       linksNavItem = (
-        <li className="nav-item">
+        <li className={`nav-item ${this.getActiveClass('share-admin-share-links')}`}>
           <Link to={siteRoot + 'share-admin-share-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-share-links')}`} title={gettext('Links')} onClick={(e) => this.tabItemClick(e, 'share-admin-share-links')}>
             <span aria-hidden="true" className="sharp">#</span>
             <span className="nav-text">{gettext('Links')}</span>
@@ -152,7 +152,7 @@ class MainSideNav extends React.Component {
       );
     } else if (canGenerateUploadLink) {
       linksNavItem = (
-        <li className="nav-item">
+        <li className={`nav-item ${this.getActiveClass('share-admin-upload-links')}`}>
           <Link to={siteRoot + 'share-admin-upload-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-upload-links')}`} title={gettext('Links')} onClick={(e) => this.tabItemClick(e, 'share-admin-upload-links')}>
             <span aria-hidden="true" className="sharp">#</span>
             <span className="nav-text">{gettext('Links')}</span>
@@ -167,14 +167,14 @@ class MainSideNav extends React.Component {
         style={style}
       >
         {canAddRepo && (
-          <li className="nav-item">
+          <li className={`nav-item ${this.getActiveClass('share-admin-libs')}`}>
             <Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={(e) => this.tabItemClick(e, 'share-admin-libs')}>
               <span aria-hidden="true" className="sharp">#</span>
               <span className="nav-text">{gettext('Libraries')}</span>
             </Link>
           </li>
         )}
-        <li className="nav-item">
+        <li className={`nav-item ${this.getActiveClass('share-admin-folders')}`}>
           <Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={(e) => this.tabItemClick(e, 'share-admin-folders')}>
             <span aria-hidden="true" className="sharp">#</span>
             <span className="nav-text">{gettext('Folders')}</span>
@@ -189,7 +189,7 @@ class MainSideNav extends React.Component {
     return (
       customNavItems.map((item, idx) => {
         return (
-          <li key={idx} className="nav-item">
+          <li key={idx} className='nav-item'>
             <a href={item.link} className="nav-link ellipsis" title={item.desc}>
               <span className={item.icon} aria-hidden="true"></span>
               <span className="nav-text">{item.desc}</span>
@@ -220,29 +220,29 @@ class MainSideNav extends React.Component {
         <div className="side-nav-con">
           <h2 className="mb-2 px-2 font-weight-normal heading">{gettext('Workspace')}</h2>
           <ul className="nav nav-pills flex-column nav-container">
-            <li className="nav-item flex-column" id="files">
+            <li id="files" className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
               <Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}>
                 <span className="sf3-font-files sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Files')}</span>
-                <span className={`toggle-icon sf3-font sf3-font-drop-down ${filesNavUnfolded ? '' : 'icon-rotate-90'} ${this.getActiveClass('libraries') ? 'text-white' : ''}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
+                <span className={`toggle-icon sf3-font sf3-font-drop-down ${filesNavUnfolded ? '' : 'icon-rotate-90'}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
               </Link>
-              <ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${filesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={{height: filesNavUnfolded ? this.filesNavHeight : 0}}>
+              <ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${filesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={{height: filesNavUnfolded ? this.filesNavHeight : 0, opacity: filesNavUnfolded ? 1 : 0}}>
                 {canAddRepo && (
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('my-libs') || this.getActiveClass('deleted')}`}>
                     <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={(e) => this.tabItemClick(e, 'my-libs')}>
                       <span className="sf3-font-mine sf3-font nav-icon" aria-hidden="true"></span>
                       <span className="nav-text">{gettext('My Libraries')}</span>
                     </Link>
                   </li>
                 )}
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass('shared-libs')}`}>
                   <Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={(e) => this.tabItemClick(e, 'shared-libs')}>
                     <span className="sf3-font-share-with-me sf3-font nav-icon" aria-hidden="true"></span>
                     <span className="nav-text">{gettext('Shared with me')}</span>
                   </Link>
                 </li>
                 {canViewOrg &&
-                <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'org')}>
+                <li className={`nav-item ${this.getActiveClass('org')}`} onClick={(e) => this.tabItemClick(e, 'org')}>
                   <Link to={ siteRoot + 'org/' } className={`nav-link ellipsis ${this.getActiveClass('org')}`} title={gettext('Shared with all')}>
                     <span className="sf3-font-share-with-all sf3-font nav-icon" aria-hidden="true"></span>
                     <span className="nav-text">{gettext('Shared with all')}</span>
@@ -253,35 +253,35 @@ class MainSideNav extends React.Component {
               </ul>
             </li>
 
-            <li className="nav-item">
+            <li className={`nav-item ${this.getActiveClass('starred')}`}>
               <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={(e) => this.tabItemClick(e, 'starred')}>
                 <span className="sf3-font-starred sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Favorites')}</span>
               </Link>
             </li>
             {showActivity &&
-              <li className="nav-item">
+              <li className={`nav-item ${this.getActiveClass('dashboard')}`}>
                 <Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} title={gettext('Activities')} onClick={(e) => this.tabItemClick(e, 'dashboard')}>
                   <span className="sf3-font-activities sf3-font" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Activities')}</span>
                 </Link>
               </li>
             }
-            <li className="nav-item">
+            <li className={`nav-item ${this.getActiveClass('published')}`}>
               <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Wikis')} onClick={(e) => this.tabItemClick(e, 'published')}>
                 <span className="sf3-font-wiki sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Wikis')}</span>
               </Link>
             </li>
             {canInvitePeople &&
-            <li className="nav-item">
+            <li className={`nav-item ${this.getActiveClass('invitations')}`}>
               <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} title={gettext('Invite Guest')} onClick={(e) => this.tabItemClick(e, 'invitations')}>
                 <span className="sf3-font-invite-visitors sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Invite Guest')}</span>
               </Link>
             </li>
             }
-            <li className="nav-item flex-column" id="share-admin-nav">
+            <li id="share-admin-nav" className='nav-item flex-column'>
               <a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
                 <span className="sf3-font-wrench sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Share Admin')}</span>
@@ -297,14 +297,14 @@ class MainSideNav extends React.Component {
             <div className='side-nav-footer' dangerouslySetInnerHTML={{__html: sideNavFooterCustomHtml}}></div>
           ) : (
             <ul className="nav nav-pills flex-column nav-container">
-              <li className="nav-item">
+              <li className='nav-item'>
                 <a className={'nav-link'} href={siteRoot + 'help/'} title={gettext('Help')}>
                   <span className="sf3-font-help sf3-font" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Help')}</span>
                 </a>
               </li>
               {enableTC &&
-                <li className="nav-item">
+                <li className='nav-item'>
                   <a href={`${siteRoot}terms/`} className="nav-link">
                     <span className="sf3-font-terms sf3-font" aria-hidden="true"></span>
                     <span className="nav-text">{gettext('Terms')}</span>
@@ -323,7 +323,7 @@ class MainSideNav extends React.Component {
                   })}
                 </>
               )}
-              <li className="nav-item">
+              <li className='nav-item'>
                 <a href={siteRoot + 'download_client_program/'} className="nav-link">
                   <span className="sf3-font-devices sf3-font" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Clients')}</span>

frontend/src/css/layout.css

@@ -163,7 +163,7 @@
 }
 
 .table-drop-active::before {
-  border: 1px solid rgba(69,170,242); 
+  border: 1px solid rgba(69, 170, 242); 
   content: '';
   position: absolute;
   display: block;

frontend/src/css/lib-content-view.css

@@ -52,15 +52,15 @@
   padding: 12px 12px 12px 0;
   line-height: 1.5;
   flex: 1;
-  border: 1px solid rgba(69,170,242,0);
+  border: 1px solid rgba(69, 170, 242, 0);
 }
 
 .tree-view-drop {
-  border: 1px solid rgba(69,170,242);
+  border: 1px solid rgba(69, 170, 242);
 }
 
 .tree-view-drop::before {
-  border-left: 1px solid rgba(69,170,242);
+  border-left: 1px solid rgba(69, 170, 242);
   content: '';
   margin-left: 8px;
   height: calc(100% + 24px);

frontend/src/css/react-context-menu.css

@@ -7,7 +7,7 @@
     text-align: left;
     background-color: #fff;
     background-clip: padding-box;
-    border: 1px solid rgba(0,0,0,.15);
+    border: 1px solid rgba(0, 0, 0, .15);
     border-radius: .25rem;
     outline: none;
     opacity: 0;

frontend/src/pages/org-admin/side-panel.js

@@ -33,76 +33,76 @@ class SidePanel extends React.Component {
             <div className="side-nav-con">
               <h3 className="sf-heading" style={{ 'color': '#f7941d' }}>{gettext('Admin')}</h3>
               <ul className="nav nav-pills flex-column nav-container">
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass('info')}`}>
                   <Link className={`nav-link ellipsis ${this.getActiveClass('info')}`} to={siteRoot + 'org/info/'} onClick={() => this.tabItemClick('info')} >
                     <span className="sf2-icon-info"></span>
                     <span className="nav-text">{gettext('Info')}</span>
                   </Link>
                 </li>
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass('statistics-admin')}`}>
                   <Link className={`nav-link ellipsis ${this.getActiveClass('statistics-admin')}`} to={siteRoot + 'org/statistics-admin/file/'} onClick={() => this.tabItemClick('statistics-admin')} >
                     <span className="sf2-icon-histogram"></span>
                     <span className="nav-text">{gettext('Statistic')}</span>
                   </Link>
                 </li>
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass('deviceadmin')}`}>
                   <Link className={`nav-link ellipsis ${this.getActiveClass('deviceadmin')}`} to={siteRoot + 'org/deviceadmin/desktop-devices/'} onClick={() => this.tabItemClick('deviceadmin')} >
                     <span className="sf2-icon-monitor"></span>
                     <span className="nav-text">{gettext('Devices')}</span>
                   </Link>
                 </li>
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass('web-settings')}`}>
                   <Link className={`nav-link ellipsis ${this.getActiveClass('web-settings')}`} to={siteRoot + 'org/web-settings/'} onClick={() => this.tabItemClick('web-settings')} >
                     <span className="sf2-icon-cog2"></span>
                     <span className="nav-text">{gettext('Settings')}</span>
                   </Link>
                 </li>
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass('repoadmin')}`}>
                   <Link className={`nav-link ellipsis ${this.getActiveClass('repoadmin')}`} to={siteRoot + 'org/repoadmin/'} onClick={() => this.tabItemClick('repoadmin')} >
                     <span className="sf2-icon-library"></span>
                     <span className="nav-text">{gettext('Libraries')}</span>
                   </Link>
                 </li>
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass('users')}`}>
                   <Link className={`nav-link ellipsis ${this.getActiveClass('users') || this.getActiveClass('admins')}`} to={siteRoot + 'org/useradmin/'} onClick={() => this.tabItemClick('users')} >
                     <span className="sf2-icon-user"></span>
                     <span className="nav-text">{gettext('Users')}</span>
                   </Link>
                 </li>
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass('groupadmin')}`}>
                   <Link className={`nav-link ellipsis ${this.getActiveClass('groupadmin')}`} to={siteRoot + 'org/groupadmin/'} onClick={() => this.tabItemClick('groupadmin')}>
                     <span className="sf2-icon-group"></span>
                     <span className="nav-text">{gettext('Groups')}</span>
                   </Link>
                 </li>
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass('departmentadmin')}`}>
                   <Link className={`nav-link ellipsis ${this.getActiveClass('departmentadmin')}`} to={siteRoot + 'org/departmentadmin/'} onClick={() => this.tabItemClick('departmentadmin')} >
                     <span className="sf2-icon-organization"></span>
                     <span className="nav-text">{gettext('Departments')}</span>
                   </Link>
                 </li>
                 {enableSubscription &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('subscription')}`}>
                     <Link className={`nav-link ellipsis ${this.getActiveClass('subscription')}`} to={siteRoot + 'org/subscription/'} onClick={() => this.tabItemClick('subscription')} >
                       <Icon symbol='currency' />
                       <span className="nav-text">{'付费管理'}</span>
                     </Link>
                   </li>
                 }
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass('publinkadmin')}`}>
                   <Link className={`nav-link ellipsis ${this.getActiveClass('publinkadmin')}`} to={siteRoot + 'org/publinkadmin/'} onClick={() => this.tabItemClick('publinkadmin')} >
                     <span className="sf2-icon-link"></span>
                     <span className="nav-text">{gettext('Links')}</span>
                   </Link>
                 </li>
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass('logadmin') || this.getActiveClass('file-update') || this.getActiveClass('perm-audit')}`}>
                   <Link className={`nav-link ellipsis ${this.getActiveClass('logadmin') || this.getActiveClass('file-update') || this.getActiveClass('perm-audit')}`} to={siteRoot + 'org/logadmin/'} onClick={() => this.tabItemClick('logadmin')} >
                     <span className="sf2-icon-clock"></span>
                     <span className="nav-text">{gettext('Logs')}</span>
                   </Link>
                 </li>
                 {enableMultiADFS &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('SAML config')}`}>
                     <Link className={`nav-link ellipsis ${this.getActiveClass('SAML config')}`} to={siteRoot + 'org/samlconfig/'} onClick={() => this.tabItemClick('SAML config')} >
                       <span className="sf2-icon-cog2"></span>
                       <span className="nav-text">{gettext('SAML config')}</span>

frontend/src/pages/sys-admin/side-panel.js

@@ -33,7 +33,7 @@ class SidePanel extends React.Component {
               <h3 className="sf-heading">{gettext('System Admin')}</h3>
               <ul className="nav nav-pills flex-column nav-container">
                 {canViewSystemInfo &&
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass('info')}`}>
                   <Link
                     className={`nav-link ellipsis ${this.getActiveClass('info')}`}
                     to={siteRoot + 'sys/info/'}
@@ -45,7 +45,7 @@ class SidePanel extends React.Component {
                 </li>
                 }
                 {(isPro || !isDBSqlite3) && canViewStatistic &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('statistic')}`}>
                     <Link className={`nav-link ellipsis ${this.getActiveClass('statistic')}`}
                       to={siteRoot + 'sys/statistics/file/'}
                       onClick={() => this.props.tabItemClick('statistic')}
@@ -56,7 +56,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {otherPermission &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('devices')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('devices')}`}
                       to={siteRoot + 'sys/desktop-devices/'}
@@ -68,7 +68,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {constanceEnabled && canConfigSystem &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('web-settings')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('web-settings')}`}
                       to={siteRoot + 'sys/web-settings/'}
@@ -80,7 +80,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {canManageLibrary &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('libraries')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('libraries')}`}
                       to={siteRoot + 'sys/all-libraries/'}
@@ -92,7 +92,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {canManageUser &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('users')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('users')}`}
                       to={siteRoot + 'sys/users/'}
@@ -104,7 +104,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {canManageGroup &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('groups')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('groups')}`}
                       to={siteRoot + 'sys/groups/'}
@@ -116,7 +116,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {isPro && canManageGroup &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('departments')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('departments')}`}
                       to={siteRoot + 'sys/departments/'}
@@ -128,7 +128,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {multiTenancy && otherPermission &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('organizations')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('organizations')}`}
                       to={siteRoot + 'sys/organizations/'}
@@ -140,7 +140,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {isPro && multiInstitution && otherPermission &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('institutions')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('institutions')}`}
                       to={siteRoot + 'sys/institutions/'}
@@ -152,7 +152,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {otherPermission &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('notifications')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('notifications')}`}
                       to={siteRoot + 'sys/notifications/'}
@@ -164,7 +164,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {otherPermission &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('links')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('links')}`}
                       to={siteRoot + 'sys/share-links/'}
@@ -176,7 +176,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {sysadminExtraEnabled && canViewUserLog &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('logs')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('logs')}`}
                       to={siteRoot + 'sys/logs/login'}
@@ -188,7 +188,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {isPro && otherPermission && enableFileScan &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('file-scan-records')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('file-scan-records')}`}
                       to={siteRoot + 'sys/file-scan-records/'}
@@ -200,7 +200,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {isPro && otherPermission &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('virus-files')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('virus-files')}`}
                       to={siteRoot + 'sys/virus-files/all/'}
@@ -212,7 +212,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {isPro && enableGuestInvitation && otherPermission &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('invitations')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('invitations')}`}
                       to={siteRoot + 'sys/invitations/'}
@@ -224,7 +224,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {otherPermission && enableTermsAndConditions &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('termsandconditions')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('termsandconditions')}`}
                       to={siteRoot + 'sys/terms-and-conditions/'}
@@ -236,7 +236,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {isPro && canViewAdminLog &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('adminLogs')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('adminLogs')}`}
                       to={siteRoot + 'sys/admin-logs/operation'}
@@ -248,7 +248,7 @@ class SidePanel extends React.Component {
                   </li>
                 }
                 {otherPermission && enableWorkWeixin &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('work-weixin')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('work-weixin')}`}
                       to={siteRoot + 'sys/work-weixin/'}
@@ -261,7 +261,7 @@ class SidePanel extends React.Component {
                 }
 
                 {otherPermission && enableDingtalk &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('dingtalk')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('dingtalk')}`}
                       to={siteRoot + 'sys/dingtalk/'}
@@ -274,7 +274,7 @@ class SidePanel extends React.Component {
                 }
 
                 {otherPermission && enableShareLinkReportAbuse &&
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('abuse-reports')}`}>
                     <Link
                       className={`nav-link ellipsis ${this.getActiveClass('abuse-reports')}`}
                       to={siteRoot + 'sys/abuse-reports/'}

media/css/seahub_react.css

@@ -1405,3 +1405,79 @@ a.table-sort-op:hover {
 .word-break-all {
   word-break: break-all;
 }
+
+.side-panel .nav .nav-item .nav-link.active {
+  color: #212529;
+  text-decoration: none;
+  border-bottom: none;
+  z-index: 1;
+}
+
+.side-panel .nav-pills .nav-item .nav-link:hover {
+  background-color: #F0F0F0;
+}
+
+.side-panel .nav-pills .nav-item .nav-link.active {
+  background-color: #F5F5F5;
+  color: #212529;
+  border: none;
+}
+
+.side-panel .nav-pills .nav-item .nav-link.active:hover {
+  background-color: #F0F0F0;
+}
+
+.side-panel .side-nav-con {
+  padding: 0.75rem 1rem;
+}
+
+.side-panel .side-nav-con .active .sharp,
+.side-panel .side-nav-con .active .nav-text {
+  font-weight: normal;
+}
+
+.side-panel .side-nav-con .active .seafile-multicolor-icon, 
+.side-panel .side-nav-con .active [class^="sf2-icon-"],
+.side-panel .side-nav-con .active [class^="sf3-font-"],
+.side-panel .side-nav-con .active .nav-icon,
+.side-panel .side-nav-con .active .sharp {
+  color: #999;
+}
+
+.side-panel .side-nav .side-nav-con .nav-item {
+  position: relative;
+  background-color: #fff;
+}
+
+.side-panel .side-nav .side-nav-con .nav-item.active::before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 4px;
+  height: 30px;
+  left: -8px;
+  top: 4px;
+  background-color: #FF8000;
+  border-radius: 2px;
+  z-index: 2;
+}
+
+.side-panel .side-nav .side-nav-con #files-sub-nav .nav-item.active::before {
+  top: 2px;
+  height: 24px;
+}
+
+.side-panel .side-nav-con .sub-nav {
+  overflow: visible;
+  width: 100%;
+}
+
+.side-panel .side-nav-con .nav .nav-item .nav-link {
+  border: none;
+}
+
+@media (max-width: 768px) {
+  .side-panel .side-nav .side-nav-con .nav-item {
+    background-color: #f8f8f8;
+  }
+}