change side nav folded animation (#6627)

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

@@ -10,6 +10,7 @@ import { seafileAPI } from '../utils/seafile-api';
 import { Utils } from '../utils/utils';
 import Group from '../models/group';
 import toaster from './toast';
+import { FOLDED_SIDE_NAV_FILES, FOLDED_SIDE_NAV } from '../constants/zIndexes';
 
 
 import '../css/main-side-nav-folded.css';
@@ -94,26 +95,18 @@ class MainSideNavFolded extends React.Component {
     let showActivity = isDocs || isPro || !isDBSqlite3;
     const { groupItems, isFilesSubNavShown } = this.state;
     return (
-      <div className="side-nav side-nav-folded">
+      <div className='side-nav-folded-container h-100 position-relative'>
-        <div className={'side-nav-con d-flex flex-column'}>
+        {/* FOLDED SIDE NAV FILES */}
-          <ul className="nav nav-pills flex-column nav-container">
+        <div className="side-nav side-nav-folded position-relative" style={{ zIndex: FOLDED_SIDE_NAV_FILES }}>
-
+          <div className='side-nav-con p-0'>
-            <li className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
+            <div className="nav nav-pills nav-container">
-              <Link
-                to={ siteRoot + 'libraries/' }
-                className={`nav-link ellipsis ${this.getActiveClass('libraries')}`}
-                onClick={(e) => this.tabItemClick(e, 'libraries')}
-                onMouseOver={this.openSubNav}
-              >
-                <span className="sf3-font-files sf3-font mr-0" aria-hidden="true"></span>
-              </Link>
               <ul
                 id="files-sub-nav"
                 className="sub-nav position-fixed rounded border shadow p-4 o-auto"
                 style={{
                   'left': isFilesSubNavShown ? SIDE_PANEL_FOLDED_WIDTH + 4 : '-240px',
                   'maxHeight': SUB_NAV_ITEM_HEIGHT * 10 + 16 * 2,
-                  'opacity': isFilesSubNavShown ? 1 : 0.5,
+                  'opacity': isFilesSubNavShown ? 1 : 0,
                 }}
                 ref={ref => this.filesSubNav = ref}
                 onMouseLeave={this.closeSubNav}
@@ -124,6 +117,22 @@ class MainSideNavFolded extends React.Component {
                   currentTab={this.props.currentTab}
                 />
               </ul>
+            </div>
+          </div>
+        </div>
+        {/* FOLDED SIDE NAVS */}
+        <div className="side-nav side-nav-folded h-100 position-relative" style={{ zIndex: FOLDED_SIDE_NAV }}>
+          <div className='side-nav-con d-flex flex-column'>
+            <ul className="nav nav-pills flex-column nav-container">
+              <li className={`nav-item flex-column ${this.getActiveClass('libraries')}`} onClick={this.openSubNav}>
+                <Link
+                  to={ siteRoot + 'libraries/' }
+                  className={`nav-link ellipsis ${this.getActiveClass('libraries')}`}
+                  onClick={(e) => this.tabItemClick(e, 'libraries')}
+                  onMouseOver={this.openSubNav}
+                >
+                  <span className="sf3-font-files sf3-font mr-0" aria-hidden="true"></span>
+                </Link>
               </li>
 
               <li className={`nav-item ${this.getActiveClass('starred')}`} onMouseEnter={this.closeSubNav}>
@@ -136,7 +145,11 @@ class MainSideNavFolded extends React.Component {
               {showActivity &&
                 <>
                   <li className={`nav-item ${this.getActiveClass('dashboard')}`} onMouseEnter={this.closeSubNav}>
-                  <Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} onClick={(e) => this.tabItemClick(e, 'dashboard')}>
+                    <Link
+                      className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`}
+                      to={siteRoot + 'dashboard/'}
+                      onClick={(e) => this.tabItemClick(e, 'dashboard')}
+                    >
                       <span className="sf3-font-activities sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-dashboard"></span>
                       <Tip target="main-side-nav-folded-dashboard" text={gettext('Activities')} />
                     </Link>
@@ -145,7 +158,11 @@ class MainSideNavFolded extends React.Component {
               }
 
               <li className={`nav-item ${this.getActiveClass('published')}`} onMouseEnter={this.closeSubNav}>
-              <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} onClick={(e) => this.tabItemClick(e, 'published')}>
+                <Link
+                  className={`nav-link ellipsis ${this.getActiveClass('published')}`}
+                  to={siteRoot + 'published/'}
+                  onClick={(e) => this.tabItemClick(e, 'published')}
+                >
                   <span className="sf3-font-wiki sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-wikis"></span>
                   <Tip target="main-side-nav-folded-wikis" text={gettext('Wikis')} />
                 </Link>
@@ -153,7 +170,11 @@ class MainSideNavFolded extends React.Component {
 
               {canInvitePeople &&
                 <li className={`nav-item ${this.getActiveClass('invitations')}`} onMouseEnter={this.closeSubNav}>
-                <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} onClick={(e) => this.tabItemClick(e, 'invitations')}>
+                  <Link
+                    className={`nav-link ellipsis ${this.getActiveClass('invitations')}`}
+                    to={siteRoot + 'invitations/'}
+                    onClick={(e) => this.tabItemClick(e, 'invitations')}
+                  >
                     <span className="sf3-font-invite-visitors sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-invitations"></span>
                     <Tip target="main-side-nav-folded-invitations" text={gettext('Invite Guest')} />
                   </Link>
@@ -178,7 +199,7 @@ class MainSideNavFolded extends React.Component {
               :
               <ul className="nav nav-pills flex-column nav-container">
                 <li className='nav-item'>
-                <a className={'nav-link'} href={siteRoot + 'help/'} title={gettext('Help')}>
+                  <a className='nav-link' href={siteRoot + 'help/'} title={gettext('Help')}>
                     <span className="sf3-font-help sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-help"></span>
                     <Tip target="main-side-nav-folded-help" text={gettext('Help')} />
                   </a>
@@ -220,6 +241,7 @@ class MainSideNavFolded extends React.Component {
             </div>
           </div>
         </div>
+      </div>
     );
   }
 }

frontend/src/constants/zIndexes.js

@@ -1,3 +1,7 @@
 export const RESIZE_BAR = 2;
 
+export const FOLDED_SIDE_NAV_FILES = 2;
+
+export const FOLDED_SIDE_NAV = 3;
+
 export const EXTRA_ATTRIBUTES_DIALOG_MODAL = 1048;

frontend/src/css/main-side-nav-folded.css

@@ -1,9 +1,11 @@
 .side-panel .side-nav-folded {
   overflow: visible;
+  background-color: #fff;
 }
 
 .side-panel .side-nav-folded .side-nav-con {
   overflow: visible;
+  background-color: #fff;
 }
 
 .side-panel .side-nav-folded .nav-item {
@@ -17,6 +19,6 @@
 .side-nav-folded #files-sub-nav {
   width: 240px;
   background: #fff;
-  z-index: 2;
+  top: 60px;
   transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1);
 }