adjust my library style in mobile

frontend/src/app.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { Router, navigate } from '@reach/router';
+import MediaQuery from 'react-responsive';
+import { Modal } from 'reactstrap';
 import { siteRoot, canAddRepo, isDocs } from './utils/constants';
 import { Utils } from './utils/utils';
 import SystemNotification from './components/system-notification';
@@ -65,6 +67,14 @@ class App extends Component {
     }
   }
 
+  componentWillMount() {
+    if (window.screen.width <= 768) {
+      this.setState({
+        isSidePanelClosed: true
+      });
+    }
+  }
+
   componentDidMount() {
     // e.g.  from http://127.0.0.1:8000/drafts/reviews/
     // get reviews  
@@ -142,6 +152,9 @@ class App extends Component {
       let { currentTab, pathPrefix } = this.state;
       window.history.replaceState({currentTab: currentTab, pathPrefix: pathPrefix}, null);
     });
+    if (window.screen.width <= 768 && !this.state.isSidePanelClosed) {
+      this.setState({ isSidePanelClosed: true });
+    }
   } 
 
   generatorPrefix = (tabName, groupID) => {
@@ -185,8 +198,14 @@ class App extends Component {
     }
   }
 
+  toggleSidePanel = () => {
+    this.setState({
+      isSidePanelClosed: !this.state.isSidePanelClosed
+    });
+  }
+
   render() {
-    let { currentTab } = this.state;
+    let { currentTab, isSidePanelClosed } = this.state;
 
     const home = canAddRepo ?
       <MyLibraries path={ siteRoot } onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} /> :
@@ -236,6 +255,9 @@ class App extends Component {
               <InvitationsView path={siteRoot + 'invitations/'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
             </Router>
           </MainPanel>
+          <MediaQuery query="(max-width: 768px)">
+            <Modal isOpen={!isSidePanelClosed} toggle={this.toggleSidePanel} contentClassName="d-none"></Modal>
+          </MediaQuery>
         </div>
       </React.Fragment>
     );

frontend/src/css/layout.css

@@ -34,8 +34,9 @@
   .side-panel {
     position:fixed;
     left:-300px;
-    z-index: 99; /* important! */
+    z-index: 1060;
-    width:300px;
+    width: 300px;
+    max-width: calc(100% - 40px);
     height:100%;
     background:#f8f8f8;
     -webkit-transition: all 0.3s ease;

frontend/src/css/toolbar.css

@@ -107,3 +107,8 @@
 }
 /* end path toolbar */
 
+@media (max-width: 767px) {
+  .border-left-show:before {
+    width: 0;
+  }
+}

frontend/src/pages/my-libs/my-libs.js

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
 import cookie from 'react-cookies';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, loginUrl} from '../../utils/constants';
@@ -10,6 +11,11 @@ import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
 import LibDetail from '../../components/dirent-detail/lib-details';
 import MylibRepoListView from './mylib-repo-list-view';
 
+const propTypes = {
+  onShowSidePanel: PropTypes.func.isRequired,
+  onSearchedClick: PropTypes.func.isRequired,
+};
+
 class MyLibraries extends Component {
   constructor(props) {
     super(props);
@@ -175,4 +181,6 @@ class MyLibraries extends Component {
   }
 }
 
+MyLibraries.propTypes = propTypes;
+
 export default MyLibraries;