Navigation Menus: don't use DropdownButton (#5229)

Bump components Update ProductNavigation
LabKey · Feb 14, 2024 · 88d923e · 88d923e
1 parent 0f37197
commit 88d923e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/core/package-lock.json b/core/package-lock.json
diff --git a/core/package.json b/core/package.json
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@labkey/components": "3.20.0",
+    "@labkey/components": "3.21.0",
     "@labkey/themes": "1.3.3"
   },
   "devDependencies": {

diff --git a/core/src/client/ProductNavigation/ProductNavigation.tsx b/core/src/client/ProductNavigation/ProductNavigation.tsx
@@ -1,4 +1,4 @@
-import React, { FC, memo } from 'react';
+import React, { FC, memo, useRef } from 'react';
 import { ProductNavigationMenu } from '@labkey/components';
 
 import './productNavigation.scss';
@@ -12,8 +12,9 @@ interface Props {
 }
 
 export const ProductNavigation: FC<Props> = memo(props => {
+    const menuRef = useRef();
     if (props.context.show) {
-        return <ProductNavigationMenu disableLKSContainerLink />;
+        return <ProductNavigationMenu menuRef={menuRef} disableLKSContainerLink />;
     } else {
         return null;
     }

diff --git a/core/src/client/ProductNavigation/productNavigation.scss b/core/src/client/ProductNavigation/productNavigation.scss
@@ -2,10 +2,15 @@
 @import "../../../node_modules/@labkey/components/dist/assets/scss/theme/navbar";
 @import "../../../node_modules/@labkey/components/dist/assets/scss/theme/product-navigation";
 
-#headerProductDropdown .dropdown-menu-right {
-  padding: 0;
-
+#headerProductDropdown {
+  // We render the ProductNavigation within a bootstrap dropdown button in LKS, which makes the navbar-icon-connector
+  // a redundant element that we need to hide.
   .navbar-icon-connector {
-    right: 6px;
+    display: none;
+  }
+
+  .navbar-menu__content {
+    top: 0;
+    margin: 0;
   }
-}
+}