Sidebar toggle on mobile

app/src/frontend/building/sidebar.css

@@ -3,25 +3,41 @@
  */
 .info-container {
     position: absolute;
-    top: 85px;
+    top: 75px;
     left: 0;
     bottom: 0;
-    overflow-y: auto;
     width: 95%;
-    padding: 0 0 2em;
-    background: #fff;
-    z-index: 1000;
+    width: calc(100% - 40px);
+    z-index: 1001;
     transition: transform 0.3s;
+    transform: translateX(0);
+}
+.info-container.offscreen {
     transform: translateX(-100%);
 }
-.info-container.onscreen {
-    transform: translateX(0);
+.info-container-collapse {
+    position: absolute;
+    right: -32px;
+    top: 2rem;
+    padding: 2.5rem 0rem;
+    border-radius: 0 .25rem .25rem 0;
 }
 @media (min-width: 768px){
     .info-container {
         width: 480px; /* to match .main-header menu width */
-       transform: translateX(0);
     }
+    .info-container.offscreen {
+        transform: translateX(0);
+    }
+    .info-container-collapse {
+        display: none;
+    }
+}
+.info-container-inner {
+    overflow-y: auto;
+    height: 100%;
+    padding: 0 0 2em;
+    background: #fff;
 }
 
 /**

app/src/frontend/building/sidebar.tsx

@@ -1,11 +1,29 @@
-import React from 'react';
+import React, { useState, Fragment } from 'react';
 
 import './sidebar.css';
+import { BackIcon, ForwardIcon } from '../components/icons';
 
-const Sidebar: React.FC<{}> = (props) => (
-    <div id="sidebar" className="info-container">
-        { props.children }
-    </div>
-);
+const Sidebar: React.FC<{}> = (props) => {
+    const [collapsed, setCollapsed] = useState(true);
+
+    return (
+        <Fragment>
+        <div id="sidebar" className={"info-container " + (collapsed? "offscreen": "")}>
+            <button className="info-container-collapse btn btn-light"
+                onClick={() => setCollapsed(!collapsed)}
+                >
+                {
+                    collapsed?
+                        <ForwardIcon />
+                        : <BackIcon />
+                }
+            </button>
+            <div className="info-container-inner">
+                { props.children }
+            </div>
+        </div>
+        </Fragment>
+    );
+}
 
 export default Sidebar;

app/src/frontend/components/icons.tsx

@@ -2,7 +2,7 @@
  * Mini-library of icons
  */
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faAngleLeft, faCaretDown, faCaretRight, faCaretUp, faCheck, faCheckDouble,
+import { faAngleLeft, faAngleRight, faCaretDown, faCaretRight, faCaretUp, faCheck, faCheckDouble,
     faEye, faInfoCircle, faPaintBrush, faQuestionCircle, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
@@ -15,6 +15,7 @@ library.add(
     faCheck,
     faCheckDouble,
     faAngleLeft,
+    faAngleRight,
     faCaretDown,
     faCaretUp,
     faCaretRight,
@@ -54,6 +55,10 @@ const BackIcon = () => (
     <FontAwesomeIcon icon="angle-left" />
 );
 
+const ForwardIcon = () => (
+    <FontAwesomeIcon icon="angle-right" />
+);
+
 const DownIcon = () => (
     <FontAwesomeIcon icon="caret-down" />
 );
@@ -79,6 +84,7 @@ export {
     SaveIcon,
     SaveDoneIcon,
     BackIcon,
+    ForwardIcon,
     DownIcon,
     UpIcon,
     RightIcon,