one click mobile nav

client/assets/styles/styles.css

@@ -571,5 +571,6 @@ main .top button {
 }
 
 /* Mobile Nav*/
-#toggle-nav { display: none; }
+#nav-btn {
-#toggle-nav-label { display: none; }
+    display: none;
+}

client/assets/styles/styles.mobile.css

@@ -21,8 +21,14 @@
         display: none;
     }
 
+    #nav-btn {
+        display: inline-block;
+        margin: 0 0.5em;
+    }
+
     #mnml.nav-visible nav {
-        display: grid;
+        display: block;
+        grid-area: main;
     }
 
     #mnml.nav-visible main {

client/src/components/header.component.jsx

@@ -10,7 +10,7 @@ function pingColour(ping) {
 }
 
 function renderHeader(args) {
-    const { account, ping } = args;
+    const { account, ping, setShowNav, showNav } = args;
 
     const accountStatus = account
         ? (<div className="header-status">
@@ -23,6 +23,7 @@ function renderHeader(args) {
     return (
         <header>
             <h1 className="header-title">
+                <i id="nav-btn" onClick={() => setShowNav(!showNav)} className="fa fa-bars"></i>
                 mnml.gg
             </h1>
             {accountStatus}

client/src/components/header.container.jsx

@@ -1,11 +1,15 @@
 const { connect } = require('preact-redux');
 
 const Header = require('./header.component');
+const actions = require('./../actions');
 
 const addState = connect(
-    ({ account, ping }) => {
+    ({ account, ping, showNav }) => {
-        return { account, ping };
+        return { account, ping, showNav };
     },
+    dispatch => ({
+        setShowNav: v => dispatch(actions.setShowNav(v)),
+    })
 );
 
 module.exports = addState(Header);

client/src/components/mnml.jsx

@@ -1,21 +1,16 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
-const actions = require('./../actions');
 const Header = require('./header.container');
 const Main = require('./main');
 const Nav = require('./nav');
 
 const addState = connect(
-    state => ({ showNav: state.showNav }),
+    state => ({ showNav: state.showNav })
-    dispatch => ({
-        setShowNav: v => dispatch(actions.setShowNav(v)),
-    })
 );
 
 const Mnml = ({ showNav, setShowNav }) =>
     <div id="mnml" className={showNav ? 'nav-visible' : ''}>
-        <i onClick={() => setShowNav(!showNav)} className="fa fa-bars"></i>
         <Header />
         <Nav />
         <Main />

client/src/components/nav.jsx

@@ -15,7 +15,6 @@ const addState = connect(
             team,
             constructs,
             game,
-            showNav,
         } = state;
 
         function sendInstanceState(instance) {
@@ -32,7 +31,6 @@ const addState = connect(
             team,
             constructs,
             game,
-            showNav,
             sendInstanceState,
             sendAccountInstances,
         };
@@ -52,10 +50,15 @@ const addState = connect(
             return dispatch(actions.setNav(place));
         }
 
+        function hideNav() {
+            return dispatch(actions.setShowNav(false));
+        }
+
         return {
             setTestGame,
             setTestInstance,
             setNav,
+            hideNav,
         };
     }
 );
@@ -70,11 +73,11 @@ function Nav(args) {
         constructs,
         instances,
         game,
-        showNav,
 
         setTestGame,
         setTestInstance,
         setNav,
+        hideNav,
     } = args;
 
     function navTo(p) {
@@ -110,7 +113,7 @@ function Nav(args) {
         : null;
 
     return (
-        <nav>
+        <nav onClick={hideNav} >
             <h2>Team</h2>
             {teamElements}
             <h2>Instances</h2>