fixes 8 of nick's list

frontend/src/App.tsx

@@ -8,15 +8,12 @@ import { ActiveState } from './models/misc';
 export default function App() {
   //TODO : below media query is disjoint from tailwind. Please wire it together.
   const [navState, setNavState] = useState<ActiveState>(
-    window.matchMedia('((min-width: 768px)').matches ? 'ACTIVE' : 'INACTIVE',
+    window.matchMedia('(min-width: 768px)').matches ? 'ACTIVE' : 'INACTIVE',
   );
 
   return (
     <div className="min-h-full min-w-full">
-      <Navigation
-        navState={navState}
-        setNavState={(val: ActiveState) => setNavState(val)}
-      />
+      <Navigation navState={navState} setNavState={setNavState} />
       <div
         className={`transition-all duration-200 ${
           navState === 'ACTIVE' ? 'ml-0 md:ml-72 lg:ml-60' : 'ml-0 md:ml-16'