refactor: Use shared dropdown panel in nav (#2553)

* chore: Install react-components

* refactor: Get the shared dropdown in the nav

Soon to come: Placing the shared dropdown panel in NavigationHeaderDropdownMenu's modal

* refactor: Fit the panel inside the dropdown

- Restore original dropdown usage with new props
- Add support for the product panel as a separate dropdown
- Adjust types/type imports

* chore: Spacing formatting for package-lock.json

* chore: CSS fixes

- Replace mobile menu with panel
- Hack in fixes for mobile
- Fix width on tablet/desktop

* chore: Update canary

* chore: CSS tweaks

* chore: Pass in the data

* chore: Update canary

* chore: Add to desktop

* feat: Add side panel content via updated canary

* chore: Update to latest stable

* upgrade package and breakpoints

* remove home page tutorials link

* add web-mktg-logos dependency

* chore: Update padding to only target the auth menu on generic pages

* chore: Address feedback link padding

* update breakpoints

* refactor: Update canary/reorder items

* chore: Use latest stable panel

* chore: Revert override change

* feat: Support className in MobileAuthenticationControls

* chore: Tweak bottom margin of auth controls

* update MobileAuthControls type

* package upgrade and small padding change

* chore: Use latest @hashicorp/react-components

* update react-components package and adjust product data

* chore: Update package to latest canary

* feat: Close dropdown with Esc

* chore: Change navbarlist child root to NavigationMenu.List

* fix: onEscKeyDown behavior

* chore: Revert mobile menu breakpoint changes/update canary

Move panel to the left to avoid issues with cutoff instead of changing the breakpoint

* chore: Update canary

* chore: Update panel to latest stable

* fix: absolute positioning with hardcoded `left`

* chore: Explicit padding on mobileMenuAuthContainer

Co-authored-by: Heat Hamilton <[email protected]>

* chore: Remove web-mktg-logos dep

* chore: fix package-lock and specific next version for @hashicorp/react-components (#2566)

Update package-lock and include specific next version for react-components

---------

Co-authored-by: Leah Bush <[email protected]>
Co-authored-by: Leah Bush <[email protected]>
Co-authored-by: Heat Hamilton <[email protected]>

package.json

@@ -107,6 +107,7 @@
 		"@hashicorp/react-alert-banner": "^7.1.0",
 		"@hashicorp/react-button": "^6.3.1",
 		"@hashicorp/react-code-block": "^6.7.0",
+		"@hashicorp/react-components": "^1.1.10",
 		"@hashicorp/react-consent-manager": "^9.3.0",
 		"@hashicorp/react-content": "^8.3.0",
 		"@hashicorp/react-design-system-components": "0.0.0-nightly.05f1ad1",
@@ -211,7 +212,10 @@
 	"overrides": {
 		"next": "$next",
 		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
+		"react-dom": "^18.2.0",
+		"@hashicorp/react-components": {
+			"next": "^14.2.1"
+		}
 	},
 	"nextBundleAnalysis": {
 		"budget": null,

src/components/command-bar/components/dialog/command-bar-dialog.module.css

@@ -153,6 +153,9 @@
 	min-height: 52px;
 	padding: 16px;
 
+	/* Accounts for extra feedback link padding */
+	padding-left: 24px;
+
 	@media (--dev-dot-mobile) {
 		justify-content: flex-end;
 	}
@@ -173,3 +176,7 @@
 	display: flex;
 	gap: 4px;
 }
+
+.feedbackLink {
+	padding: 8px;
+}

src/components/command-bar/components/dialog/footer.tsx

@@ -50,6 +50,7 @@ const CommandBarDialogFooter = () => {
 			</div>
 			<div>
 				<StandaloneLink
+					className={s.feedbackLink}
 					color="secondary"
 					href={FEEDBACK_FORM_URL}
 					icon={<IconExternalLink16 />}

src/components/mobile-menu-container/index.tsx

@@ -4,7 +4,7 @@
  */
 
 // Third-party imports
-import { ForwardedRef, forwardRef } from 'react'
+import { ForwardedRef, forwardRef, HTMLAttributes } from 'react'
 import classNames from 'classnames'
 import { m, useReducedMotion } from 'framer-motion'
 import { useRouter } from 'next/router'
@@ -19,7 +19,7 @@ import ButtonLink from 'components/button-link'
 
 // Local imports
 import { ThemeSwitcherWithLabel } from 'components/theme-switcher'
-import { MobileMenuContainerProps } from './types'
+import type { MobileMenuContainerProps } from './types'
 import { MobileUserDisclosure } from './components'
 import s from './mobile-menu-container.module.css'
 
@@ -41,7 +41,10 @@ const MOBILE_MENU_MOTION = {
  * Handles rendering the Sign In and Sign Up UI elements in mobile viewports.
  * Intended to be used alongside `MobileMenuContainer`.
  */
-const MobileAuthenticationControls = () => {
+
+const MobileAuthenticationControls = ({
+	className,
+}: HTMLAttributes<HTMLDivElement>) => {
 	const { asPath } = useRouter()
 	const { isAuthenticated, isLoading, signIn, signOut, user } =
 		useAuthentication()
@@ -87,7 +90,8 @@ const MobileAuthenticationControls = () => {
 		<div
 			className={classNames(
 				'g-show-with-mobile-menu',
-				s.mobileAuthenticationControlsWrap
+				s.mobileAuthenticationControlsWrap,
+				className
 			)}
 		>
 			{content}

src/components/mobile-menu-levels-generic/index.tsx

@@ -3,13 +3,14 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-// Library
-import { generateTopLevelSubNavItems } from 'lib/generate-top-level-sub-nav-items'
 // Components
 import MobileMenuContainer, {
 	MobileAuthenticationControls,
 } from 'components/mobile-menu-container'
-import { SidebarNavMenuItem } from 'components/sidebar/components'
+import ProductPanel from '@hashicorp/react-components/src/components/nav-panel/product-panel'
+import * as NavigationMenu from '@radix-ui/react-navigation-menu'
+// Data
+import { mobileNavigationData, navPromo, sidePanelContent } from 'lib/products'
 // Styles
 import s from './mobile-menu-levels-generic.module.css'
 
@@ -27,14 +28,15 @@ import s from './mobile-menu-levels-generic.module.css'
 function MobileMenuLevelsGeneric() {
 	return (
 		<MobileMenuContainer className={s.mobileMenuContainer}>
-			<MobileAuthenticationControls />
-			<ul className={s.mobileMenuNavList}>
-				<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} />
-				))}
-			</ul>
+			<MobileAuthenticationControls className={s.mobileMenuAuthContainer} />
+
+			<NavigationMenu.Root className={s.mobileMenuNavList}>
+				<ProductPanel
+					productCategories={mobileNavigationData}
+					promo={navPromo}
+					sidePanel={sidePanelContent}
+				/>
+			</NavigationMenu.Root>
 		</MobileMenuContainer>
 	)
 }

src/components/mobile-menu-levels-generic/mobile-menu-levels-generic.module.css

@@ -4,10 +4,14 @@
  */
 
 .mobileMenuContainer {
-	padding: 24px;
 	z-index: 4;
 }
 
+.mobileMenuAuthContainer {
+	padding: 16px 16px 0 16px;
+	margin-bottom: 0;
+}
+
 .mobileMenuNavList {
 	list-style: none;
 	margin: 0;

src/components/navigation-header/components/dropdown-menu/dropdown-menu.module.css

@@ -63,9 +63,13 @@
 	border-bottom-left-radius: 6px;
 	border-bottom-right-radius: 6px;
 	box-shadow: var(--token-elevation-higher-box-shadow);
-	min-width: 252px;
-	padding: 16px;
+	min-width: max-content;
 	position: absolute;
+	left: -216px;
+}
+
+.dropdownContainerInner {
+	padding: 16px;
 }
 
 .itemGroupDivider {