WIP: Add navigation for product sections

src/app/prototype/design-guide/page.tsx

@@ -3,6 +3,7 @@
 import { Alert } from '@/components/uswds/Alert';
 import { Button } from '@/components/uswds/Button';
 import { Banner } from '@/components/uswds/Banner';
+import { Header } from '@/components/uswds/Header';
 import Checkbox from '@/components/uswds/Checkbox';
 import { useState } from 'react';
 
@@ -191,6 +192,9 @@ export default function DesignGuidePage() {
           </div>
         </div>
 
+        <h2>Header</h2>
+        <Header />
+
         <div className="margin-bottom-5">
           {/* placeholder to help with the page scroll */}
         </div>

src/assets/stylesheets/styles.scss

@@ -20,7 +20,7 @@
   $theme-color-primary-lightest: false,
   $theme-color-primary-lighter: 'blue-warm-10',
   $theme-color-primary-light: 'blue-warm-40v',
-  $theme-color-primary: 'blue-warm-50v',
+  $theme-color-primary: 'blue-60',
   $theme-color-primary-vivid: 'blue-warm-50v',
   $theme-color-primary-dark: 'blue-warm-60',
   $theme-color-primary-darker: 'blue-warm-70v',
@@ -64,7 +64,6 @@
   $theme-grid-container-max-width: 'full',
   $theme-banner-max-width: 'desktop-lg',
   $theme-header-max-width: 'desktop-lg',
-  $theme-header-min-width: 'none',
   $theme-identifier-max-width: 'desktop-lg',
   $theme-footer-max-width: 'desktop-lg',
 
@@ -113,7 +112,43 @@
 }
 
 // Removes the 'X' from Chrome search inputs
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration { display: none; }
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  display: none;
+}
+
+@include at-media('desktop') {
+  .usa-header--basic {
+    .usa-nav,
+    .usa-nav-container {
+      display: block;
+      margin: 0;
+      padding: 0;
+    }
+
+    .usa-navbar {
+      display: none;
+    }
+
+    .usa-nav__primary > .usa-nav__primary-item > a {
+      font-weight: 400;
+      margin-right: 2rem;
+      padding-left: 0;
+      padding-right: 0;
+
+      &.usa-current {
+        @include u-text('primary');
+        font-weight: 700;
+      }
+    }
+
+    .usa-nav__primary-item > .usa-current::after,
+    .usa-nav__link:hover::after {
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+}

src/components/uswds/Header.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import Image from 'next/image';
+import { useState } from 'react';
+
+export function Header() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleMenu = () => setIsVisible(!isVisible);
+
+  return (
+    <>
+      <div className={`usa-overlay ${isVisible ? 'is-visible' : ''}`}></div>
+      <header className="usa-header usa-header--basic">
+        <div className="usa-nav-container">
+          <div className="usa-navbar border-0 flex-justify-end">
+            <button type="button" className="usa-menu-btn" onClick={toggleMenu}>
+              Menu
+            </button>
+          </div>
+          <nav
+            aria-label="Primary navigation"
+            className={`usa-nav border-bottom border-primary ${isVisible ? 'is-visible' : ''}`}
+          >
+            <button
+              type="button"
+              className="usa-nav__close"
+              onClick={toggleMenu}
+            >
+              <Image
+                src="/img/uswds/usa-icons/close.svg"
+                role="img"
+                alt="Close"
+                height={24}
+                width={24}
+              />
+            </button>
+            <ul className="usa-nav__primary usa-accordion">
+              <li className="usa-nav__primary-item">
+                <a
+                  href="javascript:void(0);"
+                  className="usa-nav-link usa-current"
+                >
+                  <span>Product Section</span>
+                </a>
+              </li>
+              <li className="usa-nav__primary-item">
+                <a href="javascript:void(0);" className="usa-nav-link">
+                  <span>Product Section</span>
+                </a>
+              </li>
+              <li className="usa-nav__primary-item">
+                <a href="javascript:void(0);" className="usa-nav-link">
+                  <span>Product Section</span>
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+    </>
+  );
+}