From cdce8e6225fd84e96834fbb178d4994c0dcd0cda Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Thu, 18 Apr 2024 18:25:57 -0700
Subject: [PATCH 01/19] SUM-45 | @rebeccahongsf | style header

---
 src/components/global/page-header.tsx      |   4 +-
 src/components/menu/main-menu.tsx          | 253 ++++++++++++++-------
 src/components/search/site-search-form.tsx |   4 +-
 3 files changed, 171 insertions(+), 90 deletions(-)

diff --git a/src/components/global/page-header.tsx b/src/components/global/page-header.tsx
index 41699317..f4116716 100644
--- a/src/components/global/page-header.tsx
+++ b/src/components/global/page-header.tsx
@@ -1,4 +1,3 @@
-import SiteSearchForm from "@components/search/site-search-form";
 import MainMenu from "@components/menu/main-menu";
 import GlobalMessage from "@components/config-pages/global-message";
 import Lockup from "@components/elements/lockup/lockup";
@@ -30,11 +29,10 @@ const PageHeader = async () => {
         </div>
       </div>
       {globalMessageConfig && <GlobalMessage {...globalMessageConfig}/>}
-      <div className="relative shadow">
+      <div className="relative bg-fog-light">
         <div className="centered min-h-50 pr-24 lg:pr-0">
           <div className="flex w-full justify-between">
             <Lockup {...siteSettingsConfig} {...lockupSettingsConfig}/>
-            <SiteSearchForm className="hidden lg:block"/>
           </div>
         </div>
 
diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index 62a8cdc8..61e7adfe 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -4,12 +4,22 @@ import Link from "@components/elements/link";
 import SiteSearchForm from "@components/search/site-search-form";
 import useActiveTrail from "@lib/hooks/useActiveTrail";
 import useOutsideClick from "@lib/hooks/useOutsideClick";
-import {ChevronDownIcon} from "@heroicons/react/20/solid";
-import {MenuItem as MenuItemType} from "@lib/gql/__generated__/drupal.d";
-import {clsx} from "clsx";
-import {useBoolean, useEventListener} from "usehooks-ts";
-import {useCallback, useEffect, useId, useLayoutEffect, useRef, useState} from "react";
-import {usePathname} from "next/navigation";
+import {
+  ChevronDownIcon,
+  MagnifyingGlassIcon,
+} from "@heroicons/react/20/solid";
+import { MenuItem as MenuItemType } from "@lib/gql/__generated__/drupal.d";
+import { clsx } from "clsx";
+import { useBoolean, useEventListener } from "usehooks-ts";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { usePathname } from "next/navigation";
 
 const menuLevelsToShow = 2;
 
@@ -17,68 +27,133 @@ type Props = {
   /**
    * Array of nested menu items.
    */
-  menuItems: MenuItemType[]
-}
+  menuItems: MenuItemType[];
+};
 
-const MainMenu = ({menuItems}: Props) => {
-  const buttonRef = useRef<HTMLButtonElement>(null)
+const MainMenu = ({ menuItems }: Props) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
   const navId = useId();
 
-  const {value: menuOpen, setFalse: closeMenu, toggle: toggleMenu} = useBoolean(false)
-  const browserUrl = usePathname()
+  const {
+    value: menuOpen,
+    setFalse: closeMenu,
+    toggle: toggleMenu,
+  } = useBoolean(false);
+  const browserUrl = usePathname();
   const activeTrail = useActiveTrail(menuItems, usePathname() || "");
 
   useOutsideClick(menuRef, closeMenu);
 
-  const handleEscape = useCallback((event: KeyboardEvent) => {
-    if (event.key !== "Escape" || !menuOpen) return;
+  const handleEscape = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key !== "Escape" || !menuOpen) return;
 
-    closeMenu()
-    buttonRef.current?.focus();
-  }, [menuOpen, closeMenu]);
+      closeMenu();
+      buttonRef.current?.focus();
+    },
+    [menuOpen, closeMenu]
+  );
 
   useEffect(() => closeMenu(), [browserUrl, closeMenu]);
   useEventListener("keydown", handleEscape, menuRef);
 
   return (
-    <nav id={navId} aria-label="Main Navigation" className="lg:centered" ref={menuRef}>
-      <button ref={buttonRef} className="flex flex-col items-center lg:hidden absolute top-5 right-10 group" onClick={toggleMenu} aria-expanded={menuOpen} aria-labelledby={navId}>
+    <nav
+      id={navId}
+      aria-label="Main Navigation"
+      className="lg:centered"
+      ref={menuRef}
+    >
+      <button
+        ref={buttonRef}
+        className="flex flex-col items-center lg:hidden absolute top-5 right-10 group"
+        onClick={toggleMenu}
+        aria-expanded={menuOpen}
+        aria-labelledby={navId}
+      >
         <span className="flex flex-col justify-center items-center w-[30px] h-[30px]">
-          <span className={clsx("bg-black-true block transition-all duration-300 ease-out h-[3px] w-full rounded-sm", {"rotate-45 translate-y-4": menuOpen, "-translate-y-0.5": !menuOpen})}/>
-          <span className={clsx("bg-black-true block transition-all duration-300 ease-out h-[3px] w-full rounded-sm my-3",{"opacity-0" :menuOpen , "opacity-100": !menuOpen})}/>
-          <span className={clsx("bg-black-true block transition-all duration-300 ease-out h-[3px] w-full rounded-sm", {"-rotate-45 -translate-y-4": menuOpen, "translate-y-0.5": !menuOpen})}/>
+          <span
+            className={clsx(
+              "bg-black-true block transition-all duration-300 ease-out h-[3px] w-full rounded-sm",
+              {
+                "rotate-45 translate-y-4": menuOpen,
+                "-translate-y-0.5": !menuOpen,
+              }
+            )}
+          />
+          <span
+            className={clsx(
+              "bg-black-true block transition-all duration-300 ease-out h-[3px] w-full rounded-sm my-3",
+              { "opacity-0": menuOpen, "opacity-100": !menuOpen }
+            )}
+          />
+          <span
+            className={clsx(
+              "bg-black-true block transition-all duration-300 ease-out h-[3px] w-full rounded-sm",
+              {
+                "-rotate-45 -translate-y-4": menuOpen,
+                "translate-y-0.5": !menuOpen,
+              }
+            )}
+          />
+        </span>
+        <span className="group-hocus:underline" aria-hidden>
+          {menuOpen ? "Close" : "Menu"}
         </span>
-        <span className="group-hocus:underline" aria-hidden>{menuOpen ? "Close" : "Menu"}</span>
       </button>
 
       <div
-        className={(menuOpen ? "block" : "hidden") + " lg:block bg-black lg:bg-transparent absolute top-100 lg:relative z-10 w-full"}>
-        <SiteSearchForm className="px-10 lg:hidden"/>
+        className={
+          (menuOpen ? "block" : "hidden") +
+          " lg:flex lg:justify-end lg:items-center bg-black lg:bg-transparent absolute top-100 lg:relative z-10 w-full"
+        }
+      >
+        <SiteSearchForm className="px-10 lg:hidden" />
         <ul className="list-unstyled lg:flex lg:justify-end flex-wrap m-0 p-0">
-          {menuItems.map(item =>
-            <MenuItem key={item.id} {...item} activeTrail={activeTrail} level={0}/>
-          )}
+          {menuItems.map((item) => (
+            <MenuItem
+              key={item.id}
+              {...item}
+              activeTrail={activeTrail}
+              level={0}
+            />
+          ))}
+          <button>
+            <MagnifyingGlassIcon width={25} className="text-archway-dark" />
+          </button>
+          <SiteSearchForm className="hidden lg:block" />
         </ul>
       </div>
     </nav>
-  )
-}
+  );
+};
 
 type MenuItemProps = MenuItemType & {
-  activeTrail: string[]
-  level: number
-}
+  activeTrail: string[];
+  level: number;
+};
 
-const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps) => {
+const MenuItem = ({
+  id,
+  url,
+  title,
+  activeTrail,
+  children,
+  level,
+}: MenuItemProps) => {
   const linkId = useId();
   const menuItemRef = useRef<HTMLLIElement>(null);
   const belowListRef = useRef<HTMLUListElement>(null);
 
-  const [positionRight, setPositionRight] = useState<boolean>(true)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const {value: submenuOpen, setFalse: closeSubmenu, toggle: toggleSubmenu} = useBoolean(false)
-  const browserUrl = usePathname()
+  const [positionRight, setPositionRight] = useState<boolean>(true);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const {
+    value: submenuOpen,
+    setFalse: closeSubmenu,
+    toggle: toggleSubmenu,
+  } = useBoolean(false);
+  const browserUrl = usePathname();
 
   useOutsideClick(menuItemRef, closeSubmenu);
 
@@ -87,63 +162,73 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
 
   useLayoutEffect(() => {
     // If the right side of the submenu is not visible, set the position to be on the left of the menu item.
-    const {x, width} = belowListRef.current?.getBoundingClientRect() || {x: 0, width: 0}
+    const { x, width } = belowListRef.current?.getBoundingClientRect() || {
+      x: 0,
+      width: 0,
+    };
     if (x + width > window.innerWidth) setPositionRight(false);
-  }, [submenuOpen])
+  }, [submenuOpen]);
 
   // If the user presses escape on the keyboard, close the submenus.
-  const handleEscape = useCallback((event: KeyboardEvent) => {
-    if (event.key !== "Escape" || !submenuOpen) return;
+  const handleEscape = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key !== "Escape" || !submenuOpen) return;
 
-    closeSubmenu()
-    if (level === 0) buttonRef.current?.focus();
-  }, [level, submenuOpen, closeSubmenu]);
+      closeSubmenu();
+      if (level === 0) buttonRef.current?.focus();
+    },
+    [level, submenuOpen, closeSubmenu]
+  );
 
-  useEventListener("keydown", handleEscape, menuItemRef)
+  useEventListener("keydown", handleEscape, menuItemRef);
 
   // List out the specific classes so tailwind will include them. Dynamic classes values don"t get compiled.
-  const zIndexes = ["z-[1]", "z-[2]", "z-[3]", "z-[4]", "z-[5]"]
-  const leftPadding = ["pl-10", "pl-20", "pl-28", "pl-48"]
+  const zIndexes = ["z-[1]", "z-[2]", "z-[3]", "z-[4]", "z-[5]"];
+  const leftPadding = ["pl-10", "pl-20", "pl-28", "pl-48"];
 
   // The last item in the current trail would be the current item id if the user is on that page.
   const isCurrent = activeTrail.at(-1) === id;
   const inTrail = activeTrail.includes(id) && !isCurrent;
 
   const linkStyles = clsx(
-    "w-full relative inline-block text-white lg:text-digital-red hocus:text-white lg:hocus:text-black no-underline hocus:underline py-5 lg:pl-0 border-l-[6px]",
+    "w-full relative inline-block text-white lg:text-black hocus:text-white lg:hocus:text-black no-underline py-5 border-b-[4px] hocus:border-spirited-light",
     leftPadding[level],
     // Top menu item styles.
     {
-      "lg:border-l-0 lg:border-b-[6px] ml-5 lg:ml-0 lg:pb-2": level === 0,
+      "lg:border-l-0 lg:border-b-[4px] mx-5 lg:pb-10": level === 0,
       "border-digital-red lg:border-black": level === 0 && isCurrent,
-      "border-transparent lg:border-foggy-dark": level === 0 && !isCurrent && inTrail,
+      "border-transparent lg:border-spirited-light":
+        level === 0 && !isCurrent && inTrail,
       "border-transparent": level === 0 && !isCurrent && !inTrail,
     },
     // Child menu item styles.
     {
       "ml-5 lg:ml-0 lg:pl-5": level !== 0,
-      "border-digital-red": level !== 0 && isCurrent,
-      "border-transparent": level !== 0 && !isCurrent
+      "border-spirited-light": level !== 0 && isCurrent,
+      "border-transparent": level !== 0 && !isCurrent,
     }
-  )
+  );
 
   const subMenuStyles = clsx(
-    "list-unstyled w-full min-w-[300px] lg:bg-white lg:shadow-2xl px-0 lg:absolute",
+    "list-unstyled w-full min-w-[300px] lg:bg-fog-light lg:shadow-2xl lg:absolute lg:rounded-[25px] lg:px-12 lg:py-4",
     zIndexes[level],
     {
       "lg:top-full lg:right-0": level === 0,
       "lg:top-0": level !== 0,
       "lg:left-full": level !== 0 && positionRight,
       "lg:right-full": level !== 0 && !positionRight,
-      "block": submenuOpen,
-      "hidden": !submenuOpen,
+      block: submenuOpen,
+      hidden: !submenuOpen,
     }
-  )
+  );
 
   return (
     <li
       ref={menuItemRef}
-      className={clsx("m-0 py-2 lg:py-0 relative border-b first:border-t last:border-0 border-cool-grey lg:border-black-20 lg:relative lg:mr-5 last:lg:mr-0", {"lg:border-b-0 first:border-t-0": level === 0})}
+      className={clsx(
+        "m-0 py-2 lg:py-0 relative border-b last:border-0 border-spirited-light lg:relative",
+        { "lg:border-b-0 first:border-t-0": level === 0 }
+      )}
     >
       <div className="flex items-center justify-between lg:justify-end">
         <Link
@@ -155,41 +240,39 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
           {title}
         </Link>
 
-        {(children.length > 0 && level < menuLevelsToShow) &&
-          <>
-            {level === 0 && <div className="block ml-5 w-[1px] h-[25px] mb-[6px] bg-archway-light shrink-0"/>}
-            <button
-              ref={buttonRef}
-              className="shrink-0 relative right-10 lg:right-0 text-white lg:text-digital-red bg-digital-red lg:bg-transparent rounded-full lg:rounded-none group border-b border-transparent hocus:border-black hocus:bg-white"
-              onClick={toggleSubmenu}
-              aria-expanded={submenuOpen}
-              aria-labelledby={linkId}
-            >
-              <ChevronDownIcon
-                height={35}
-                className={clsx("transition group-hocus:scale-125 group-hocus:text-black ease-in-out duration-150", {"rotate-180": submenuOpen})}
-              />
-            </button>
-
-          </>
-        }
-
+        {children.length > 0 && level < menuLevelsToShow && (
+          <button
+            ref={buttonRef}
+            className="shrink-0 relative right-10 lg:right-0 text-white lg:text-digital-red bg-digital-red lg:bg-transparent rounded-full lg:rounded-none group"
+            onClick={toggleSubmenu}
+            aria-expanded={submenuOpen}
+            aria-labelledby={linkId}
+          >
+            <ChevronDownIcon
+              height={35}
+              className={clsx(
+                "transition group-hocus:scale-125 group-hocus:text-black ease-in-out duration-150",
+                { "rotate-180": submenuOpen }
+              )}
+            />
+          </button>
+        )}
       </div>
 
-      {(children.length > 0 && level < menuLevelsToShow) &&
+      {children.length > 0 && level < menuLevelsToShow && (
         <ul className={subMenuStyles} ref={belowListRef}>
-          {children.map(item =>
+          {children.map((item) => (
             <MenuItem
               key={item.id}
               {...item}
               level={level + 1}
               activeTrail={activeTrail}
             />
-          )}
+          ))}
         </ul>
-      }
+      )}
     </li>
-  )
-}
+  );
+};
 
-export default MainMenu;
\ No newline at end of file
+export default MainMenu;
diff --git a/src/components/search/site-search-form.tsx b/src/components/search/site-search-form.tsx
index ce762e79..d4d5c390 100644
--- a/src/components/search/site-search-form.tsx
+++ b/src/components/search/site-search-form.tsx
@@ -5,7 +5,7 @@ const SiteSearchForm = ({...props}: HTMLAttributes<HTMLFormElement>) => {
   const inputId = useId();
   return (
     <form aria-label="Site Search" action="/search" {...props}>
-      <div className="relative mt-10">
+      <div className="relative">
         <label htmlFor={inputId} className="sr-only">
           Search this site
         </label>
@@ -18,7 +18,7 @@ const SiteSearchForm = ({...props}: HTMLAttributes<HTMLFormElement>) => {
           required
         />
         <button type="submit" className="absolute top-2 right-5">
-          <MagnifyingGlassIcon width={25} className="text-digital-red"/>
+          <MagnifyingGlassIcon width={25} className="text-archway-dark"/>
           <span className="sr-only">Submit Search</span>
         </button>
       </div>

From 79b4a5087b550c6b645f47d6e98b97334959d70f Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Tue, 23 Apr 2024 08:28:22 -0700
Subject: [PATCH 02/19] fixup

---
 src/components/menu/main-menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index 61e7adfe..5c5e1f89 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -210,7 +210,7 @@ const MenuItem = ({
   );
 
   const subMenuStyles = clsx(
-    "list-unstyled w-full min-w-[300px] lg:bg-fog-light lg:shadow-2xl lg:absolute lg:rounded-[25px] lg:px-12 lg:py-4",
+    "list-unstyled w-full min-w-[300px] lg:bg-fog-light lg:border lg:border-white lg:shadow-2xl lg:absolute lg:rounded-[25px] lg:px-12 lg:py-4",
     zIndexes[level],
     {
       "lg:top-full lg:right-0": level === 0,

From 9d2d81ad6747078ab23fcecaaad76cd9e0f60896 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Wed, 24 Apr 2024 13:05:42 -0700
Subject: [PATCH 03/19] tweak mobile colors and chevron size

---
 src/components/menu/main-menu.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index 5c5e1f89..105e5f0e 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -106,7 +106,7 @@ const MainMenu = ({ menuItems }: Props) => {
       <div
         className={
           (menuOpen ? "block" : "hidden") +
-          " lg:flex lg:justify-end lg:items-center bg-black lg:bg-transparent absolute top-100 lg:relative z-10 w-full"
+          " lg:flex lg:justify-end lg:items-center bg-fog-light lg:bg-transparent absolute top-100 lg:relative z-10 w-full"
         }
       >
         <SiteSearchForm className="px-10 lg:hidden" />
@@ -191,12 +191,12 @@ const MenuItem = ({
   const inTrail = activeTrail.includes(id) && !isCurrent;
 
   const linkStyles = clsx(
-    "w-full relative inline-block text-white lg:text-black hocus:text-white lg:hocus:text-black no-underline py-5 border-b-[4px] hocus:border-spirited-light",
+    "w-full relative inline-block text-black hocus:text-black no-underline py-5 border-b-[4px] hocus:border-spirited-light",
     leftPadding[level],
     // Top menu item styles.
     {
       "lg:border-l-0 lg:border-b-[4px] mx-5 lg:pb-10": level === 0,
-      "border-digital-red lg:border-black": level === 0 && isCurrent,
+      "border-spirited-light": level === 0 && isCurrent,
       "border-transparent lg:border-spirited-light":
         level === 0 && !isCurrent && inTrail,
       "border-transparent": level === 0 && !isCurrent && !inTrail,
@@ -226,7 +226,7 @@ const MenuItem = ({
     <li
       ref={menuItemRef}
       className={clsx(
-        "m-0 py-2 lg:py-0 relative border-b last:border-0 border-spirited-light lg:relative",
+        "m-0 lg:py-0 relative border-b last:border-0 border-spirited-light lg:relative",
         { "lg:border-b-0 first:border-t-0": level === 0 }
       )}
     >
@@ -243,13 +243,13 @@ const MenuItem = ({
         {children.length > 0 && level < menuLevelsToShow && (
           <button
             ref={buttonRef}
-            className="shrink-0 relative right-10 lg:right-0 text-white lg:text-digital-red bg-digital-red lg:bg-transparent rounded-full lg:rounded-none group"
+            className="shrink-0 relative right-10 lg:right-0 text-black bg-transparent lg:bg-transparent rounded-full lg:rounded-none group lg:pb-10"
             onClick={toggleSubmenu}
             aria-expanded={submenuOpen}
             aria-labelledby={linkId}
           >
             <ChevronDownIcon
-              height={35}
+              height={25}
               className={clsx(
                 "transition group-hocus:scale-125 group-hocus:text-black ease-in-out duration-150",
                 { "rotate-180": submenuOpen }

From 238284350b884deddf19991d850d477b0a32d7a3 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Wed, 24 Apr 2024 14:49:07 -0700
Subject: [PATCH 04/19] revert

---
 src/components/search/site-search-form.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/search/site-search-form.tsx b/src/components/search/site-search-form.tsx
index d4d5c390..ce762e79 100644
--- a/src/components/search/site-search-form.tsx
+++ b/src/components/search/site-search-form.tsx
@@ -5,7 +5,7 @@ const SiteSearchForm = ({...props}: HTMLAttributes<HTMLFormElement>) => {
   const inputId = useId();
   return (
     <form aria-label="Site Search" action="/search" {...props}>
-      <div className="relative">
+      <div className="relative mt-10">
         <label htmlFor={inputId} className="sr-only">
           Search this site
         </label>
@@ -18,7 +18,7 @@ const SiteSearchForm = ({...props}: HTMLAttributes<HTMLFormElement>) => {
           required
         />
         <button type="submit" className="absolute top-2 right-5">
-          <MagnifyingGlassIcon width={25} className="text-archway-dark"/>
+          <MagnifyingGlassIcon width={25} className="text-digital-red"/>
           <span className="sr-only">Submit Search</span>
         </button>
       </div>

From 94de0f3243b466f3f91f9b4253aa21f339dc7183 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Wed, 24 Apr 2024 15:33:31 -0700
Subject: [PATCH 05/19] fixup main menu dropdown stylng

---
 src/components/elements/lockup/lockup.tsx |  4 ++--
 src/components/global/page-header.tsx     |  2 +-
 src/components/menu/main-menu.tsx         | 25 ++++++++++++++++-------
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/elements/lockup/lockup.tsx b/src/components/elements/lockup/lockup.tsx
index 3723b767..73ec7abd 100644
--- a/src/components/elements/lockup/lockup.tsx
+++ b/src/components/elements/lockup/lockup.tsx
@@ -43,7 +43,7 @@ export const Lockup = ({
 
   if (!suLockupEnabled) {
     return (
-      <div className="py-10">
+      <div>
         <Link href="/" className="flex no-underline">
           <div className="self-end">
             <div className="lg:inline-block pr-2 mr-2 lg:border-r border-black">
@@ -99,7 +99,7 @@ export const Lockup = ({
     case "none":
     default:
       return (
-        <div className="py-10">
+        <div>
           <Link href="/"
                 className="flex flex-col lg:flex-row gap-4 no-underline">
             <LockupLogo {...lockupProps}/>
diff --git a/src/components/global/page-header.tsx b/src/components/global/page-header.tsx
index f4116716..af9d5d80 100644
--- a/src/components/global/page-header.tsx
+++ b/src/components/global/page-header.tsx
@@ -30,7 +30,7 @@ const PageHeader = async () => {
       </div>
       {globalMessageConfig && <GlobalMessage {...globalMessageConfig}/>}
       <div className="relative bg-fog-light">
-        <div className="centered min-h-50 pr-24 lg:pr-0">
+        <div className="centered min-h-50 pr-24 lg:rs-py-2 lg:pr-0">
           <div className="flex w-full justify-between">
             <Lockup {...siteSettingsConfig} {...lockupSettingsConfig}/>
           </div>
diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index 105e5f0e..76626305 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -119,10 +119,9 @@ const MainMenu = ({ menuItems }: Props) => {
               level={0}
             />
           ))}
-          <button>
+          <Link href="/search">
             <MagnifyingGlassIcon width={25} className="text-archway-dark" />
-          </button>
-          <SiteSearchForm className="hidden lg:block" />
+          </Link>
         </ul>
       </div>
     </nav>
@@ -191,11 +190,11 @@ const MenuItem = ({
   const inTrail = activeTrail.includes(id) && !isCurrent;
 
   const linkStyles = clsx(
-    "w-full relative inline-block text-black hocus:text-black no-underline py-5 border-b-[4px] hocus:border-spirited-light",
+    "w-full relative inline-block font-normal text-black hocus:text-black no-underline py-5 border-b-[4px] hocus:border-spirited-light",
     leftPadding[level],
     // Top menu item styles.
     {
-      "lg:border-l-0 lg:border-b-[4px] mx-5 lg:pb-10": level === 0,
+      "lg:border-l-0 lg:border-b-[4px] mx-5 lg:mr-0 lg:pb-10": level === 0,
       "border-spirited-light": level === 0 && isCurrent,
       "border-transparent lg:border-spirited-light":
         level === 0 && !isCurrent && inTrail,
@@ -209,6 +208,18 @@ const MenuItem = ({
     }
   );
 
+  const chevronBtnStyles = clsx(
+    "shrink-0 relative right-10 lg:right-0 text-black bg-transparent lg:bg-transparent rounded-full lg:rounded-none lg:mr-5 lg:pb-6 lg:pl-2 lg:group-focus:border-b lg:group-hover:border-b-[4px] lg:group-focus:border-spirited-light lg:group-hover:border-spirited-light",
+    // Top menu item styles.
+    {
+      "lg:border-l-0 lg:border-b-[4px]": level === 0,
+      "border-spirited-light": level === 0 && isCurrent,
+      "border-transparent lg:border-spirited-light":
+        level === 0 && !isCurrent && inTrail,
+      "border-transparent": level === 0 && !isCurrent && !inTrail,
+    },
+  );
+
   const subMenuStyles = clsx(
     "list-unstyled w-full min-w-[300px] lg:bg-fog-light lg:border lg:border-white lg:shadow-2xl lg:absolute lg:rounded-[25px] lg:px-12 lg:py-4",
     zIndexes[level],
@@ -230,7 +241,7 @@ const MenuItem = ({
         { "lg:border-b-0 first:border-t-0": level === 0 }
       )}
     >
-      <div className="flex items-center justify-between lg:justify-end">
+      <div className="group flex justify-between lg:justify-end">
         <Link
           id={linkId}
           href={url || "#"}
@@ -243,7 +254,7 @@ const MenuItem = ({
         {children.length > 0 && level < menuLevelsToShow && (
           <button
             ref={buttonRef}
-            className="shrink-0 relative right-10 lg:right-0 text-black bg-transparent lg:bg-transparent rounded-full lg:rounded-none group lg:pb-10"
+            className={chevronBtnStyles}
             onClick={toggleSubmenu}
             aria-expanded={submenuOpen}
             aria-labelledby={linkId}

From 818881b22a5a2b568ddc61cbff3b62476a56cdf6 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Wed, 24 Apr 2024 18:27:32 -0700
Subject: [PATCH 06/19] add spacing to submenu

---
 src/components/menu/main-menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index 76626305..e4483380 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -221,7 +221,7 @@ const MenuItem = ({
   );
 
   const subMenuStyles = clsx(
-    "list-unstyled w-full min-w-[300px] lg:bg-fog-light lg:border lg:border-white lg:shadow-2xl lg:absolute lg:rounded-[25px] lg:px-12 lg:py-4",
+    "list-unstyled w-full min-w-[300px] lg:bg-fog-light lg:border lg:border-white lg:shadow-2xl lg:absolute lg:rounded-[25px] lg:px-12 lg:py-4 lg:mt-3",
     zIndexes[level],
     {
       "lg:top-full lg:right-0": level === 0,

From 553b4ec75b267787b6e1237f8856a83ad46cb7ff Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Wed, 24 Apr 2024 19:04:02 -0700
Subject: [PATCH 07/19] tweak top menu styles

---
 src/components/menu/main-menu.tsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index e4483380..dea4ec6e 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -4,10 +4,7 @@ import Link from "@components/elements/link";
 import SiteSearchForm from "@components/search/site-search-form";
 import useActiveTrail from "@lib/hooks/useActiveTrail";
 import useOutsideClick from "@lib/hooks/useOutsideClick";
-import {
-  ChevronDownIcon,
-  MagnifyingGlassIcon,
-} from "@heroicons/react/20/solid";
+import { ArrowRightIcon, ChevronDownIcon, MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 import { MenuItem as MenuItemType } from "@lib/gql/__generated__/drupal.d";
 import { clsx } from "clsx";
 import { useBoolean, useEventListener } from "usehooks-ts";
@@ -119,9 +116,12 @@ const MainMenu = ({ menuItems }: Props) => {
               level={0}
             />
           ))}
-          <Link href="/search">
-            <MagnifyingGlassIcon width={25} className="text-archway-dark" />
-          </Link>
+
+          <li className="mb-0 pb-0">
+            <Link id="search" href="/search" className="h-full inline-block no-underline border-b-[4px] border-transparent px-5 pt-5 pb-10 border-b-[4px] hocus:border-spirited-light">
+              <MagnifyingGlassIcon width={25} className="text-archway-dark" />
+            </Link>
+          </li>
         </ul>
       </div>
     </nav>
@@ -190,15 +190,16 @@ const MenuItem = ({
   const inTrail = activeTrail.includes(id) && !isCurrent;
 
   const linkStyles = clsx(
-    "w-full relative inline-block font-normal text-black hocus:text-black no-underline py-5 border-b-[4px] hocus:border-spirited-light",
+    "group w-full relative inline-block font-normal text-black hocus:text-black no-underline py-5 border-b-[4px] hocus:border-spirited-light",
     leftPadding[level],
     // Top menu item styles.
     {
-      "lg:border-l-0 lg:border-b-[4px] mx-5 lg:mr-0 lg:pb-10": level === 0,
+      "lg:border-l-0 lg:border-b-[4px] lg:mr-0 lg:pb-10": level === 0,
       "border-spirited-light": level === 0 && isCurrent,
       "border-transparent lg:border-spirited-light":
         level === 0 && !isCurrent && inTrail,
       "border-transparent": level === 0 && !isCurrent && !inTrail,
+      "lg:pr-10" : level === 0 && children.length === 0,
     },
     // Child menu item styles.
     {
@@ -209,7 +210,7 @@ const MenuItem = ({
   );
 
   const chevronBtnStyles = clsx(
-    "shrink-0 relative right-10 lg:right-0 text-black bg-transparent lg:bg-transparent rounded-full lg:rounded-none lg:mr-5 lg:pb-6 lg:pl-2 lg:group-focus:border-b lg:group-hover:border-b-[4px] lg:group-focus:border-spirited-light lg:group-hover:border-spirited-light",
+    "shrink-0 relative right-10 lg:right-0 text-black bg-transparent lg:bg-transparent rounded-full lg:rounded-none lg:pr-5 lg:pb-6 lg:pl-2 lg:group-focus:border-b lg:group-hover:border-b-[4px] lg:group-focus:border-spirited-light lg:group-hover:border-spirited-light",
     // Top menu item styles.
     {
       "lg:border-l-0 lg:border-b-[4px]": level === 0,
@@ -221,7 +222,7 @@ const MenuItem = ({
   );
 
   const subMenuStyles = clsx(
-    "list-unstyled w-full min-w-[300px] lg:bg-fog-light lg:border lg:border-white lg:shadow-2xl lg:absolute lg:rounded-[25px] lg:px-12 lg:py-4 lg:mt-3",
+    "list-unstyled w-full min-w-[350px] lg:bg-fog-light lg:border lg:border-white lg:shadow-2xl lg:absolute lg:rounded-[25px] lg:px-12 lg:py-4 lg:mt-3",
     zIndexes[level],
     {
       "lg:top-full lg:right-0": level === 0,
@@ -238,7 +239,7 @@ const MenuItem = ({
       ref={menuItemRef}
       className={clsx(
         "m-0 lg:py-0 relative border-b last:border-0 border-spirited-light lg:relative",
-        { "lg:border-b-0 first:border-t-0": level === 0 }
+        { "lg:border-b-0 first:border-t-0 lg:mr-10 lg:last:mr-0": level === 0 }
       )}
     >
       <div className="group flex justify-between lg:justify-end">
@@ -249,6 +250,7 @@ const MenuItem = ({
           aria-current={isCurrent ? "true" : undefined}
         >
           {title}
+          {level !== 0 && <ArrowRightIcon width={20} className="hidden group-focus:inline-block group-hover:inline-block ml-2" />}
         </Link>
 
         {children.length > 0 && level < menuLevelsToShow && (

From 9951233668dc3b7fec1e4a233efa6f83b671d8dd Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Thu, 25 Apr 2024 15:22:44 -0700
Subject: [PATCH 08/19] adjust mobile menu styles

---
 src/components/global/page-header.tsx |  8 +++++---
 src/components/menu/main-menu.tsx     | 10 +++++-----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/global/page-header.tsx b/src/components/global/page-header.tsx
index af9d5d80..bb19de48 100644
--- a/src/components/global/page-header.tsx
+++ b/src/components/global/page-header.tsx
@@ -30,9 +30,11 @@ const PageHeader = async () => {
       </div>
       {globalMessageConfig && <GlobalMessage {...globalMessageConfig}/>}
       <div className="relative bg-fog-light">
-        <div className="centered min-h-50 pr-24 lg:rs-py-2 lg:pr-0">
-          <div className="flex w-full justify-between">
-            <Lockup {...siteSettingsConfig} {...lockupSettingsConfig}/>
+        <div className="w-full border-b-2">
+          <div className="centered min-h-50 pr-24 rs-py-2 lg:pr-0">
+            <div className="flex w-full justify-between">
+              <Lockup {...siteSettingsConfig} {...lockupSettingsConfig}/>
+            </div>
           </div>
         </div>
 
diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index dea4ec6e..e5bb32db 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -64,7 +64,7 @@ const MainMenu = ({ menuItems }: Props) => {
     >
       <button
         ref={buttonRef}
-        className="flex flex-col items-center lg:hidden absolute top-5 right-10 group"
+        className="flex flex-col items-center lg:hidden absolute top-5 right-10 rs-py-2 group"
         onClick={toggleMenu}
         aria-expanded={menuOpen}
         aria-labelledby={navId}
@@ -117,7 +117,7 @@ const MainMenu = ({ menuItems }: Props) => {
             />
           ))}
 
-          <li className="mb-0 pb-0">
+          <li className="hidden lg:block mb-0 pb-0">
             <Link id="search" href="/search" className="h-full inline-block no-underline border-b-[4px] border-transparent px-5 pt-5 pb-10 border-b-[4px] hocus:border-spirited-light">
               <MagnifyingGlassIcon width={25} className="text-archway-dark" />
             </Link>
@@ -210,10 +210,10 @@ const MenuItem = ({
   );
 
   const chevronBtnStyles = clsx(
-    "shrink-0 relative right-10 lg:right-0 text-black bg-transparent lg:bg-transparent rounded-full lg:rounded-none lg:pr-5 lg:pb-6 lg:pl-2 lg:group-focus:border-b lg:group-hover:border-b-[4px] lg:group-focus:border-spirited-light lg:group-hover:border-spirited-light",
+    "shrink-0 relative pr-10 lg:right-0 text-black bg-transparent lg:bg-transparent lg:pr-5 lg:pb-6 lg:pl-2 lg:group-focus:border-b lg:group-hover:border-b-[4px] lg:group-focus:border-spirited-light lg:group-hover:border-spirited-light",
     // Top menu item styles.
     {
-      "lg:border-l-0 lg:border-b-[4px]": level === 0,
+      "border-b-[4px]": level === 0,
       "border-spirited-light": level === 0 && isCurrent,
       "border-transparent lg:border-spirited-light":
         level === 0 && !isCurrent && inTrail,
@@ -242,7 +242,7 @@ const MenuItem = ({
         { "lg:border-b-0 first:border-t-0 lg:mr-10 lg:last:mr-0": level === 0 }
       )}
     >
-      <div className="group flex justify-between lg:justify-end">
+      <div className="group flex lg:justify-end">
         <Link
           id={linkId}
           href={url || "#"}

From 00ddea317170bd1148a52c8d43ad015371ae24b3 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Thu, 25 Apr 2024 15:27:01 -0700
Subject: [PATCH 09/19] remove parentheses

---
 src/components/menu/main-menu.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index e5bb32db..81a65e5a 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -253,7 +253,7 @@ const MenuItem = ({
           {level !== 0 && <ArrowRightIcon width={20} className="hidden group-focus:inline-block group-hover:inline-block ml-2" />}
         </Link>
 
-        {children.length > 0 && level < menuLevelsToShow && (
+        {children.length > 0 && level < menuLevelsToShow &&
           <button
             ref={buttonRef}
             className={chevronBtnStyles}
@@ -269,10 +269,10 @@ const MenuItem = ({
               )}
             />
           </button>
-        )}
+        }
       </div>
 
-      {children.length > 0 && level < menuLevelsToShow && (
+      {children.length > 0 && level < menuLevelsToShow &&
         <ul className={subMenuStyles} ref={belowListRef}>
           {children.map((item) => (
             <MenuItem
@@ -283,7 +283,7 @@ const MenuItem = ({
             />
           ))}
         </ul>
-      )}
+      }
     </li>
   );
 };

From 72fe75ef7bd6b0077342f879296cb37bb15860c8 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Thu, 25 Apr 2024 15:30:21 -0700
Subject: [PATCH 10/19] fixup formatting

---
 src/components/menu/main-menu.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index 81a65e5a..bfb36ecd 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -32,11 +32,7 @@ const MainMenu = ({ menuItems }: Props) => {
   const menuRef = useRef<HTMLDivElement>(null);
   const navId = useId();
 
-  const {
-    value: menuOpen,
-    setFalse: closeMenu,
-    toggle: toggleMenu,
-  } = useBoolean(false);
+  const { value: menuOpen, setFalse: closeMenu, toggle: toggleMenu } = useBoolean(false);
   const browserUrl = usePathname();
   const activeTrail = useActiveTrail(menuItems, usePathname() || "");
 

From e1e98a28acac7d85b25a61c346c1cb0f3c47c1d5 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Thu, 25 Apr 2024 15:31:35 -0700
Subject: [PATCH 11/19] fixup formatting

---
 src/components/menu/main-menu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index bfb36ecd..1c0d7e04 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -178,8 +178,8 @@ const MenuItem = ({
   useEventListener("keydown", handleEscape, menuItemRef);
 
   // List out the specific classes so tailwind will include them. Dynamic classes values don"t get compiled.
-  const zIndexes = ["z-[1]", "z-[2]", "z-[3]", "z-[4]", "z-[5]"];
-  const leftPadding = ["pl-10", "pl-20", "pl-28", "pl-48"];
+  const zIndexes = ["z-[1]", "z-[2]", "z-[3]", "z-[4]", "z-[5]"]
+  const leftPadding = ["pl-10", "pl-20", "pl-28", "pl-48"]
 
   // The last item in the current trail would be the current item id if the user is on that page.
   const isCurrent = activeTrail.at(-1) === id;

From c3b4f5fcf60f294b124b6fdafddfd873ced27f6b Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Fri, 26 Apr 2024 12:09:38 -0700
Subject: [PATCH 12/19] remove border on large

---
 src/components/global/page-header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/global/page-header.tsx b/src/components/global/page-header.tsx
index bb19de48..a6eb5aed 100644
--- a/src/components/global/page-header.tsx
+++ b/src/components/global/page-header.tsx
@@ -30,7 +30,7 @@ const PageHeader = async () => {
       </div>
       {globalMessageConfig && <GlobalMessage {...globalMessageConfig}/>}
       <div className="relative bg-fog-light">
-        <div className="w-full border-b-2">
+        <div className="w-full border-b-2 lg:border-b-0">
           <div className="centered min-h-50 pr-24 rs-py-2 lg:pr-0">
             <div className="flex w-full justify-between">
               <Lockup {...siteSettingsConfig} {...lockupSettingsConfig}/>

From 9d1857c7c8483c2c801d429bd6b4dcccdad0a36c Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Sat, 27 Apr 2024 21:44:04 -0700
Subject: [PATCH 13/19] add header buttons

---
 .../config-pages/header-buttons.tsx           | 20 +++++++++++++++++++
 src/components/global/page-header.tsx         |  9 ++++++---
 src/components/menu/main-menu.tsx             | 11 +++++++---
 3 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 src/components/config-pages/header-buttons.tsx

diff --git a/src/components/config-pages/header-buttons.tsx b/src/components/config-pages/header-buttons.tsx
new file mode 100644
index 00000000..5023efe4
--- /dev/null
+++ b/src/components/config-pages/header-buttons.tsx
@@ -0,0 +1,20 @@
+
+import Button from "@components/elements/button";
+import { StanfordBasicSiteSetting } from "@lib/gql/__generated__/drupal.d";
+
+type Props =
+  Omit<StanfordBasicSiteSetting, "__typename" | "id" | "metatag">
+
+
+export const HeaderButtons = ({
+  sumSiteHeaderPrim,
+  sumSiteHeaderSec,
+}: Props) => {
+      return (
+        <>
+          {sumSiteHeaderPrim && <Button href={sumSiteHeaderPrim.url} secondary>{sumSiteHeaderPrim.title}</Button>}
+          {sumSiteHeaderSec && <Button href={sumSiteHeaderSec.url}>{sumSiteHeaderSec.title}</Button>}
+        </>
+      )
+}
+export default HeaderButtons;
\ No newline at end of file
diff --git a/src/components/global/page-header.tsx b/src/components/global/page-header.tsx
index a6eb5aed..35f68b7e 100644
--- a/src/components/global/page-header.tsx
+++ b/src/components/global/page-header.tsx
@@ -9,6 +9,7 @@ import {
   StanfordGlobalMessage
 } from "@lib/gql/__generated__/drupal.d";
 import {isPreviewMode} from "@lib/drupal/utils";
+import HeaderButtons from "@components/config-pages/header-buttons";
 
 const PageHeader = async () => {
   const menuItems = await getMenu(MenuAvailable.Main, isPreviewMode());
@@ -33,12 +34,14 @@ const PageHeader = async () => {
         <div className="w-full border-b-2 lg:border-b-0">
           <div className="centered min-h-50 pr-24 rs-py-2 lg:pr-0">
             <div className="flex w-full justify-between">
-              <Lockup {...siteSettingsConfig} {...lockupSettingsConfig}/>
+              <Lockup {...siteSettingsConfig} {...lockupSettingsConfig} />
+              <div className="hidden lg:block">
+                <HeaderButtons  {...siteSettingsConfig} />
+              </div>
             </div>
           </div>
         </div>
-
-        <MainMenu menuItems={menuItems}/>
+        <MainMenu menuItems={menuItems} {...siteSettingsConfig}/>
       </div>
     </header>
   )
diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index 1c0d7e04..0b811d38 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -5,7 +5,7 @@ import SiteSearchForm from "@components/search/site-search-form";
 import useActiveTrail from "@lib/hooks/useActiveTrail";
 import useOutsideClick from "@lib/hooks/useOutsideClick";
 import { ArrowRightIcon, ChevronDownIcon, MagnifyingGlassIcon } from "@heroicons/react/20/solid";
-import { MenuItem as MenuItemType } from "@lib/gql/__generated__/drupal.d";
+import { MenuItem as MenuItemType, StanfordBasicSiteSetting } from "@lib/gql/__generated__/drupal.d";
 import { clsx } from "clsx";
 import { useBoolean, useEventListener } from "usehooks-ts";
 import {
@@ -17,17 +17,19 @@ import {
   useState,
 } from "react";
 import { usePathname } from "next/navigation";
+import HeaderButtons from "@components/config-pages/header-buttons";
 
 const menuLevelsToShow = 2;
 
-type Props = {
+type Props =
+  Omit<StanfordBasicSiteSetting, "__typename" | "id" | "metatag"> & {
   /**
    * Array of nested menu items.
    */
   menuItems: MenuItemType[];
 };
 
-const MainMenu = ({ menuItems }: Props) => {
+const MainMenu = ({ menuItems, ...siteSettingsConfig}: Props) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
   const navId = useId();
@@ -103,6 +105,9 @@ const MainMenu = ({ menuItems }: Props) => {
         }
       >
         <SiteSearchForm className="px-10 lg:hidden" />
+        <div className="border-b border-spirited-light flex flex-col items-center mt-10 lg:hidden children:w-full children:centered">
+          <HeaderButtons  {...siteSettingsConfig} />
+        </div>
         <ul className="list-unstyled lg:flex lg:justify-end flex-wrap m-0 p-0">
           {menuItems.map((item) => (
             <MenuItem

From bb949f59e77d1cb9fd112b1162acce5bb4fe52c3 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Wed, 1 May 2024 12:01:42 -0700
Subject: [PATCH 14/19] remove header buttons component; move two liners into
 page header and main menu; remove unnecessary div in lockup; fixup
 formatting; remove unnecessary group-focus; add mobile chevron underline

---
 .../config-pages/header-buttons.tsx           | 20 ------------
 src/components/elements/lockup/lockup.tsx     | 32 ++++++++-----------
 src/components/global/page-header.tsx         |  5 +--
 src/components/menu/main-menu.tsx             | 24 ++++++--------
 4 files changed, 27 insertions(+), 54 deletions(-)
 delete mode 100644 src/components/config-pages/header-buttons.tsx

diff --git a/src/components/config-pages/header-buttons.tsx b/src/components/config-pages/header-buttons.tsx
deleted file mode 100644
index 5023efe4..00000000
--- a/src/components/config-pages/header-buttons.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-
-import Button from "@components/elements/button";
-import { StanfordBasicSiteSetting } from "@lib/gql/__generated__/drupal.d";
-
-type Props =
-  Omit<StanfordBasicSiteSetting, "__typename" | "id" | "metatag">
-
-
-export const HeaderButtons = ({
-  sumSiteHeaderPrim,
-  sumSiteHeaderSec,
-}: Props) => {
-      return (
-        <>
-          {sumSiteHeaderPrim && <Button href={sumSiteHeaderPrim.url} secondary>{sumSiteHeaderPrim.title}</Button>}
-          {sumSiteHeaderSec && <Button href={sumSiteHeaderSec.url}>{sumSiteHeaderSec.title}</Button>}
-        </>
-      )
-}
-export default HeaderButtons;
\ No newline at end of file
diff --git a/src/components/elements/lockup/lockup.tsx b/src/components/elements/lockup/lockup.tsx
index 73ec7abd..1a2a32e9 100644
--- a/src/components/elements/lockup/lockup.tsx
+++ b/src/components/elements/lockup/lockup.tsx
@@ -43,19 +43,17 @@ export const Lockup = ({
 
   if (!suLockupEnabled) {
     return (
-      <div>
-        <Link href="/" className="flex no-underline">
-          <div className="self-end">
-            <div className="lg:inline-block pr-2 mr-2 lg:border-r border-black">
-              <LockupLogo {...lockupProps}/>
-            </div>
-            <div
-              className="lg:inline-block font-normal text-black text-m2">
-              {suSiteName || "University"}
-            </div>
+      <Link href="/" className="flex no-underline">
+        <div className="self-end">
+          <div className="lg:inline-block pr-2 mr-2 lg:border-r border-black">
+            <LockupLogo {...lockupProps}/>
           </div>
-        </Link>
-      </div>
+          <div
+            className="lg:inline-block font-normal text-black text-m2">
+            {suSiteName || "University"}
+          </div>
+        </div>
+      </Link>
     )
   }
 
@@ -99,12 +97,10 @@ export const Lockup = ({
     case "none":
     default:
       return (
-        <div>
-          <Link href="/"
-                className="flex flex-col lg:flex-row gap-4 no-underline">
-            <LockupLogo {...lockupProps}/>
-          </Link>
-        </div>
+        <Link href="/"
+              className="flex flex-col lg:flex-row gap-4 no-underline">
+          <LockupLogo {...lockupProps}/>
+        </Link>
       )
   }
 }
diff --git a/src/components/global/page-header.tsx b/src/components/global/page-header.tsx
index 35f68b7e..9e69c05f 100644
--- a/src/components/global/page-header.tsx
+++ b/src/components/global/page-header.tsx
@@ -9,7 +9,7 @@ import {
   StanfordGlobalMessage
 } from "@lib/gql/__generated__/drupal.d";
 import {isPreviewMode} from "@lib/drupal/utils";
-import HeaderButtons from "@components/config-pages/header-buttons";
+import Button from "@components/elements/button";
 
 const PageHeader = async () => {
   const menuItems = await getMenu(MenuAvailable.Main, isPreviewMode());
@@ -36,7 +36,8 @@ const PageHeader = async () => {
             <div className="flex w-full justify-between">
               <Lockup {...siteSettingsConfig} {...lockupSettingsConfig} />
               <div className="hidden lg:block">
-                <HeaderButtons  {...siteSettingsConfig} />
+                {siteSettingsConfig && siteSettingsConfig.sumSiteHeaderPrim && <Button href={siteSettingsConfig.sumSiteHeaderPrim.url} secondary>{siteSettingsConfig.sumSiteHeaderPrim.title}</Button>}
+                {siteSettingsConfig && siteSettingsConfig.sumSiteHeaderSec && <Button href={siteSettingsConfig.sumSiteHeaderSec.url}>{siteSettingsConfig.sumSiteHeaderSec.title}</Button>}
               </div>
             </div>
           </div>
diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index 0b811d38..19ce1334 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -17,7 +17,7 @@ import {
   useState,
 } from "react";
 import { usePathname } from "next/navigation";
-import HeaderButtons from "@components/config-pages/header-buttons";
+import Button from "@components/elements/button";
 
 const menuLevelsToShow = 2;
 
@@ -98,28 +98,24 @@ const MainMenu = ({ menuItems, ...siteSettingsConfig}: Props) => {
         </span>
       </button>
 
-      <div
-        className={
-          (menuOpen ? "block" : "hidden") +
-          " lg:flex lg:justify-end lg:items-center bg-fog-light lg:bg-transparent absolute top-100 lg:relative z-10 w-full"
-        }
-      >
+      <div className={clsx(menuOpen ? "block" : "hidden", "lg:flex lg:justify-end lg:items-center bg-fog-light lg:bg-transparent absolute top-100 lg:relative z-10 w-full")}>
         <SiteSearchForm className="px-10 lg:hidden" />
         <div className="border-b border-spirited-light flex flex-col items-center mt-10 lg:hidden children:w-full children:centered">
-          <HeaderButtons  {...siteSettingsConfig} />
+          {siteSettingsConfig && siteSettingsConfig.sumSiteHeaderPrim && <Button href={siteSettingsConfig.sumSiteHeaderPrim.url} secondary>{siteSettingsConfig.sumSiteHeaderPrim.title}</Button>}
+          {siteSettingsConfig && siteSettingsConfig.sumSiteHeaderSec && <Button href={siteSettingsConfig.sumSiteHeaderSec.url}>{siteSettingsConfig.sumSiteHeaderSec.title}</Button>}
         </div>
         <ul className="list-unstyled lg:flex lg:justify-end flex-wrap m-0 p-0">
-          {menuItems.map((item) => (
+          {menuItems.map((item) =>
             <MenuItem
               key={item.id}
               {...item}
               activeTrail={activeTrail}
               level={0}
             />
-          ))}
+          )}
 
           <li className="hidden lg:block mb-0 pb-0">
-            <Link id="search" href="/search" className="h-full inline-block no-underline border-b-[4px] border-transparent px-5 pt-5 pb-10 border-b-[4px] hocus:border-spirited-light">
+            <Link id="search" href="/search" prefetch={false} className="h-full inline-block no-underline border-b-[4px] border-transparent px-5 pt-5 pb-10 border-b-[4px] hocus:border-spirited-light">
               <MagnifyingGlassIcon width={25} className="text-archway-dark" />
             </Link>
           </li>
@@ -211,7 +207,7 @@ const MenuItem = ({
   );
 
   const chevronBtnStyles = clsx(
-    "shrink-0 relative pr-10 lg:right-0 text-black bg-transparent lg:bg-transparent lg:pr-5 lg:pb-6 lg:pl-2 lg:group-focus:border-b lg:group-hover:border-b-[4px] lg:group-focus:border-spirited-light lg:group-hover:border-spirited-light",
+    "shrink-0 relative pr-10 lg:right-0 text-black bg-transparent lg:bg-transparent lg:pr-5 lg:pb-6 lg:pl-2 hocus:border-b-[4px] lg:group-hover:border-b-[4px] hocus:border-spirited-light lg:group-hover:border-spirited-light",
     // Top menu item styles.
     {
       "border-b-[4px]": level === 0,
@@ -275,14 +271,14 @@ const MenuItem = ({
 
       {children.length > 0 && level < menuLevelsToShow &&
         <ul className={subMenuStyles} ref={belowListRef}>
-          {children.map((item) => (
+          {children.map((item) =>
             <MenuItem
               key={item.id}
               {...item}
               level={level + 1}
               activeTrail={activeTrail}
             />
-          ))}
+          )}
         </ul>
       }
     </li>

From 8555d3ed26ac85d73a4ea35074d87701b0ba7192 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Thu, 2 May 2024 08:40:51 -0700
Subject: [PATCH 15/19] add types; fixup button order and style

---
 src/components/menu/main-menu.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index 19ce1334..8d4a4052 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -21,12 +21,13 @@ import Button from "@components/elements/button";
 
 const menuLevelsToShow = 2;
 
-type Props =
-  Omit<StanfordBasicSiteSetting, "__typename" | "id" | "metatag"> & {
+type Props = {
   /**
    * Array of nested menu items.
    */
   menuItems: MenuItemType[];
+  sumSiteHeaderPrim: StanfordBasicSiteSetting["sumSiteHeaderPrim"];
+  sumSiteHeaderSec: StanfordBasicSiteSetting["sumSiteHeaderSec"];
 };
 
 const MainMenu = ({ menuItems, ...siteSettingsConfig}: Props) => {
@@ -101,8 +102,8 @@ const MainMenu = ({ menuItems, ...siteSettingsConfig}: Props) => {
       <div className={clsx(menuOpen ? "block" : "hidden", "lg:flex lg:justify-end lg:items-center bg-fog-light lg:bg-transparent absolute top-100 lg:relative z-10 w-full")}>
         <SiteSearchForm className="px-10 lg:hidden" />
         <div className="border-b border-spirited-light flex flex-col items-center mt-10 lg:hidden children:w-full children:centered">
-          {siteSettingsConfig && siteSettingsConfig.sumSiteHeaderPrim && <Button href={siteSettingsConfig.sumSiteHeaderPrim.url} secondary>{siteSettingsConfig.sumSiteHeaderPrim.title}</Button>}
-          {siteSettingsConfig && siteSettingsConfig.sumSiteHeaderSec && <Button href={siteSettingsConfig.sumSiteHeaderSec.url}>{siteSettingsConfig.sumSiteHeaderSec.title}</Button>}
+          {siteSettingsConfig && siteSettingsConfig.sumSiteHeaderSec && <Button href={siteSettingsConfig.sumSiteHeaderSec.url} secondary>{siteSettingsConfig.sumSiteHeaderSec.title}</Button>}
+          {siteSettingsConfig && siteSettingsConfig.sumSiteHeaderPrim && <Button href={siteSettingsConfig.sumSiteHeaderPrim.url}>{siteSettingsConfig.sumSiteHeaderPrim.title}</Button>}
         </div>
         <ul className="list-unstyled lg:flex lg:justify-end flex-wrap m-0 p-0">
           {menuItems.map((item) =>

From 2ed7e13801525b5696b0082aee29922238e08b1e Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Thu, 2 May 2024 08:56:56 -0700
Subject: [PATCH 16/19] fixup lint err

---
 src/components/menu/main-menu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index 8d4a4052..2f187536 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -26,8 +26,8 @@ type Props = {
    * Array of nested menu items.
    */
   menuItems: MenuItemType[];
-  sumSiteHeaderPrim: StanfordBasicSiteSetting["sumSiteHeaderPrim"];
-  sumSiteHeaderSec: StanfordBasicSiteSetting["sumSiteHeaderSec"];
+  sumSiteHeaderPrim?: StanfordBasicSiteSetting["sumSiteHeaderPrim"];
+  sumSiteHeaderSec?: StanfordBasicSiteSetting["sumSiteHeaderSec"];
 };
 
 const MainMenu = ({ menuItems, ...siteSettingsConfig}: Props) => {

From 940a2f46cb648b473f967811dcac4008376d482f Mon Sep 17 00:00:00 2001
From: Rebecca Hong <34019925+rebeccahongsf@users.noreply.github.com>
Date: Fri, 3 May 2024 13:33:39 -0700
Subject: [PATCH 17/19] Pass in primary and secondary button props

Co-authored-by: pookmish <pookmish@gmail.com>
---
 src/components/menu/main-menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index 2f187536..9ad92cc8 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -30,7 +30,7 @@ type Props = {
   sumSiteHeaderSec?: StanfordBasicSiteSetting["sumSiteHeaderSec"];
 };
 
-const MainMenu = ({ menuItems, ...siteSettingsConfig}: Props) => {
+const MainMenu = ({ menuItems, sumSiteHeaderPrim, sumSiteHeaderSec}: Props) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
   const navId = useId();

From 76c3a2187973bda964999b234a5a79272b44d778 Mon Sep 17 00:00:00 2001
From: Rebecca Hong <34019925+rebeccahongsf@users.noreply.github.com>
Date: Fri, 3 May 2024 13:33:47 -0700
Subject: [PATCH 18/19] Pass in primary and secondary button props

Co-authored-by: pookmish <pookmish@gmail.com>
---
 src/components/global/page-header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/global/page-header.tsx b/src/components/global/page-header.tsx
index 9e69c05f..490625af 100644
--- a/src/components/global/page-header.tsx
+++ b/src/components/global/page-header.tsx
@@ -42,7 +42,7 @@ const PageHeader = async () => {
             </div>
           </div>
         </div>
-        <MainMenu menuItems={menuItems} {...siteSettingsConfig}/>
+        <MainMenu menuItems={menuItems} sumSiteHeaderPrim={siteSettingsConfig?.sumSiteHeaderPrim} sumSiteHeaderSec={siteSettingsConfig?.sumSiteHeaderSec}/>
       </div>
     </header>
   )

From 208d38c8a6525a42848790af292ad779903ec1da Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Mon, 6 May 2024 13:39:21 -0700
Subject: [PATCH 19/19] fixup lint err

---
 src/components/menu/main-menu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/menu/main-menu.tsx b/src/components/menu/main-menu.tsx
index 9ad92cc8..019c51d2 100644
--- a/src/components/menu/main-menu.tsx
+++ b/src/components/menu/main-menu.tsx
@@ -102,8 +102,8 @@ const MainMenu = ({ menuItems, sumSiteHeaderPrim, sumSiteHeaderSec}: Props) => {
       <div className={clsx(menuOpen ? "block" : "hidden", "lg:flex lg:justify-end lg:items-center bg-fog-light lg:bg-transparent absolute top-100 lg:relative z-10 w-full")}>
         <SiteSearchForm className="px-10 lg:hidden" />
         <div className="border-b border-spirited-light flex flex-col items-center mt-10 lg:hidden children:w-full children:centered">
-          {siteSettingsConfig && siteSettingsConfig.sumSiteHeaderSec && <Button href={siteSettingsConfig.sumSiteHeaderSec.url} secondary>{siteSettingsConfig.sumSiteHeaderSec.title}</Button>}
-          {siteSettingsConfig && siteSettingsConfig.sumSiteHeaderPrim && <Button href={siteSettingsConfig.sumSiteHeaderPrim.url}>{siteSettingsConfig.sumSiteHeaderPrim.title}</Button>}
+          {sumSiteHeaderSec && <Button href={sumSiteHeaderSec.url} secondary>{sumSiteHeaderSec.title}</Button>}
+          {sumSiteHeaderPrim && <Button href={sumSiteHeaderPrim.url}>{sumSiteHeaderPrim.title}</Button>}
         </div>
         <ul className="list-unstyled lg:flex lg:justify-end flex-wrap m-0 p-0">
           {menuItems.map((item) =>