v1.6.0/resizeable sidebar

app/src/App.js

@@ -18,7 +18,7 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
 ************************************************************************/
 import React, { useState, useEffect } from 'react';
 import Router from 'route-lite';
-import { Fab, createMuiTheme, ThemeProvider, Snackbar } from '@material-ui/core';
+import { Fab, createMuiTheme, ThemeProvider, Snackbar, Tooltip } from '@material-ui/core';
 import Create from './Create';
 import Loading from './Loading';
 import firebase from 'firebase/app';
@@ -47,6 +47,28 @@ const Routes = (props) => (
   </Router>
 );
 
+const resetResize = () => {
+  const checkedX = 400;
+  document.documentElement.style.setProperty('--party-width', `${checkedX}px`);
+  document.documentElement.style.setProperty('--neg-party-width', `-${checkedX}px`);
+}
+
+const doResize = (ev) => {
+  const checkedX = window.innerWidth - Math.min(window.innerWidth-300, Math.max((window.innerWidth*0.5), ev.clientX ));
+  document.documentElement.style.setProperty('--party-width', `${checkedX}px`);
+  document.documentElement.style.setProperty('--neg-party-width', `-${checkedX}px`);
+}
+
+const stopResize = (ev) => {
+  document.documentElement.removeEventListener('mousemove', doResize, false);
+  document.documentElement.removeEventListener('mouseup', stopResize, false);
+}
+
+const startResize = (ev) => {
+  document.documentElement.addEventListener('mousemove', doResize, false);
+  document.documentElement.addEventListener('mouseup', stopResize, false);
+}
+
 const App = () => {
   const closedNotification = { open: false, message: '' };
 
@@ -114,6 +136,13 @@ const App = () => {
       />
       <div className="party-content-wrapper">
         <div id="party-routes-wrapper">
+          <Tooltip 
+            placement="right-end"
+            title="Resize Sidebar / Double Click To Reset"
+            aria-label="Resize Sidebar / Double Click To Reset"
+          >
+            <div onDoubleClick={resetResize} onMouseDown={startResize} id="party-width-dragger">||</div>
+          </Tooltip>
           {loading && <Loading />}
           {status[APP_VERSION_STRING] && status[APP_VERSION_STRING].active === true ? (
             <Routes