closes mobile nav on item click, increases nav item size

src/client/components/elements/Nav/index.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { NavLink, Link } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { NavLink, Link, useHistory } from 'react-router-dom';
 import config from 'payload/config';
 import { useUser } from '../../data/User';
 import Chevron from '../../icons/Chevron';
@@ -25,12 +25,17 @@ const {
 const Nav = () => {
   const { permissions } = useUser();
   const [menuActive, setMenuActive] = useState(false);
+  const history = useHistory();
 
   const classes = [
     baseClass,
     menuActive && `${baseClass}--menu-active`,
   ].filter(Boolean).join(' ');
 
+  useEffect(() => history.listen(() => {
+    setMenuActive(false);
+  }), []);
+
   return (
     <aside className={classes}>
       <div className={`${baseClass}__scroll`}>
@@ -77,7 +82,7 @@ const Nav = () => {
             })}
           </nav>
           {(globals && globals.length > 0) && (
-            <>
+            <React.Fragment>
               <span className={`${baseClass}__label`}>Globals</span>
               <nav>
                 {globals.map((global, i) => {
@@ -99,7 +104,7 @@ const Nav = () => {
                   return null;
                 })}
               </nav>
-            </>
+            </React.Fragment>
           )}
           <div className={`${baseClass}__controls`}>
             <Localizer />

src/client/components/elements/Nav/index.scss

@@ -159,5 +159,11 @@
         opacity: 1;
       }
     }
+
+    nav a {
+      font-size: base(.875);
+      line-height: base(1.25);
+      font-weight: 600;
+    }
   }
 }