From f20c88abcfac1e76c6a013878aa2d56e4ab4af38 Mon Sep 17 00:00:00 2001
From: Eleanor Mollett <eleanor.mollett@gmail.com>
Date: Wed, 11 Aug 2021 15:40:47 +0100
Subject: [PATCH 1/7] Scrim

---
 src/Header/Header.jsx                | 164 +++++++++++++++------------
 src/Header/Header.module.scss        |   9 ++
 src/Header/Nav/Nav.jsx               |   2 +
 src/Header/Nav/NavLinks/NavLinks.jsx |  13 ++-
 4 files changed, 115 insertions(+), 73 deletions(-)

diff --git a/src/Header/Header.jsx b/src/Header/Header.jsx
index 3822daf5..c27e5247 100644
--- a/src/Header/Header.jsx
+++ b/src/Header/Header.jsx
@@ -24,11 +24,13 @@ export class Header extends Component {
 			isExpanded: false,
 			isLoggedIn: false,
 			accountsData: null,
+			scrimIsActive: false,
 		};
 
 		this.handleMobileMenuBtnClick = this.handleMobileMenuBtnClick.bind(this);
 		this.handleLoginStatusChecked = this.handleLoginStatusChecked.bind(this);
 		this.handleLogoClick = this.handleLogoClick.bind(this);
+		this.handleScrim = this.handleScrim.bind(this);
 	}
 
 	componentDidMount() {
@@ -67,6 +69,14 @@ export class Header extends Component {
 		);
 	}
 
+	handleScrim(scrim) {
+		if (scrim === true) {
+			this.setState({ scrimIsActive: true });
+		} else {
+			this.setState({ scrimIsActive: false });
+		}
+	}
+
 	handleLoginStatusChecked(accountsData) {
 		if (accountsData.display_name) {
 			this.setState({ isLoggedIn: true, accountsData: accountsData });
@@ -78,81 +88,91 @@ export class Header extends Component {
 	render() {
 		return (
 			this.props.enabled !== false && (
-				<div className={styles.header}>
-					<header aria-label="Site header">
-						<ul className={styles.a11yLinks} aria-label="Accessibility links">
-							<li>
-								<SkipLink to={`#${this.props.skipLinkId}`}>
-									Skip to content
-								</SkipLink>
-							</li>
-							<li>
-								<SkipLink to="https://www.nice.org.uk/accessibility">
-									Accessibility help
-								</SkipLink>
-							</li>
-						</ul>
-						<div className={styles.container}>
-							<a
-								href="https://www.nice.org.uk/"
-								aria-label="Home"
-								className={styles.home}
-								onClick={this.handleLogoClick}
-							>
-								<LogoIcon className={styles.icon} width={null} height={null} />
-							</a>
-							<div className={styles.wrapper}>
-								<div className={styles.search}>
-									{this.props.search && (
-										<Search
-											skipLinkId={this.props.skipLinkId}
-											onNavigating={this.props.onNavigating}
-											{...this.props.search}
-										/>
-									)}
-								</div>
-								<button
-									className={styles.mobileMenuBtn}
-									id="header-menu-button"
-									type="button"
-									aria-controls="header-menu"
-									aria-expanded={this.state.isExpanded}
-									aria-haspopup="menu"
-									aria-label={
-										this.state.isExpanded
-											? "Close site menu"
-											: "Expand site menu"
-									}
-									onClick={this.handleMobileMenuBtnClick}
+				<>
+					{this.state.scrimIsActive && (
+						<span className={styles.scrim} aria-hidden="true" />
+					)}
+					<div className={styles.header}>
+						<header aria-label="Site header">
+							<ul className={styles.a11yLinks} aria-label="Accessibility links">
+								<li>
+									<SkipLink to={`#${this.props.skipLinkId}`}>
+										Skip to content
+									</SkipLink>
+								</li>
+								<li>
+									<SkipLink to="https://www.nice.org.uk/accessibility">
+										Accessibility help
+									</SkipLink>
+								</li>
+							</ul>
+							<div className={styles.container}>
+								<a
+									href="https://www.nice.org.uk/"
+									aria-label="Home"
+									className={styles.home}
+									onClick={this.handleLogoClick}
 								>
-									{this.state.isExpanded ? "Close" : "Menu"}
-								</button>
-								{this.props.auth !== false && (
-									<div className={styles.account}>
-										<Account
-											onLoginStatusChecked={this.handleLoginStatusChecked}
-											isLoggedIn={this.state.isLoggedIn}
-											accountsData={this.state.accountsData}
-											{...this.props.auth}
-										/>
+									<LogoIcon
+										className={styles.icon}
+										width={null}
+										height={null}
+									/>
+								</a>
+								<div className={styles.wrapper}>
+									<div className={styles.search}>
+										{this.props.search && (
+											<Search
+												skipLinkId={this.props.skipLinkId}
+												onNavigating={this.props.onNavigating}
+												{...this.props.search}
+											/>
+										)}
 									</div>
-								)}
+									<button
+										className={styles.mobileMenuBtn}
+										id="header-menu-button"
+										type="button"
+										aria-controls="header-menu"
+										aria-expanded={this.state.isExpanded}
+										aria-haspopup="menu"
+										aria-label={
+											this.state.isExpanded
+												? "Close site menu"
+												: "Expand site menu"
+										}
+										onClick={this.handleMobileMenuBtnClick}
+									>
+										{this.state.isExpanded ? "Close" : "Menu"}
+									</button>
+									{this.props.auth !== false && (
+										<div className={styles.account}>
+											<Account
+												onLoginStatusChecked={this.handleLoginStatusChecked}
+												isLoggedIn={this.state.isLoggedIn}
+												accountsData={this.state.accountsData}
+												{...this.props.auth}
+											/>
+										</div>
+									)}
+								</div>
 							</div>
-						</div>
-						<Nav
-							skipLinkId={this.props.skipLinkId}
-							service={this.props.service}
-							isExpanded={this.state.isExpanded}
-							accountsLinks={
-								this.state.accountsData && this.state.accountsData.links
-							}
-							onNavigating={this.props.onNavigating}
-							additionalSubMenuItems={this.props.additionalSubMenuItems}
-						/>
-					</header>
-					<CoronaMessage onResize={this.props.onResize} />
-					<OldIEMessage />
-				</div>
+							<Nav
+								handleScrim={this.handleScrim}
+								skipLinkId={this.props.skipLinkId}
+								service={this.props.service}
+								isExpanded={this.state.isExpanded}
+								accountsLinks={
+									this.state.accountsData && this.state.accountsData.links
+								}
+								onNavigating={this.props.onNavigating}
+								additionalSubMenuItems={this.props.additionalSubMenuItems}
+							/>
+						</header>
+						<CoronaMessage onResize={this.props.onResize} />
+						<OldIEMessage />
+					</div>
+				</>
 			)
 		);
 	}
diff --git a/src/Header/Header.module.scss b/src/Header/Header.module.scss
index c14901d8..f5c85387 100644
--- a/src/Header/Header.module.scss
+++ b/src/Header/Header.module.scss
@@ -1,5 +1,14 @@
 @import 'header-settings';
 
+.scrim {
+  background: rgba(0, 0, 0, 40%);
+  display: block;
+  height: 100vh;
+  left: 0;
+  position: absolute;
+  width: 100vw;
+}
+
 .header {
   background: $nds-colour-nice-white;
   border-bottom: rem($nds-spacing-xx-small) solid $nds-colour-nice-teal;
diff --git a/src/Header/Nav/Nav.jsx b/src/Header/Nav/Nav.jsx
index 4d22c396..5249a30a 100644
--- a/src/Header/Nav/Nav.jsx
+++ b/src/Header/Nav/Nav.jsx
@@ -134,6 +134,7 @@ export default class Nav extends Component {
 				<nav className={styles.nav} aria-label="primary navigation">
 					<div className={styles.menuWrapper}>
 						<NavLinks
+							handleScrim={this.props.handleScrim}
 							skipLinkId={this.props.skipLinkId}
 							servicesToDisplay={servicesToDisplay}
 							currentService={this.props.service}
@@ -179,6 +180,7 @@ Nav.propTypes = {
 	accountsLinks: PropTypes.object,
 	onNavigating: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 	additionalSubMenuItems: PropTypes.arrayOf(PropTypes.object),
+	handleScrim: PropTypes.func,
 };
 
 Nav.defaultProps = {
diff --git a/src/Header/Nav/NavLinks/NavLinks.jsx b/src/Header/Nav/NavLinks/NavLinks.jsx
index ba9c623f..f7308690 100644
--- a/src/Header/Nav/NavLinks/NavLinks.jsx
+++ b/src/Header/Nav/NavLinks/NavLinks.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 import PropTypes from "prop-types";
 import useEventListener from "@use-it/event-listener";
@@ -20,11 +20,20 @@ export function NavLinks({
 	subLinks,
 	onNavigating,
 	skipLinkId,
+	handleScrim,
 }) {
 	const [idOfOpenDropdown, setidOfOpenDropdown] = useState(null);
 
 	const ESCAPE_KEYS = ["27", "Escape"];
 
+	useEffect(() => {
+		if (idOfOpenDropdown === null) {
+			handleScrim(false);
+		} else {
+			handleScrim(true);
+		}
+	}, [idOfOpenDropdown]);
+
 	function handleNavButtonClick(id) {
 		setidOfOpenDropdown(id === idOfOpenDropdown ? null : id);
 		// TODO: Track dropdown opening
@@ -33,6 +42,7 @@ export function NavLinks({
 	function handleNavLinkClick(e) {
 		e.preventDefault();
 		setidOfOpenDropdown(null);
+
 		const href = e.currentTarget.getAttribute("href");
 		trackEvent(
 			defaultEventCategory,
@@ -143,6 +153,7 @@ NavLinks.propTypes = {
 	currentService: PropTypes.string,
 	subLinks: PropTypes.array,
 	onNavigating: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+	handleScrim: PropTypes.func,
 };
 
 export default NavLinks;

From 78cbc725f6d8454be8a1d34ca073693aa796025e Mon Sep 17 00:00:00 2001
From: Eleanor Mollett <eleanor.mollett@gmail.com>
Date: Tue, 14 Sep 2021 10:50:20 +0100
Subject: [PATCH 2/7] GN-101 Move focus to search when clicked

---
 src/Header/Nav/NavLinks/NavLinks.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Header/Nav/NavLinks/NavLinks.jsx b/src/Header/Nav/NavLinks/NavLinks.jsx
index 695c4042..a6a3872e 100644
--- a/src/Header/Nav/NavLinks/NavLinks.jsx
+++ b/src/Header/Nav/NavLinks/NavLinks.jsx
@@ -23,6 +23,9 @@ export function NavLinks({
 	skipLinkId,
 }) {
 	const [idOfOpenDropdown, setidOfOpenDropdown] = useState(null);
+	const [focusTrapActive, setFocusTrapActive] = useState(
+		idOfOpenDropdown !== null
+	);
 
 	const ESCAPE_KEYS = ["27", "Escape"];
 
@@ -73,7 +76,7 @@ export function NavLinks({
 	};
 
 	return (
-		<FocusTrap active={idOfOpenDropdown !== null} focusTrapOptions={options}>
+		<FocusTrap active={focusTrapActive} focusTrapOptions={options}>
 			<ul className={styles.menuList} aria-labelledby="header-menu-button">
 				{servicesToDisplay.map(
 					(

From c9a36441c3020cd18e53c40c318805d32ce628a8 Mon Sep 17 00:00:00 2001
From: Eleanor Mollett <eleanor.mollett@gmail.com>
Date: Tue, 14 Sep 2021 13:55:06 +0100
Subject: [PATCH 3/7] GN-101 Close MyAccount Dropdown on meganav click

---
 src/Header/Account/Account.jsx       | 16 ++++++++++++++++
 src/Header/Nav/NavLinks/NavLinks.jsx |  7 +++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/Header/Account/Account.jsx b/src/Header/Account/Account.jsx
index 6f06af06..070a4ecc 100644
--- a/src/Header/Account/Account.jsx
+++ b/src/Header/Account/Account.jsx
@@ -28,6 +28,7 @@ export default class Account extends Component {
 			this.handleMyAccountButtonClick.bind(this);
 		this.handleKeyDown = this.handleKeyDown.bind(this);
 		this.handleMenuItemClick = this.handleMenuItemClick.bind(this);
+		this.handleMegaMenuClick = this.handleMegaMenuClick.bind(this);
 	}
 
 	handleMyAccountButtonClick(e) {
@@ -56,6 +57,19 @@ export default class Account extends Component {
 		}
 	}
 
+	handleMegaMenuClick(event) {
+		let megaMenu = document.querySelector("#header-menu");
+
+		if (megaMenu.contains(event.target)) {
+			console.log("HERE!");
+			event.preventDefault();
+			this.setState({
+				isExpanded: false,
+			});
+			megaMenu.focus();
+		}
+	}
+
 	handleMenuItemClick(e) {
 		const href = e.currentTarget.getAttribute("href");
 
@@ -133,6 +147,8 @@ export default class Account extends Component {
 					}.bind(this)
 				);
 		}
+
+		document.addEventListener("click", this.handleMegaMenuClick);
 	}
 
 	render() {
diff --git a/src/Header/Nav/NavLinks/NavLinks.jsx b/src/Header/Nav/NavLinks/NavLinks.jsx
index a6a3872e..4118e933 100644
--- a/src/Header/Nav/NavLinks/NavLinks.jsx
+++ b/src/Header/Nav/NavLinks/NavLinks.jsx
@@ -118,9 +118,12 @@ export function NavLinks({
 									>
 										<span aria-label={abbreviation && title}>{text}</span>{" "}
 										{id === idOfOpenDropdown ? (
-											<ChevronUp className={styles.icon} />
+											<ChevronUp className={styles.icon} pointerEvents="none" />
 										) : (
-											<ChevronDown className={styles.icon} />
+											<ChevronDown
+												className={styles.icon}
+												pointerEvents="none"
+											/>
 										)}
 									</button>
 								) : (

From f3442d7bd628e1c5041edcd1af1c6eec553aed9a Mon Sep 17 00:00:00 2001
From: Eleanor Mollett <eleanor.mollett@gmail.com>
Date: Tue, 14 Sep 2021 14:25:30 +0100
Subject: [PATCH 4/7] GN-101 Close MyAccount Dropdown on meganav click

---
 src/Header/Account/Account.jsx       | 15 +++++++++++++++
 src/Header/Nav/NavLinks/NavLinks.jsx |  7 +++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/Header/Account/Account.jsx b/src/Header/Account/Account.jsx
index 6f06af06..860d8fee 100644
--- a/src/Header/Account/Account.jsx
+++ b/src/Header/Account/Account.jsx
@@ -28,6 +28,7 @@ export default class Account extends Component {
 			this.handleMyAccountButtonClick.bind(this);
 		this.handleKeyDown = this.handleKeyDown.bind(this);
 		this.handleMenuItemClick = this.handleMenuItemClick.bind(this);
+		this.handleMegaMenuClick = this.handleMegaMenuClick.bind(this);
 	}
 
 	handleMyAccountButtonClick(e) {
@@ -56,6 +57,18 @@ export default class Account extends Component {
 		}
 	}
 
+	handleMegaMenuClick(event) {
+		let megaMenu = document.querySelector("#header-menu");
+
+		if (megaMenu.contains(event.target)) {
+			event.preventDefault();
+			this.setState({
+				isExpanded: false,
+			});
+			megaMenu.focus();
+		}
+	}
+
 	handleMenuItemClick(e) {
 		const href = e.currentTarget.getAttribute("href");
 
@@ -133,6 +146,8 @@ export default class Account extends Component {
 					}.bind(this)
 				);
 		}
+
+		document.addEventListener("click", this.handleMegaMenuClick);
 	}
 
 	render() {
diff --git a/src/Header/Nav/NavLinks/NavLinks.jsx b/src/Header/Nav/NavLinks/NavLinks.jsx
index a6a3872e..4118e933 100644
--- a/src/Header/Nav/NavLinks/NavLinks.jsx
+++ b/src/Header/Nav/NavLinks/NavLinks.jsx
@@ -118,9 +118,12 @@ export function NavLinks({
 									>
 										<span aria-label={abbreviation && title}>{text}</span>{" "}
 										{id === idOfOpenDropdown ? (
-											<ChevronUp className={styles.icon} />
+											<ChevronUp className={styles.icon} pointerEvents="none" />
 										) : (
-											<ChevronDown className={styles.icon} />
+											<ChevronDown
+												className={styles.icon}
+												pointerEvents="none"
+											/>
 										)}
 									</button>
 								) : (

From 7a21c08ee2f72798fd6e59690d36ec60098a536d Mon Sep 17 00:00:00 2001
From: Eleanor Mollett <eleanor.mollett@gmail.com>
Date: Thu, 16 Sep 2021 09:38:59 +0100
Subject: [PATCH 5/7] GN-95 Now click scrim to close

---
 src/Header/Header.jsx                |  2 +-
 src/Header/Header.module.scss        | 19 ++++++++++---------
 src/Header/Nav/NavLinks/NavLinks.jsx |  7 ++++---
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/Header/Header.jsx b/src/Header/Header.jsx
index c27e5247..3f1a6c4d 100644
--- a/src/Header/Header.jsx
+++ b/src/Header/Header.jsx
@@ -90,7 +90,7 @@ export class Header extends Component {
 			this.props.enabled !== false && (
 				<>
 					{this.state.scrimIsActive && (
-						<span className={styles.scrim} aria-hidden="true" />
+						<span id="scrim" className={styles.scrim} aria-hidden="true" />
 					)}
 					<div className={styles.header}>
 						<header aria-label="Site header">
diff --git a/src/Header/Header.module.scss b/src/Header/Header.module.scss
index f5c85387..51637142 100644
--- a/src/Header/Header.module.scss
+++ b/src/Header/Header.module.scss
@@ -1,14 +1,5 @@
 @import 'header-settings';
 
-.scrim {
-  background: rgba(0, 0, 0, 40%);
-  display: block;
-  height: 100vh;
-  left: 0;
-  position: absolute;
-  width: 100vw;
-}
-
 .header {
   background: $nds-colour-nice-white;
   border-bottom: rem($nds-spacing-xx-small) solid $nds-colour-nice-teal;
@@ -142,6 +133,16 @@
     margin-right: rem($nds-spacing-large);
   }
 
+  .scrim {
+    background: rgba(0, 0, 0, 70%);
+    display: block;
+    height: 100vh;
+    left: 0;
+    margin-top: rem($search-height) + rem($nds-spacing-large);
+    position: absolute;
+    width: 100vw;
+  }
+
   .wrapper {
     justify-content: flex-end;
   }
diff --git a/src/Header/Nav/NavLinks/NavLinks.jsx b/src/Header/Nav/NavLinks/NavLinks.jsx
index f7308690..e887a84a 100644
--- a/src/Header/Nav/NavLinks/NavLinks.jsx
+++ b/src/Header/Nav/NavLinks/NavLinks.jsx
@@ -59,12 +59,13 @@ export function NavLinks({
 		if (ESCAPE_KEYS.includes(String(key))) setidOfOpenDropdown(null);
 	}
 
-	function clickOutsideNav() {
-		setidOfOpenDropdown(null);
+	function clickOutsideNav(event) {
+		if (event.target === document.querySelector("#scrim"))
+			setidOfOpenDropdown(null);
 	}
 
 	useEventListener("keydown", escapeDropdown);
-	useEventListener("click", clickOutsideNav, document.querySelector("main"));
+	useEventListener("click", clickOutsideNav);
 
 	return (
 		<ul className={styles.menuList} aria-labelledby="header-menu-button">

From 789363584743c0aef968bfbad97cb84350404cd0 Mon Sep 17 00:00:00 2001
From: Eleanor Mollett <eleanor.mollett@gmail.com>
Date: Fri, 17 Sep 2021 10:56:45 +0100
Subject: [PATCH 6/7] GN-101 Fix list styling variation

---
 .../Nav/Dropdown/Components/Components.module.scss       | 9 +++++++++
 src/Header/Nav/Dropdown/Components/Guidance.jsx          | 5 +++--
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 src/Header/Nav/Dropdown/Components/Components.module.scss

diff --git a/src/Header/Nav/Dropdown/Components/Components.module.scss b/src/Header/Nav/Dropdown/Components/Components.module.scss
new file mode 100644
index 00000000..1873c1e6
--- /dev/null
+++ b/src/Header/Nav/Dropdown/Components/Components.module.scss
@@ -0,0 +1,9 @@
+@import '~@nice-digital/nds-core/scss/core';
+
+.listUnstyled {
+  @include nds-list;
+  list-style: none !important;
+  margin-left: 0;
+  max-width: none; // To override max-width of 66ch set on lists
+  padding: 0;
+}
diff --git a/src/Header/Nav/Dropdown/Components/Guidance.jsx b/src/Header/Nav/Dropdown/Components/Guidance.jsx
index 04027184..e8126737 100644
--- a/src/Header/Nav/Dropdown/Components/Guidance.jsx
+++ b/src/Header/Nav/Dropdown/Components/Guidance.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Button } from "@nice-digital/nds-button";
 import { Grid, GridItem } from "@nice-digital/nds-grid";
+import styles from "./Components.module.scss";
 
 export function Guidance() {
 	return (
@@ -19,7 +20,7 @@ export function Guidance() {
 				<GridItem cols={12} md={6}>
 					<h3>Most visited guidance topics</h3>
 					<p>Guidance grouped by subject, most visited by other people:</p>
-					<ul className="list list--unstyled" style={{ columnCount: 2 }}>
+					<ul className={styles.listUnstyled} style={{ columnCount: 2 }}>
 						<li>
 							<a href="/">Diabetes</a>
 						</li>
@@ -49,7 +50,7 @@ export function Guidance() {
 				<GridItem cols={12} md={6}>
 					<h3>COVID-19</h3>
 					<p>Latest COVID-19 guidance:</p>
-					<ul className="list list--unstyled">
+					<ul className={styles.listUnstyled}>
 						<li>
 							<a href="/">
 								COVID-19 rapid guideline: vaccine-induced immune

From 13e51aa43bfeee4fe98d9684e6a83caa43d321c7 Mon Sep 17 00:00:00 2001
From: Eleanor Mollett <eleanor.mollett@gmail.com>
Date: Tue, 21 Sep 2021 16:17:40 +0100
Subject: [PATCH 7/7] GN-101 Code review fixes

Co-authored-by: w@rren <w@rren.dev>
---
 src/Header/Account/Account.jsx       |  1 +
 src/Header/Header.jsx                | 15 +++++++-------
 src/Header/Nav/NavLinks/NavLinks.jsx | 30 +++++++++++-----------------
 3 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/src/Header/Account/Account.jsx b/src/Header/Account/Account.jsx
index 860d8fee..192c37d7 100644
--- a/src/Header/Account/Account.jsx
+++ b/src/Header/Account/Account.jsx
@@ -57,6 +57,7 @@ export default class Account extends Component {
 		}
 	}
 
+	// NOTE: We would benefit from managing the state higher up
 	handleMegaMenuClick(event) {
 		let megaMenu = document.querySelector("#header-menu");
 
diff --git a/src/Header/Header.jsx b/src/Header/Header.jsx
index 3f1a6c4d..7dd3f10a 100644
--- a/src/Header/Header.jsx
+++ b/src/Header/Header.jsx
@@ -70,11 +70,7 @@ export class Header extends Component {
 	}
 
 	handleScrim(scrim) {
-		if (scrim === true) {
-			this.setState({ scrimIsActive: true });
-		} else {
-			this.setState({ scrimIsActive: false });
-		}
+		this.setState({ scrimIsActive: Boolean(scrim === true) });
 	}
 
 	handleLoginStatusChecked(accountsData) {
@@ -89,9 +85,12 @@ export class Header extends Component {
 		return (
 			this.props.enabled !== false && (
 				<>
-					{this.state.scrimIsActive && (
-						<span id="scrim" className={styles.scrim} aria-hidden="true" />
-					)}
+					<span
+						id="scrim"
+						className={this.state.scrimIsActive && styles.scrim}
+						aria-hidden="true"
+					/>
+
 					<div className={styles.header}>
 						<header aria-label="Site header">
 							<ul className={styles.a11yLinks} aria-label="Accessibility links">
diff --git a/src/Header/Nav/NavLinks/NavLinks.jsx b/src/Header/Nav/NavLinks/NavLinks.jsx
index 3000c123..679d2d5c 100644
--- a/src/Header/Nav/NavLinks/NavLinks.jsx
+++ b/src/Header/Nav/NavLinks/NavLinks.jsx
@@ -24,18 +24,12 @@ export function NavLinks({
 	handleScrim,
 }) {
 	const [idOfOpenDropdown, setidOfOpenDropdown] = useState(null);
-	const [focusTrapActive, setFocusTrapActive] = useState(
-		idOfOpenDropdown !== null
-	);
+	const [focusTrapActive] = useState(idOfOpenDropdown !== null);
 
 	const ESCAPE_KEYS = ["27", "Escape"];
 
 	useEffect(() => {
-		if (idOfOpenDropdown === null) {
-			handleScrim(false);
-		} else {
-			handleScrim(true);
-		}
+		handleScrim(Boolean(idOfOpenDropdown !== null));
 	}, [idOfOpenDropdown]);
 
 	function handleNavButtonClick(id) {
@@ -63,23 +57,23 @@ export function NavLinks({
 		if (ESCAPE_KEYS.includes(String(key))) setidOfOpenDropdown(null);
 	}
 
-	function clickOutsideNav(event) {
-		if (event.target === document.querySelector("#scrim"))
+	// NOTE: could the following be solved with context?
+	function clickOutsideNav(e) {
+		var thingYouClickedOn = e.target;
+		var areaToAvoid = document.getElementById("header-menu");
+		if (!areaToAvoid.contains(thingYouClickedOn)) {
 			setidOfOpenDropdown(null);
+		}
 	}
 
-	useEventListener("keydown", escapeDropdown);
-	useEventListener("click", clickOutsideNav);
-	useEventListener(
-		"click",
-		clickOutsideNav,
-		document.querySelector("#global-nav-search-form")
-	);
 	useEventListener(
 		"click",
 		clickOutsideNav,
-		document.querySelector("#my-account-button")
+		document.querySelector("#global-nav-header")
 	);
+	// ---------------
+
+	useEventListener("keydown", escapeDropdown);
 
 	const options = {
 		clickOutsideDeactivates: true,