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>
     );