From 05ff87c596787fcb825d1d2e6b2ac84602a59890 Mon Sep 17 00:00:00 2001
From: Noel Quiles <3746694+EnMod@users.noreply.github.com>
Date: Fri, 13 Sep 2024 16:19:35 -0400
Subject: [PATCH] refactor: Add new dropdown to non-generic pages (#2568)

* refactor: Add product panel to tutorials pages

- Move `left` alignment of dropdowns exclusively into desktop dropdown pane
- Add `NavBarListContainer` to tutorials dropdown wrapping to satisfy Radix

* chore: More-reasonable wrapping setup

* chore: Change menu on tutorials library

* Revert "chore: Change menu on tutorials library"

This reverts commit 393b6258f111dc842f020f92c52a39d307a04ed0.

* fix: add left padding on product pages

* Reapply "chore: Change menu on tutorials library"

This reverts commit 46a6c5d9c26c481da2792079c437783462ce3739.

* fix: Padding on mobile for sidebars

* add mobile menu to profile page

* add product panel to products pages main menu

* fix: Sticky auth controls on sidebar-sidecar layout

* fix padding

* fix: Restore resources in product sidebars

* fix padding and margin

* fix desktop padding

* chore(SidebarNavList): Use NativeDivElement type for props

Co-authored-by: Heat Hamilton <55773810+heatlikeheatwave@users.noreply.github.com>

* fix: Mobile menu cutoff

* fix: Only apply that height change on mobile

* chore: Use inline JSX.IntrinsicElements['div'] type over explicit className type

---------

Co-authored-by: Leah Bush <leah.bush@hashicorp.com>
Co-authored-by: Heat Hamilton <55773810+heatlikeheatwave@users.noreply.github.com>
---
 .../mobile-menu-container.module.css          |  1 +
 .../dropdown-menu/dropdown-menu.module.css    |  1 -
 .../home-page-content.module.css              |  4 +++
 .../components/home-page-content/index.tsx    |  1 +
 .../components/product-page-content/index.tsx | 23 ++++++++----
 .../product-page-content.module.css           |  5 ---
 .../sidebar-mobile-controls.module.css        |  5 +++
 .../components/sidebar-nav-list/index.tsx     | 10 ++++--
 src/components/sidebar/index.tsx              | 34 ++++++++++++++++--
 src/components/sidebar/sidebar.module.css     |  4 +++
 src/layouts/sidebar-sidecar/index.tsx         | 21 +++++++++--
 .../sidebar-sidecar-layout.module.css         | 21 ++++++++---
 src/pages/tutorials/library.tsx               | 24 +++++++------
 src/views/profile/sidebar/index.tsx           | 36 ++++++++++---------
 14 files changed, 141 insertions(+), 49 deletions(-)

diff --git a/src/components/mobile-menu-container/mobile-menu-container.module.css b/src/components/mobile-menu-container/mobile-menu-container.module.css
index 4cce5ff3ca..cd1cda97b9 100644
--- a/src/components/mobile-menu-container/mobile-menu-container.module.css
+++ b/src/components/mobile-menu-container/mobile-menu-container.module.css
@@ -24,6 +24,7 @@
 	z-index: 2;
 	@media (--dev-dot-show-mobile-menu) {
 		top: auto;
+		height: calc(100% - var(--sticky-bars-height));
 	}
 	@media (--dev-dot-hide-mobile-menu) {
 		top: var(--sticky-bars-height);
diff --git a/src/components/navigation-header/components/dropdown-menu/dropdown-menu.module.css b/src/components/navigation-header/components/dropdown-menu/dropdown-menu.module.css
index 8d19ff49b8..2ad48faf30 100644
--- a/src/components/navigation-header/components/dropdown-menu/dropdown-menu.module.css
+++ b/src/components/navigation-header/components/dropdown-menu/dropdown-menu.module.css
@@ -65,7 +65,6 @@
 	box-shadow: var(--token-elevation-higher-box-shadow);
 	min-width: max-content;
 	position: absolute;
-	left: -216px;
 }
 
 .dropdownContainerInner {
diff --git a/src/components/navigation-header/components/home-page-content/home-page-content.module.css b/src/components/navigation-header/components/home-page-content/home-page-content.module.css
index e466e2ac21..421c42a14b 100644
--- a/src/components/navigation-header/components/home-page-content/home-page-content.module.css
+++ b/src/components/navigation-header/components/home-page-content/home-page-content.module.css
@@ -29,3 +29,7 @@
 		}
 	}
 }
+
+.homepageDropdownPane {
+	left: -216px;
+}
diff --git a/src/components/navigation-header/components/home-page-content/index.tsx b/src/components/navigation-header/components/home-page-content/index.tsx
index 3843c0844a..907806e793 100644
--- a/src/components/navigation-header/components/home-page-content/index.tsx
+++ b/src/components/navigation-header/components/home-page-content/index.tsx
@@ -25,6 +25,7 @@ const HomePageHeaderContent = () => {
 			<NavBarListContainer>
 				<li>
 					<NavigationHeaderDropdownMenu
+						dropdownClassName={s.homepageDropdownPane}
 						productPanelData={{
 							navigationData,
 							navPromo,
diff --git a/src/components/navigation-header/components/product-page-content/index.tsx b/src/components/navigation-header/components/product-page-content/index.tsx
index 59f13da8cb..d79ef52322 100644
--- a/src/components/navigation-header/components/product-page-content/index.tsx
+++ b/src/components/navigation-header/components/product-page-content/index.tsx
@@ -8,6 +8,7 @@ import { IconHashicorp24 } from '@hashicorp/flight-icons/svg-react/hashicorp-24'
 
 // Global imports
 import { useCurrentProduct } from 'contexts'
+import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 
 // Local imports
 import {
@@ -18,6 +19,7 @@ import {
 } from '..'
 import { ProductIconTextLink } from './components'
 import { getNavItems, getProductsDropdownItems, NavItem } from './utils'
+import { navigationData, navPromo, sidePanelContent } from 'lib/products'
 import s from './product-page-content.module.css'
 
 const ProductPageHeaderContent = () => {
@@ -28,14 +30,21 @@ const ProductPageHeaderContent = () => {
 	return (
 		<>
 			<div className={s.productsDropdown}>
-				<NavigationHeaderDropdownMenu
-					ariaLabel="Main menu"
-					buttonClassName={s.productsDropdownButton}
-					dropdownClassName={s.productsDropdownPane}
-					itemGroups={allProductsItems}
-					leadingIcon={<IconHashicorp24 className={s.productsDropdownIcon} />}
-				/>
+				<NavigationMenu.Root className={s.mobileMenuNavList}>
+					<NavigationHeaderDropdownMenu
+						ariaLabel="Main menu"
+						buttonClassName={s.productsDropdownButton}
+						itemGroups={allProductsItems}
+						leadingIcon={<IconHashicorp24 className={s.productsDropdownIcon} />}
+						productPanelData={{
+							navigationData,
+							navPromo,
+							sidePanelContent,
+						}}
+					/>
+				</NavigationMenu.Root>
 			</div>
+
 			<div className={s.productLinkAndNav}>
 				<ProductIconTextLink
 					name={currentProduct.name}
diff --git a/src/components/navigation-header/components/product-page-content/product-page-content.module.css b/src/components/navigation-header/components/product-page-content/product-page-content.module.css
index 960e2da89b..2c2d67a904 100644
--- a/src/components/navigation-header/components/product-page-content/product-page-content.module.css
+++ b/src/components/navigation-header/components/product-page-content/product-page-content.module.css
@@ -26,11 +26,6 @@
 	padding-top: 2px;
 }
 
-.productsDropdownPane {
-	border-bottom-left-radius: 0;
-	left: calc(-1 * var(--header-padding-left-right));
-}
-
 /*
  * Set up the product logo-ish icon lockup next to product nav items.
  */
diff --git a/src/components/sidebar/components/sidebar-mobile-controls/sidebar-mobile-controls.module.css b/src/components/sidebar/components/sidebar-mobile-controls/sidebar-mobile-controls.module.css
index 3321a131cf..8836957e2d 100644
--- a/src/components/sidebar/components/sidebar-mobile-controls/sidebar-mobile-controls.module.css
+++ b/src/components/sidebar/components/sidebar-mobile-controls/sidebar-mobile-controls.module.css
@@ -8,10 +8,15 @@
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: 12px;
+
+	&.rightAlign {
+		margin-bottom: 0;
+	}
 }
 
 .rightAlign {
 	justify-content: flex-end;
+	padding-right: 16px;
 }
 
 .levelUpButton {
diff --git a/src/components/sidebar/components/sidebar-nav-list/index.tsx b/src/components/sidebar/components/sidebar-nav-list/index.tsx
index 1db59d55b8..0002c6d254 100644
--- a/src/components/sidebar/components/sidebar-nav-list/index.tsx
+++ b/src/components/sidebar/components/sidebar-nav-list/index.tsx
@@ -4,8 +4,14 @@
  */
 
 import { ReactNode } from 'react'
+import classNames from 'classnames'
 import s from '../../sidebar.module.css'
 
-export default function SidebarNavList({ children }: { children: ReactNode }) {
-	return <ul className={s.navList}>{children}</ul>
+type NativeDivElement = JSX.IntrinsicElements['div']
+
+export default function SidebarNavList({
+	className,
+	children,
+}: NativeDivElement & { children: ReactNode }) {
+	return <ul className={classNames(s.navList, className)}>{children}</ul>
 }
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index 696aa4d1b0..5bb2ef3752 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -6,6 +6,8 @@
 // Third-party imports
 import { ReactElement, useMemo, useState } from 'react'
 import classNames from 'classnames'
+import * as NavigationMenu from '@radix-ui/react-navigation-menu'
+import ProductPanel from '@hashicorp/react-components/src/components/nav-panel/product-panel'
 
 // Global imports
 import { SIDEBAR_LABEL_ID, SIDEBAR_NAV_ELEMENT_ID } from 'constants/element-ids'
@@ -19,6 +21,7 @@ import {
 	SidebarNavMenuItem,
 	SidebarTitleHeading,
 } from 'components/sidebar/components'
+import { mobileNavigationData, navPromo, sidePanelContent } from 'lib/products'
 
 // Local imports
 import { FilteredNavItem, MenuItem, SidebarProps } from './types'
@@ -45,7 +48,8 @@ const Sidebar = ({
 	visuallyHideTitle = false,
 	isInstallPage,
 	showResourcesList = true,
-}: SidebarProps): ReactElement => {
+	className,
+}: SidebarProps & JSX.IntrinsicElements['div']) => {
 	const currentProduct = useCurrentProduct()
 	const { shouldRenderMobileControls } = useSidebarNavData()
 	const currentPath = useCurrentPath({ excludeHash: true, excludeSearch: true })
@@ -54,6 +58,7 @@ const Sidebar = ({
 		() => addNavItemMetaData(currentPath, menuItems),
 		[currentPath, menuItems]
 	)
+	const isProductPanel = shouldRenderMobileControls && title === 'Main Menu'
 
 	let backToElement
 	if (shouldRenderMobileControls && levelButtonProps) {
@@ -131,6 +136,27 @@ const Sidebar = ({
 				showFilterInput={false}
 			/>
 		)
+	} else if (isProductPanel) {
+		sidebarContent = (
+			<>
+				<NavigationMenu.Root>
+					<ProductPanel
+						productCategories={mobileNavigationData}
+						promo={navPromo}
+						sidePanel={sidePanelContent}
+					/>
+				</NavigationMenu.Root>
+				{showResourcesList && (
+					<SidebarNavList className={s.mainMenuResources}>
+						{navResourceItems.map((item, index) => (
+							// eslint-disable-next-line react/no-array-index-key
+							<SidebarNavMenuItem item={item} key={index} />
+						))}
+					</SidebarNavList>
+				)}
+			</>
+		)
+		visuallyHideTitle = true
 	} else {
 		sidebarContent = (
 			<>
@@ -145,7 +171,11 @@ const Sidebar = ({
 		)
 	}
 	return (
-		<div className={s.sidebar}>
+		<div
+			className={classNames(className, {
+				[s.sidebar]: !isProductPanel,
+			})}
+		>
 			{backToElement}
 			{sidebarFilterInput}
 			<nav
diff --git a/src/components/sidebar/sidebar.module.css b/src/components/sidebar/sidebar.module.css
index 839e31064a..8f937544a4 100644
--- a/src/components/sidebar/sidebar.module.css
+++ b/src/components/sidebar/sidebar.module.css
@@ -30,6 +30,10 @@
 	padding: 0;
 }
 
+.mainMenuResources {
+	padding: 0 12px;
+}
+
 /*
 ***
 * The values set in the following classes are specific so that Sidebar content
diff --git a/src/layouts/sidebar-sidecar/index.tsx b/src/layouts/sidebar-sidecar/index.tsx
index 5d45f7764f..e904da0d6c 100644
--- a/src/layouts/sidebar-sidecar/index.tsx
+++ b/src/layouts/sidebar-sidecar/index.tsx
@@ -93,12 +93,29 @@ const SidebarSidecarLayoutContent = ({
 		sidebarContent = <Sidebar {...sidebarProps} />
 	}
 
+	const shouldNotHaveSidePadding =
+		sidebarContent.props.title === 'Main Menu' ||
+		(AlternateSidebar && !sidebarProps?.menuItems)
+
 	return (
 		<div className={classNames(s.root, s[`mainWidth-${mainWidth}`])}>
 			<MobileMenuContainer className={s.sidebarContainer} ref={sidebarRef}>
 				<div className={s.sidebarContentWrapper}>
-					<MobileAuthenticationControls />
-					{sidebarContent}
+					<MobileAuthenticationControls
+						className={classNames(
+							s.mobileAuthControlsContainer,
+							s.sidePadding,
+							{ [s.noMargin]: AlternateSidebar && !sidebarProps?.menuItems }
+						)}
+					/>
+					<div
+						className={classNames({
+							[s.sidePadding]:
+								!shouldNotHaveSidePadding || !isMobileMenuRendered,
+						})}
+					>
+						{sidebarContent}
+					</div>
 				</div>
 			</MobileMenuContainer>
 			<div className={s.contentWrapper} ref={contentRef}>
diff --git a/src/layouts/sidebar-sidecar/sidebar-sidecar-layout.module.css b/src/layouts/sidebar-sidecar/sidebar-sidecar-layout.module.css
index 5ccce777c8..e68f0ffdcc 100644
--- a/src/layouts/sidebar-sidecar/sidebar-sidecar-layout.module.css
+++ b/src/layouts/sidebar-sidecar/sidebar-sidecar-layout.module.css
@@ -61,11 +61,19 @@ for further details.
 	flex-shrink: 1;
 	flex-grow: 1;
 	overflow-y: auto;
-	padding-bottom: 48px;
-	padding-left: 16px;
-	padding-right: 16px;
-	padding-top: 24px;
 	position: relative;
+
+	@media (--dev-dot-hide-mobile-menu) {
+		padding-top: 24px;
+	}
+}
+
+.mobileAuthControlsContainer {
+	padding-top: 24px;
+
+	&.noMargin {
+		margin-bottom: 0;
+	}
 }
 
 /**
@@ -191,3 +199,8 @@ for further details.
 .editOnGithubLink {
 	margin-top: 64px;
 }
+
+.sidePadding {
+	padding-left: 16px;
+	padding-right: 16px;
+}
diff --git a/src/pages/tutorials/library.tsx b/src/pages/tutorials/library.tsx
index d3ea4c7e5a..747bdcb1df 100644
--- a/src/pages/tutorials/library.tsx
+++ b/src/pages/tutorials/library.tsx
@@ -7,6 +7,8 @@ import algoliasearch from 'algoliasearch/lite'
 import { InstantSearch } from 'react-instantsearch'
 import { history } from 'instantsearch.js/es/lib/routers'
 import { useRouter } from 'next/router'
+import ProductPanel from '@hashicorp/react-components/src/components/nav-panel/product-panel'
+import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 
 import SidebarSidecarLayout, {
 	SidebarSidecarLayoutProps,
@@ -19,8 +21,11 @@ import {
 	searchStateToRouteState,
 } from 'views/tutorial-library/utils/router-state'
 import SidebarNavList from 'components/sidebar/components/sidebar-nav-list'
-import { SidebarNavMenuItem } from 'components/sidebar/components'
-import { generateTopLevelSubNavItems } from 'lib/generate-top-level-sub-nav-items'
+import {
+	mobileNavigationData as productPanelMobileNavigationData,
+	navPromo as productPanelNavPromo,
+	sidePanelContent as productPanelSidePanelContent,
+} from 'lib/products'
 import { getTutorials } from 'lib/learn-client/api/tutorial'
 import { Tutorial } from 'lib/learn-client/types'
 import { stripUndefinedProperties } from 'lib/strip-undefined-props'
@@ -55,14 +60,13 @@ function TutorialLibrarySidebar() {
 			</div>
 			<div className="g-show-with-mobile-menu">
 				<SidebarNavList>
-					{/* copied from: src/layouts/base-new/index.tsx */}
-					<SidebarNavMenuItem item={{ heading: 'Main Menu' }} />
-					{generateTopLevelSubNavItems().map(
-						(item: $TSFixMe, index: number) => (
-							// eslint-disable-next-line react/no-array-index-key
-							<SidebarNavMenuItem item={item} key={index} />
-						)
-					)}
+					<NavigationMenu.Root>
+						<ProductPanel
+							productCategories={productPanelMobileNavigationData}
+							promo={productPanelNavPromo}
+							sidePanel={productPanelSidePanelContent}
+						/>
+					</NavigationMenu.Root>
 				</SidebarNavList>
 			</div>
 		</>
diff --git a/src/views/profile/sidebar/index.tsx b/src/views/profile/sidebar/index.tsx
index f4e5e063e8..f11c4f7e1e 100644
--- a/src/views/profile/sidebar/index.tsx
+++ b/src/views/profile/sidebar/index.tsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { generateTopLevelSubNavItems } from 'lib/generate-top-level-sub-nav-items'
 import { SidebarNavMenuItem } from 'components/sidebar/components'
 import Sidebar from 'components/sidebar'
 import { IconSignOut16 } from '@hashicorp/flight-icons/svg-react/sign-out-16'
@@ -11,16 +10,17 @@ import { IconUser16 } from '@hashicorp/flight-icons/svg-react/user-16'
 import { IconBookmark16 } from '@hashicorp/flight-icons/svg-react/bookmark-16'
 import { SidebarNavMenuButton } from 'components/sidebar/components/sidebar-nav-menu-item'
 import useAuthentication from 'hooks/use-authentication'
-import { useDeviceSize } from 'contexts'
 import SidebarNavList from 'components/sidebar/components/sidebar-nav-list'
 import { useRouter } from 'next/router'
+import ProductPanel from '@hashicorp/react-components/src/components/nav-panel/product-panel'
+import { mobileNavigationData, navPromo, sidePanelContent } from 'lib/products'
+import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 
 /**
  * shared left side bar for /profile pages
  */
 export function ProfileSidebar() {
 	const { signOut } = useAuthentication()
-	const { isDesktop } = useDeviceSize()
 	const { asPath } = useRouter()
 
 	const isActive = (path: string) => {
@@ -28,12 +28,13 @@ export function ProfileSidebar() {
 	}
 
 	return (
-		<Sidebar
-			title={isDesktop ? 'Profile' : 'Main Menu'}
-			showFilterInput={false}
-		>
-			<SidebarNavList>
-				{isDesktop ? (
+		<>
+			<Sidebar
+				title="Profile"
+				showFilterInput={false}
+				className="g-hide-with-mobile-menu"
+			>
+				<SidebarNavList>
 					<>
 						<SidebarNavMenuItem
 							item={{
@@ -61,12 +62,15 @@ export function ProfileSidebar() {
 							/>
 						</li>
 					</>
-				) : (
-					generateTopLevelSubNavItems().map((item, index) => (
-						<SidebarNavMenuItem item={item} key={index} />
-					))
-				)}
-			</SidebarNavList>
-		</Sidebar>
+				</SidebarNavList>
+			</Sidebar>
+			<NavigationMenu.Root className="g-show-with-mobile-menu">
+				<ProductPanel
+					productCategories={mobileNavigationData}
+					promo={navPromo}
+					sidePanel={sidePanelContent}
+				/>
+			</NavigationMenu.Root>
+		</>
 	)
 }