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>