Lazy load / force client render of nav drawer and user menu

frontends/main/src/page-components/Header/Header.tsx

@@ -1,14 +1,9 @@
 "use client"
 
 import React, { FunctionComponent } from "react"
+import dynamic from "next/dynamic"
 import type { NavData } from "ol-components"
-import {
-  styled,
-  AppBar,
-  NavDrawer,
-  Toolbar,
-  ActionButtonLink,
-} from "ol-components"
+import { styled, AppBar, Toolbar, ActionButtonLink } from "ol-components"
 import {
   RiSearch2Line,
   RiPencilRulerLine,
@@ -25,7 +20,6 @@ import {
 } from "@remixicon/react"
 import { useToggle } from "ol-utilities"
 import MITLogoLink from "@/components/MITLogoLink/MITLogoLink"
-import UserMenu from "./UserMenu"
 import { MenuButton } from "./MenuButton"
 import {
   DEPARTMENTS,
@@ -43,6 +37,13 @@ import {
 } from "@/common/urls"
 import { useUserMe } from "api/hooks/user"
 
+const NavDrawer = dynamic(
+  () => import("ol-components").then((mod) => mod.NavDrawer),
+  { ssr: false },
+)
+
+const UserMenu = dynamic(() => import("./UserMenu"), { ssr: false })
+
 const Bar = styled(AppBar)(({ theme }) => ({
   padding: "16px 8px",
   backgroundColor: theme.custom.colors.navGray,