From b8238d91dc5e46ffcda33e9e00e787d694906dd4 Mon Sep 17 00:00:00 2001
From: Joel Thiessen <444632+joelclimbsthings@users.noreply.github.com>
Date: Thu, 12 Nov 2020 09:10:42 -0800
Subject: [PATCH] Adding wrapper class around navigation to implement scroll
 styles/logic (https://github.com/woocommerce/woocommerce-admin/pull/5570)

---
 .../navigation/components/container/index.js  | 155 ++++++++++--------
 .../client/navigation/style.scss              |   5 +-
 2 files changed, 87 insertions(+), 73 deletions(-)

diff --git a/plugins/woocommerce-admin/client/navigation/components/container/index.js b/plugins/woocommerce-admin/client/navigation/components/container/index.js
index 63f7b3ffb5b..2db9feb9bf9 100644
--- a/plugins/woocommerce-admin/client/navigation/components/container/index.js
+++ b/plugins/woocommerce-admin/client/navigation/components/container/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useMemo, useState } from '@wordpress/element';
+import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import {
 	__experimentalNavigation as Navigation,
@@ -85,82 +85,93 @@ const Container = ( { menuItems } ) => {
 		[ menuItems ]
 	);
 
+	const navDomRef = useRef( null );
+
 	return (
 		<div className="woocommerce-navigation">
 			<Header />
-			<Navigation
-				activeItem={ activeItem ? activeItem.id : null }
-				activeMenu={ activeLevel }
-				onActivateMenu={ ( ...args ) => {
-					const navDomRef = document.querySelector(
-						'.components-navigation'
-					);
+			<div className="woocommerce-navigation__wrapper" ref={ navDomRef }>
+				<Navigation
+					activeItem={ activeItem ? activeItem.id : null }
+					activeMenu={ activeLevel }
+					onActivateMenu={ ( ...args ) => {
+						if ( navDomRef && navDomRef.current ) {
+							navDomRef.current.scrollTop = 0;
+						}
 
-					if ( navDomRef ) {
-						navDomRef.scrollTop = 0;
-					}
-
-					setActiveLevel( ...args );
-				} }
-			>
-				{ activeLevel === 'woocommerce' && dashboardUrl && (
-					<NavigationBackButton
-						className="woocommerce-navigation__back-to-dashboard"
-						href={ dashboardUrl }
-						backButtonLabel={ __(
-							'WordPress Dashboard',
-							'woocommerce-navigation'
-						) }
-					></NavigationBackButton>
-				) }
-				{ categories.map( ( category ) => {
-					const [
-						primaryItems,
-						secondaryItems,
-						pluginItems,
-					] = categorizedItems[ category.id ] || [ [], [], [] ];
-					return (
-						<NavigationMenu
-							key={ category.id }
-							title={ category.title }
-							menu={ category.id }
-							parentMenu={ category.parent }
-							backButtonLabel={ category.backButtonLabel || null }
-						>
-							{ !! primaryItems.length && (
-								<NavigationGroup>
-									{ primaryItems.map( ( item ) => (
-										<Item key={ item.id } item={ item } />
-									) ) }
-								</NavigationGroup>
+						setActiveLevel( ...args );
+					} }
+				>
+					{ activeLevel === 'woocommerce' && dashboardUrl && (
+						<NavigationBackButton
+							className="woocommerce-navigation__back-to-dashboard"
+							href={ dashboardUrl }
+							backButtonLabel={ __(
+								'WordPress Dashboard',
+								'woocommerce-navigation'
 							) }
-							{ !! pluginItems.length && (
-								<NavigationGroup
-									title={
-										category.id === 'woocommerce'
-											? __(
-													'Extensions',
-													'woocommerce-admin'
-											  )
-											: null
-									}
-								>
-									{ pluginItems.map( ( item ) => (
-										<Item key={ item.id } item={ item } />
-									) ) }
-								</NavigationGroup>
-							) }
-							{ !! secondaryItems.length && (
-								<NavigationGroup>
-									{ secondaryItems.map( ( item ) => (
-										<Item key={ item.id } item={ item } />
-									) ) }
-								</NavigationGroup>
-							) }
-						</NavigationMenu>
-					);
-				} ) }
-			</Navigation>
+						></NavigationBackButton>
+					) }
+					{ categories.map( ( category ) => {
+						const [
+							primaryItems,
+							secondaryItems,
+							pluginItems,
+						] = categorizedItems[ category.id ] || [ [], [], [] ];
+						return (
+							<NavigationMenu
+								key={ category.id }
+								title={ category.title }
+								menu={ category.id }
+								parentMenu={ category.parent }
+								backButtonLabel={
+									category.backButtonLabel || null
+								}
+							>
+								{ !! primaryItems.length && (
+									<NavigationGroup>
+										{ primaryItems.map( ( item ) => (
+											<Item
+												key={ item.id }
+												item={ item }
+											/>
+										) ) }
+									</NavigationGroup>
+								) }
+								{ !! pluginItems.length && (
+									<NavigationGroup
+										title={
+											category.id === 'woocommerce'
+												? __(
+														'Extensions',
+														'woocommerce-admin'
+												  )
+												: null
+										}
+									>
+										{ pluginItems.map( ( item ) => (
+											<Item
+												key={ item.id }
+												item={ item }
+											/>
+										) ) }
+									</NavigationGroup>
+								) }
+								{ !! secondaryItems.length && (
+									<NavigationGroup>
+										{ secondaryItems.map( ( item ) => (
+											<Item
+												key={ item.id }
+												item={ item }
+											/>
+										) ) }
+									</NavigationGroup>
+								) }
+							</NavigationMenu>
+						);
+					} ) }
+				</Navigation>
+			</div>
 		</div>
 	);
 };
diff --git a/plugins/woocommerce-admin/client/navigation/style.scss b/plugins/woocommerce-admin/client/navigation/style.scss
index c2ef2c427bd..9b24e949d18 100644
--- a/plugins/woocommerce-admin/client/navigation/style.scss
+++ b/plugins/woocommerce-admin/client/navigation/style.scss
@@ -22,9 +22,12 @@
 		z-index: 1100; //Must be greater than z-index on .woocommerce-layout__header
 	}
 
-	.components-navigation {
+	.woocommerce-navigation__wrapper {
 		overflow-y: auto;
 		height: calc(100vh - #{$header-height});
+	}
+
+	.components-navigation {
 		box-sizing: border-box;
 	}