[Bug Fix] - Fix Main Layout Spacing and Navigation

src/frontend/src/components/App/index.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useRef, useEffect, useState } from "react";
+import ReactDOM from "react-dom";
 import { Routes, Route, Navigate } from "react-router-dom";
 import Footer from "../Footer";
 import Header from "../Header";
@@ -18,47 +19,62 @@ import About from "../About";
 import Community from "../Community";
 
 export default function App() {
+  const headerRef = useRef(null);
+  const [headerHeight, setHeaderHeight] = useState(0);
+
+  useEffect(() => {
+    if (headerRef?.current) {
+      const element = ReactDOM.findDOMNode(headerRef?.current);
+      if (element instanceof Element) {
+        const height = element?.getBoundingClientRect().height;
+        setHeaderHeight(height);
+      }
+    }
+  }, []);
+
   return (
     <>
-      <Header />
-      <Routes>
-        <Route path="/" element={<Landing />} />
-        <Route
-          path="/oeci"
-          element={
-            <OeciLogin
-              userId=""
-              password=""
-              missingUserId={false}
-              missingPassword={false}
-              expectedFailure={false}
-              expectedFailureMessage=""
-              invalidResponse={false}
-              missingInputs={false}
-              isLoggedIn={false}
-            />
-          }
-        />
-        <Route path="/record-search" element={<RecordSearch />} />
-        <Route path="/demo-record-search" element={<Demo />} />
-        <Route path="/manual" element={<Manual />} />
-        <Route path="/rules" element={<Rules />} />
-        <Route path="/faq" element={<Faq />} />
-        <Route path="/appendix" element={<Appendix />} />
-        <Route path="/privacy-policy" element={<PrivacyPolicy />} />
-        <Route path="/fill-expungement-forms" element={<FillForms />} />
-        <Route
-          path="/partner-interest"
-          element={<PartnerInterest email="" invalidEmail={true} />}
-        />
-        <Route
-          path="/accessibility-statement"
-          element={<AccessibilityStatement />}
-        />
-        <Route path="/about" element={<About />} />
-        <Route path="/community" element={<Community />} />
-        <Route path="*" element={<Navigate to="/" />} />
-      </Routes>
+      <Header ref={headerRef} />
+      <div style={{ marginTop: `${headerHeight}px` }}>
+        <Routes>
+          <Route path="/" element={<Landing />} />
+          <Route
+            path="/oeci"
+            element={
+              <OeciLogin
+                userId=""
+                password=""
+                missingUserId={false}
+                missingPassword={false}
+                expectedFailure={false}
+                expectedFailureMessage=""
+                invalidResponse={false}
+                missingInputs={false}
+                isLoggedIn={false}
+              />
+            }
+          />
+          <Route path="/record-search" element={<RecordSearch />} />
+          <Route path="/demo-record-search" element={<Demo />} />
+          <Route path="/manual" element={<Manual />} />
+          <Route path="/rules" element={<Rules />} />
+          <Route path="/faq" element={<Faq />} />
+          <Route path="/appendix" element={<Appendix />} />
+          <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+          <Route path="/fill-expungement-forms" element={<FillForms />} />
+          <Route
+            path="/partner-interest"
+            element={<PartnerInterest email="" invalidEmail={true} />}
+          />
+          <Route
+            path="/accessibility-statement"
+            element={<AccessibilityStatement />}
+          />
+          <Route path="/about" element={<About />} />
+          <Route path="/community" element={<Community />} />
+          <Route path="*" element={<Navigate to="/" />} />
+        </Routes>
+      </div>
       <Footer />
     </>
   );

src/frontend/src/components/Header/index.tsx

@@ -10,7 +10,7 @@ export default class Header extends React.Component<{}, HeaderState> {
   constructor(props: {}) {
     super(props);
     this.state = {
-      isOpen: false
+      isOpen: false,
     };
   }
 
@@ -23,7 +23,7 @@ export default class Header extends React.Component<{}, HeaderState> {
 
     return (
       <header className="fixed top-0 w-100 z-max bg-white shadow-4">
-        <nav 
+        <nav
           className="relative flex flex-column flex-row-l justify-between-l items-center pa3 center mw9"
           aria-label="Primary"
         >
@@ -34,36 +34,55 @@ export default class Header extends React.Component<{}, HeaderState> {
               </Link>
             </div>
 
-            <button 
+            <button
               className="db dn-l pointer bg-transparent bn pa2 z-max"
               onClick={this.toggleMenu}
               aria-label="Toggle navigation"
             >
               <div className="w2 h1 relative pointer">
-                <div className={`bg-navy h-25 w-100 mb1 transition-all ${isOpen ? "rotate-45 absolute top-0" : ""}`} />
-                <div className={`bg-navy h-25 w-100 mb1 transition-all ${isOpen ? "dn" : ""}`} />
-                <div className={`bg-navy h-25 w-100 transition-all ${isOpen ? "rotate-135 absolute top-0" : ""}`} />
+                <div
+                  className={`bg-navy h-25 w-100 mb1 transition-all ${
+                    isOpen ? "rotate-45 absolute top-0" : ""
+                  }`}
+                />
+                <div
+                  className={`bg-navy h-25 w-100 mb1 transition-all ${
+                    isOpen ? "dn" : ""
+                  }`}
+                />
+                <div
+                  className={`bg-navy h-25 w-100 transition-all ${
+                    isOpen ? "rotate-135 absolute top-0" : ""
+                  }`}
+                />
               </div>
             </button>
           </div>
 
-          <div className={`${isOpen ? "flex" : "dn"} flex-l flex-column flex-row-l items-center static-l pa0-l shadow-none-l w-auto-l z-999 mt3 mt0-l`}>
-            <Link 
-              className="link navy hover-blue f5 fw6 pv3 pv2-l ph3-l mr4-l nowrap" 
-              to="/community" 
+          <div
+            className={`${
+              isOpen ? "flex" : "dn"
+            } flex-l flex-column flex-row-l items-center static-l pa0-l shadow-none-l w-auto-l z-999 mt3 mt0-l`}
+          >
+            <Link
+              className="link navy hover-blue f5 fw6 pv3 pv2-l ph3-l mr4-l nowrap"
+              to="/community"
+              onClick={this.toggleMenu}
             >
               Community Board
             </Link>
-            <Link 
-              className="link navy hover-blue f5 fw6 pv3 pv2-l ph3-l mr4-l nowrap" 
-              to="/manual" 
+            <Link
+              className="link navy hover-blue f5 fw6 pv3 pv2-l ph3-l mr4-l nowrap"
+              to="/manual"
+              onClick={this.toggleMenu}
             >
               Manual
             </Link>
-            
+
             <Link
               to="/record-search"
               className="link f5 fw6 pv2 ph3 blue br2 ba b--blue hover-bg-dark-blue hover-white tc mt3 mt0-l ml4-l"
+              onClick={this.toggleMenu}
             >
               Search
             </Link>
@@ -72,4 +91,4 @@ export default class Header extends React.Component<{}, HeaderState> {
       </header>
     );
   }
-}
+}

src/frontend/src/components/Landing/index.tsx

@@ -11,7 +11,7 @@ class Landing extends React.Component {
   render() {
     return (
       <>
-        <main className="f5 f4-ns navy bg-white mt5">
+        <main className="f5 f4-ns navy bg-white">
           <div className="overflow-x-hidden relative">
             <div className="flex justify-center mb5">
               <div className="flex justify-center items-center w-100 shadow bg-blue white pv3 ph4">

src/frontend/src/components/Manual/index.tsx

@@ -14,43 +14,45 @@ class Manual extends React.Component {
           <div className="mw8 center ph4 visually-hidden">
             <h1 className="f3 fw6 mv4">Manual</h1>
           </div>
-          <nav
-            className="shrink-none order-2 self-start sticky-l w5 bg-white shadow pa4 mt4 ml5-l"
-            aria-label="Manual"
-          >
-            <ul className="list">
-              <li className="mb3">
-                <a href="#intro" className="link hover-blue">
-                  Introduction
-                </a>
-              </li>
-              <li className="mb3 pb1">
-                <a href="#generalinfo" className="link hover-blue">
-                  General Info
-                </a>
-              </li>
-              <li className="bt b--light-gray pt3 mb3 ">
-                <a href="#overview" className="link hover-blue">
-                  Use RecordSponge
-                </a>
-              </li>
-              <li className="mb3 ml3">
-                <a href="#assumption" className="link hover-blue">
-                  Assumption
-                </a>
-              </li>
-              <li className="mb3 ml3">
-                <a href="#search" className="link hover-blue">
-                  Search
-                </a>
-              </li>
-              <li className="ml3">
-                <a href="#file" className="link hover-blue">
-                  File for Expungement
-                </a>
-              </li>
-            </ul>
-          </nav>
+          <aside className="pa1 order-2">
+            <nav
+              className="shrink-none self-start sticky-l w5 bg-white shadow pa4 mt4 ml5-l"
+              aria-label="Manual"
+            >
+              <ul className="list">
+                <li className="mb3">
+                  <a href="#intro" className="link hover-blue">
+                    Introduction
+                  </a>
+                </li>
+                <li className="mb3 pb1">
+                  <a href="#generalinfo" className="link hover-blue">
+                    General Info
+                  </a>
+                </li>
+                <li className="bt b--light-gray pt3 mb3 ">
+                  <a href="#overview" className="link hover-blue">
+                    Use RecordSponge
+                  </a>
+                </li>
+                <li className="mb3 ml3">
+                  <a href="#assumption" className="link hover-blue">
+                    Assumption
+                  </a>
+                </li>
+                <li className="mb3 ml3">
+                  <a href="#search" className="link hover-blue">
+                    Search
+                  </a>
+                </li>
+                <li className="ml3">
+                  <a href="#file" className="link hover-blue">
+                    File for Expungement
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </aside>
           <article className="order-1 lh-copy">
             <section className="mb5">
               <h2 className="f2 fw9 mb3 mt4" id="intro">