@databiosphere/findable-ui 9.0.0 → 10.0.0

package/lib/components/common/Menu/hooks/useMenu.js

@@ -0,0 +1,33 @@
+import { useCallback, useMemo, useState } from "react";
+/**
+ * Menu functionality for menu dropdown, with menu position.
+ * @returns menu functionality.
+ */
+export const useMenu = () => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
+    // Closes menu.
+    const onClose = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    // Opens menu.
+    const onOpen = useCallback((event) => {
+        setAnchorEl(event.currentTarget);
+    }, []);
+    // Toggles menu open/close.
+    const onToggleOpen = useCallback((event) => {
+        if (open) {
+            setAnchorEl(null);
+        }
+        else {
+            setAnchorEl(event.currentTarget);
+        }
+    }, [open]);
+    return {
+        anchorEl,
+        onClose,
+        onOpen,
+        onToggleOpen,
+        open,
+    };
+};

package/lib/providers/authentication.js

@@ -22,7 +22,7 @@ export const AuthContext = createContext({
     authenticateUser: () => { },
     authenticationStatus: AUTHENTICATION_STATUS.INCOMPLETE,
     isAuthenticated: false,
-    isEnabled: true,
+    isEnabled: false,
     // eslint-disable-next-line @typescript-eslint/no-empty-function -- allow dummy function for default state.
     requestAuthentication: () => { },
     terraNIHProfileLoginStatus: LOGIN_STATUS_NOT_STARTED,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "9.0.0",
+  "version": "10.0.0",
   "description": "",
   "scripts": {
     "test": "jest",

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/components/ConnectTerraToNIHAccount/connectTerraToNIHAccount.tsx

@@ -19,7 +19,7 @@ export const ConnectTerraToNIHAccount = ({
 }: ConnectTerraToNIHAccountProps): JSX.Element | null => {
   const onGotoTutorial = (): void => {
     window.open(
-      "https://support.terra.bio/hc/en-us/articles/360038086332-Linking-authorization-accessing-controlled-data-on-external-servers",
+      "https://support.terra.bio/hc/en-us/articles/19124069598235-Access-controlled-data-files-by-linking-your-NIH-account-in-Terra",
       ANCHOR_TARGET.BLANK,
       REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
     );

package/src/components/Layout/components/Header/common/entities.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { BreakpointKey } from "../../../../../hooks/useBreakpointHelper";
 import { Social } from "../../../../common/Socials/socials";
 import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
 
@@ -8,12 +8,15 @@ export type Navigation = [
   NavLinkItem[] | undefined
 ]; // [LEFT, CENTER, RIGHT]
 
+export type SelectedMatch =
+  | SELECTED_MATCH
+  | Partial<Record<BreakpointKey, boolean | SELECTED_MATCH>>;
+
 export enum SELECTED_MATCH {
   EQUALS = "EQUALS",
   STARTS_WITH = "STARTS_WITH", // Default value.
 }
 
 export interface SocialMedia {
-  label: ReactNode;
   socials: Social[];
 }

package/src/components/Layout/components/Header/common/utils.ts

@@ -1,24 +1,45 @@
 import { Breakpoint } from "@mui/material";
+import { isClientSideNavigation } from "../../../../Links/common/utils";
 import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
-import { Navigation } from "./entities";
+import { Navigation, SelectedMatch, SELECTED_MATCH } from "./entities";
 
 /**
- * Returns the configured menu navigation links, for the current breakpoint.
+ * Adds to the set of selected patterns, for the navigation link, at the current breakpoint.
+ * @param setOfPatterns - Set of selected patterns.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Breakpoint.
+ */
+function addSelectedPattern(
+  setOfPatterns: Set<string>,
+  navLinkItem: NavLinkItem,
+  breakpoint?: Breakpoint
+): void {
+  if (!navLinkItem.url) return;
+  // Exclude external links.
+  if (!isClientSideNavigation(navLinkItem.url)) return;
+  // Get the configured selected match for the current breakpoint.
+  const selectedMatch = getSelectedMatch(navLinkItem.selectedMatch, breakpoint);
+  if (!selectedMatch) return;
+  // Add the selected pattern for the navigation link.
+  if (selectedMatch === SELECTED_MATCH.EQUALS) {
+    setOfPatterns.add(getPatternEquals(navLinkItem.url));
+    return;
+  }
+  setOfPatterns.add(getPatternStartsWith(navLinkItem.url));
+}
+
+/**
+ * Returns the configured menu navigation links.
  * @param navigation - Navigation links.
- * @param breakpoint - Current breakpoint.
  * @returns navigation links.
  */
-export function getMenuNavigationLinks(
-  navigation?: Navigation,
-  breakpoint?: Breakpoint
-): NavLinkItem[] {
+export function getMenuNavigationLinks(navigation?: Navigation): NavLinkItem[] {
   if (!navigation) return [];
-  const navLinkItems = navigation.reduce((acc: NavLinkItem[], navLinkItems) => {
+  return navigation.reduce((acc: NavLinkItem[], navLinkItems) => {
     if (!navLinkItems) return acc;
     acc.push(...navLinkItems);
     return acc;
   }, []);
-  return getNavigationLinks(navLinkItems, breakpoint);
 }
 
 /**
@@ -32,16 +53,62 @@ export function getNavigationLinks(
   breakpoint?: Breakpoint
 ): NavLinkItem[] {
   if (!navigationLinks) return [];
-  return navigationLinks.reduce(
-    (acc: NavLinkItem[], navLinkItem: NavLinkItem) => {
+  return navigationLinks
+    .map((navigationLink) => mapSelectedMatches(navigationLink, breakpoint))
+    .reduce((acc: NavLinkItem[], navLinkItem: NavLinkItem) => {
       const processedNavLink = processNavLinkItem(navLinkItem, breakpoint);
       if (processedNavLink) {
         acc.push(...processedNavLink);
       }
       return acc;
-    },
-    []
-  );
+    }, []);
+}
+
+/**
+ * Returns the pattern for an exact match, for the given URL e.g. "^/about$".
+ * @param url - URL.
+ * @returns pattern for an exact match.
+ */
+function getPatternEquals(url: string): string {
+  return `^${url}$`;
+}
+
+/**
+ * Returns the pattern for a match that starts with the given URL e.g. "^/about".
+ * @param url - URL.
+ * @returns pattern for a match that starts with the given URL.
+ */
+function getPatternStartsWith(url: string): string {
+  return `^${url}`;
+}
+
+/**
+ * Returns the configured selected match.
+ * @param selectedMatch - Selected match.
+ * @param breakpoint - Breakpoint.
+ * @returns selected match.
+ */
+function getSelectedMatch(
+  selectedMatch?: SelectedMatch,
+  breakpoint?: Breakpoint
+): SELECTED_MATCH | undefined {
+  if (!selectedMatch) return SELECTED_MATCH.STARTS_WITH;
+  if (typeof selectedMatch === "string") return selectedMatch;
+  if (!breakpoint) return;
+  return getSelectMatchValue(selectedMatch[breakpoint]);
+}
+
+/**
+ * Returns the selected match value, for the current breakpoint.
+ * @param selectedMatchValue - Selected match value.
+ * @returns selected match.
+ */
+function getSelectMatchValue(
+  selectedMatchValue?: boolean | SELECTED_MATCH
+): SELECTED_MATCH | undefined {
+  if (selectedMatchValue === false) return undefined;
+  if (selectedMatchValue === true) return SELECTED_MATCH.STARTS_WITH;
+  return selectedMatchValue || SELECTED_MATCH.STARTS_WITH;
 }
 
 /**
@@ -74,6 +141,32 @@ function isLinkVisible(
   return navLinkItem.visible[breakpoint] !== false;
 }
 
+/**
+ * Returns the navigation link with the selected matches, for the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Breakpoint.
+ * @returns navigation link with the selected matches.
+ */
+function mapSelectedMatches(
+  navLinkItem: NavLinkItem,
+  breakpoint?: Breakpoint
+): NavLinkItem {
+  const setOfPatterns = new Set<string>();
+  // Add selected pattern for the current navigation link.
+  addSelectedPattern(setOfPatterns, navLinkItem, breakpoint);
+  const cloneLink = { ...navLinkItem };
+  if (cloneLink.menuItems) {
+    cloneLink.menuItems = [...cloneLink.menuItems].map((menuItem) =>
+      mapSelectedMatches(menuItem, breakpoint)
+    );
+    for (const { selectedPatterns = [] } of cloneLink.menuItems) {
+      selectedPatterns.forEach((pattern) => setOfPatterns.add(pattern));
+    }
+  }
+  cloneLink.selectedPatterns = [...setOfPatterns];
+  return cloneLink;
+}
+
 /**
  * Returns the processed navigation link item.
  * Flattens menu items, and removes items that are not visible for the current breakpoint.

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/menu.tsx

@@ -26,7 +26,7 @@ export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
     ref
   ): JSX.Element | null {
     const { navigation, slogan, socialMedia } = headerProps;
-    const { breakpoint, smDown } = useBreakpoint();
+    const { smDown } = useBreakpoint();
 
     // Set drawer open state to false on change of media breakpoint from small desktop "md" and up.
     useEffect(() => {
@@ -61,7 +61,7 @@ export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
             <Navigation
               closeAncestor={closeMenu}
               headerProps={headerProps}
-              links={getMenuNavigationLinks(navigation, breakpoint)}
+              links={getMenuNavigationLinks(navigation)}
               pathname={pathname}
             />
             {socialMedia && (

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/common/utils.ts

@@ -1,6 +1,18 @@
 import { ReadonlyURLSearchParams } from "next/navigation";
 import { SEARCH_PARAMETERS } from "./constants";
 
+/**
+ * Return a new URLSearchParams object.
+ * @param searchParams - Search params.
+ * @returns new URLSearchParams object.
+ */
+function getNewURLSearchParams(
+  searchParams: ReadonlyURLSearchParams | null
+): URLSearchParams {
+  if (!searchParams) return new URLSearchParams();
+  return new URLSearchParams(searchParams.toString());
+}
+
 /**
  * Return the search params, for the given search string.
  * @param searchParams - Current search params.
@@ -8,10 +20,10 @@ import { SEARCH_PARAMETERS } from "./constants";
  * @returns updated search params.
  */
 export function getSearchParams(
-  searchParams: ReadonlyURLSearchParams,
+  searchParams: ReadonlyURLSearchParams | null,
   searchStr: string
 ): URLSearchParams {
-  const params = new URLSearchParams(searchParams.toString());
+  const params = getNewURLSearchParams(searchParams);
   params.set(SEARCH_PARAMETERS.QUERY, searchStr);
   return params;
 }

package/src/components/Layout/components/Header/components/Content/components/Navigation/common/utils.ts

@@ -1,27 +1,19 @@
-import { SELECTED_MATCH } from "../../../../../common/entities";
-
 /**
  * Returns true if the navigation link is selected.
- * @param url - The URL of the navigation link.
+ * The pathname is matched against the selected patterns.
  * @param pathname - The current pathname.
- * @param selectedMatch - The selected match type.
+ * @param selectedPatterns - Selected match patterns.
  * @returns true if the navigation link is selected.
  */
 export function isNavigationLinkSelected(
-  url: string,
   pathname?: string,
-  selectedMatch: SELECTED_MATCH = SELECTED_MATCH.STARTS_WITH
+  selectedPatterns?: string[]
 ): boolean {
   if (!pathname) return false;
-  if (isSelectedMatchEqual(selectedMatch)) return url === pathname;
-  return pathname.startsWith(url);
-}
-
-/**
- * Returns true if the selected match type is "EQUAL".
- * @param selectedMatch - The selected match type.
- * @returns True if the selected match type is "EQUAL".
- */
-export function isSelectedMatchEqual(selectedMatch: SELECTED_MATCH): boolean {
-  return selectedMatch === SELECTED_MATCH.EQUALS;
+  for (const selectedPattern of selectedPatterns ?? []) {
+    if (new RegExp(selectedPattern).test(pathname)) {
+      return true;
+    }
+  }
+  return false;
 }

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.tsx

@@ -1,7 +1,8 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, useCallback } from "react";
 import { Button } from "../../../../../../../../../common/Button/button";
 import { BackArrowIcon } from "../../../../../../../../../common/CustomIcon/components/BackArrowIcon/backArrowIcon";
+import { useDialog } from "../../../../../../../../../common/Dialog/hooks/useDialog";
 import { HeaderProps } from "../../../../../../header";
 import { AppBar } from "../../../../../../header.styles";
 import { DrawerNavigation as Navigation } from "../../../Actions/components/Menu/components/Content/components/Navigation/navigation.styles";
@@ -17,6 +18,7 @@ import {
 export interface NavigationDrawerProps {
   closeAncestor?: () => void;
   headerProps?: HeaderProps;
+  isSelected?: boolean;
   menuItems: MenuItem[];
   menuLabel: ReactNode;
   pathname?: string;
@@ -25,27 +27,22 @@ export interface NavigationDrawerProps {
 export const NavigationDrawer = ({
   closeAncestor,
   headerProps,
+  isSelected = false,
   menuItems,
   menuLabel,
   pathname,
 }: NavigationDrawerProps): JSX.Element => {
-  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
-  const openDrawer = (): void => {
-    setDrawerOpen(true);
-  };
-  const closeDrawer = (): void => {
-    setDrawerOpen(false);
-  };
-  const closeDrawers = (): void => {
-    setDrawerOpen(false);
+  const { onClose, onOpen, open } = useDialog();
+  const closeDrawers = useCallback((): void => {
+    onClose();
     closeAncestor?.();
-  };
+  }, [closeAncestor, onClose]);
   return (
     <>
       <Button
         EndIcon={ArrowDropDownRoundedIcon}
-        onClick={openDrawer}
-        variant="nav"
+        onClick={onOpen}
+        variant={isSelected ? "activeNav" : "nav"}
       >
         {menuLabel}
       </Button>
@@ -55,7 +52,7 @@ export const NavigationDrawer = ({
         hideBackdrop
         keepMounted={false}
         onClose={closeDrawers}
-        open={drawerOpen}
+        open={open}
         PaperProps={{ elevation: 0 }}
         TransitionComponent={Slide}
         transitionDuration={300}
@@ -66,7 +63,7 @@ export const NavigationDrawer = ({
         <Content>
           <BackButton
             fullWidth
-            onClick={closeDrawer}
+            onClick={onClose}
             StartIcon={BackArrowIcon}
             variant="backNav"
           >

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.tsx

@@ -2,7 +2,7 @@ import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
 import { MenuProps as MMenuProps } from "@mui/material";
 import React, { Fragment, ReactNode } from "react";
 import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
-import { useMenuWithPosition } from "../../../../../../../../../../hooks/useMenuWithPosition";
+import { useMenu } from "../../../../../../../../../common/Menu/hooks/useMenu";
 import { NavigationButtonLabel } from "../NavigationButtonLabel/navigationButtonLabel";
 import {
   MenuItem,
@@ -15,6 +15,7 @@ export interface NavLinkMenuProps {
   anchorOrigin?: MMenuProps["anchorOrigin"];
   closeAncestor?: () => void;
   disablePortal?: boolean;
+  isSelected?: boolean;
   menuItems: MenuItem[];
   menuLabel: ReactNode;
   pathname?: string;
@@ -24,12 +25,13 @@ export const NavigationMenu = ({
   anchorOrigin = MENU_ANCHOR_ORIGIN_LEFT_BOTTOM,
   closeAncestor,
   disablePortal,
+  isSelected = false,
   menuItems,
   menuLabel,
   pathname,
 }: NavLinkMenuProps): JSX.Element => {
   const { mdUp } = useBreakpoint();
-  const { anchorEl, onClose, onToggleOpen, open } = useMenuWithPosition();
+  const { anchorEl, onClose, onToggleOpen, open } = useMenu();
   const MenuItem = disablePortal ? StyledMenuItem : Fragment;
   const menuItemProps = disablePortal ? { onMouseLeave: onClose } : {};
   return (
@@ -38,7 +40,7 @@ export const NavigationMenu = ({
         EndIcon={ArrowDropDownRoundedIcon}
         isActive={open}
         onClick={onToggleOpen}
-        variant="nav"
+        variant={isSelected ? "activeNav" : "nav"}
       >
         <NavigationButtonLabel label={menuLabel} />
       </Button>

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.tsx

@@ -49,7 +49,7 @@ export const NavigationMenuItems = ({
             icon,
             label,
             menuItems: nestedMenuItems,
-            selectedMatch,
+            selectedPatterns,
             target = ANCHOR_TARGET.SELF,
             url,
           },
@@ -79,11 +79,7 @@ export const NavigationMenuItems = ({
                         REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
                       );
                 }}
-                selected={isNavigationLinkSelected(
-                  url,
-                  pathname,
-                  selectedMatch
-                )}
+                selected={isNavigationLinkSelected(pathname, selectedPatterns)}
               >
                 {icon && <ListItemIcon>{icon}</ListItemIcon>}
                 <ListItemText

package/src/components/Layout/components/Header/components/Content/components/Navigation/navigation.tsx

@@ -8,7 +8,7 @@ import {
   REL_ATTRIBUTE,
 } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
-import { SELECTED_MATCH } from "../../../../common/entities";
+import { SelectedMatch } from "../../../../common/entities";
 import { HeaderProps } from "../../../../header";
 import { isNavigationLinkSelected } from "./common/utils";
 import { NavigationButtonLabel } from "./components/NavigationButtonLabel/navigationButtonLabel";
@@ -22,7 +22,8 @@ export interface NavLinkItem {
   flatten?: Partial<Record<BreakpointKey, boolean>>;
   label: ReactNode;
   menuItems?: MenuItem[];
-  selectedMatch?: SELECTED_MATCH;
+  selectedMatch?: SelectedMatch;
+  selectedPatterns?: string[];
   target?: ANCHOR_TARGET;
   url: string;
   visible?: Partial<Record<BreakpointKey, boolean>>;
@@ -59,7 +60,7 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
               divider,
               label,
               menuItems,
-              selectedMatch,
+              selectedPatterns,
               target = ANCHOR_TARGET.SELF,
               url,
             },
@@ -70,6 +71,10 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                 {mdUp ? (
                   <NavigationMenu
                     closeAncestor={closeAncestor}
+                    isSelected={isNavigationLinkSelected(
+                      pathname,
+                      selectedPatterns
+                    )}
                     menuItems={menuItems}
                     menuLabel={label}
                     pathname={pathname}
@@ -78,6 +83,10 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                   <NavigationDrawer
                     closeAncestor={closeAncestor}
                     headerProps={headerProps}
+                    isSelected={isNavigationLinkSelected(
+                      pathname,
+                      selectedPatterns
+                    )}
                     menuItems={menuItems}
                     menuLabel={label}
                     pathname={pathname}
@@ -100,7 +109,7 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                         );
                   }}
                   variant={
-                    isNavigationLinkSelected(url, pathname, selectedMatch)
+                    isNavigationLinkSelected(pathname, selectedPatterns)
                       ? "activeNav"
                       : "nav"
                   }

package/src/components/Layout/components/Header/header.stories.tsx

@@ -71,7 +71,6 @@ export const HeaderStory: Story = {
     searchEnabled: true,
     slogan: "Header Slogan",
     socialMedia: {
-      label: "Follow Us",
       socials: [
         {
           Icon: XIcon,

package/src/components/Layout/components/Header/header.tsx

@@ -2,15 +2,12 @@ import { Fade, Toolbar } from "@mui/material";
 import { usePathname } from "next/navigation";
 import React, { ReactNode } from "react";
 import { ComponentsConfig } from "../../../../config/entities";
-import { useBreakpoint } from "../../../../hooks/useBreakpoint";
-import { useMenu } from "../../../../hooks/useMenu";
 import {
   APP_BAR_PROPS,
   FADE_TRANSITION_PROPS,
   TOOLBAR_PROPS,
 } from "./common/constants";
 import { Navigation, SocialMedia } from "./common/entities";
-import { getNavigationLinks } from "./common/utils";
 import { Announcements } from "./components/Announcements/announcements";
 import { Actions } from "./components/Content/components/Actions/actions";
 import { Authentication } from "./components/Content/components/Actions/components/Authentication/authentication";
@@ -21,8 +18,10 @@ import { Slogan } from "./components/Content/components/Slogan/slogan";
 import { Divider } from "./components/Content/components/Slogan/slogan.styles";
 import { Socials } from "./components/Content/components/Socials/socials.styles";
 import { AppBar, Center, Left, Right } from "./header.styles";
+import { useHeaderNavigation } from "./hooks/useHeaderNavigation";
 import { useHeaderVisibility } from "./hooks/useHeaderVisibility";
 import { useMeasureHeader } from "./hooks/useMeasureHeader";
+import { useMenu } from "./hooks/useMenu";
 
 export interface HeaderProps {
   actions?: ReactNode;
@@ -38,8 +37,8 @@ export interface HeaderProps {
 }
 
 export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
-  const { breakpoint } = useBreakpoint();
-  const { isIn } = useHeaderVisibility(headerProps);
+  const { navigation } = useHeaderNavigation(headerProps);
+  const { isIn } = useHeaderVisibility({ ...headerProps, navigation });
   const { headerRef } = useMeasureHeader();
   const { onClose, onOpen, open } = useMenu();
   const pathname = usePathname() ?? "";
@@ -49,14 +48,16 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
     authenticationEnabled,
     className,
     logo,
-    navigation: [navItemsL, navItemsC, navItemsR] = [],
     searchEnabled,
     searchURL,
     slogan,
     socialMedia,
   } = headerProps;
-  const navigationProps = { headerProps, pathname };
-
+  const [navItemsL, navItemsC, navItemsR] = navigation;
+  const navigationProps = {
+    headerProps: { ...headerProps, navigation },
+    pathname,
+  };
   return (
     <AppBar {...APP_BAR_PROPS} ref={headerRef} className={className}>
       {/* Announcements */}
@@ -74,10 +75,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
             {isIn.isSloganIn && <Slogan slogan={slogan} />}
             {/* Left navigation */}
             {isIn.isLeftNavigationIn && (
-              <DXNavigation
-                {...navigationProps}
-                links={getNavigationLinks(navItemsL, breakpoint)}
-              />
+              <DXNavigation {...navigationProps} links={navItemsL} />
             )}
           </Left>
         </Fade>
@@ -86,10 +84,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
           <Center>
             {/* Center navigation */}
             {isIn.isCenterNavigationIn && (
-              <DXNavigation
-                {...navigationProps}
-                links={getNavigationLinks(navItemsC, breakpoint)}
-              />
+              <DXNavigation {...navigationProps} links={navItemsC} />
             )}
           </Center>
         </Fade>
@@ -98,10 +93,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
           <Right>
             {/* Navigation */}
             {isIn.isRightNavigationIn && (
-              <DXNavigation
-                {...navigationProps}
-                links={getNavigationLinks(navItemsR)}
-              />
+              <DXNavigation {...navigationProps} links={navItemsR} />
             )}
             {/* Socials */}
             {isIn.isSocialsIn && (

package/src/components/Layout/components/Header/hooks/useHeaderNavigation.ts

@@ -0,0 +1,19 @@
+import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
+import { getNavigationLinks } from "../common/utils";
+import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
+import { HeaderProps } from "../header";
+
+export interface UseHeaderNavigation {
+  navigation: [NavLinkItem[], NavLinkItem[], NavLinkItem[]];
+}
+
+export const useHeaderNavigation = (
+  headerProps: HeaderProps
+): UseHeaderNavigation => {
+  const { breakpoint } = useBreakpoint();
+  const { navigation: [navL, navC, navR] = [] } = headerProps;
+  const navItemsL = getNavigationLinks(navL, breakpoint);
+  const navItemsC = getNavigationLinks(navC, breakpoint);
+  const navItemsR = getNavigationLinks(navR, breakpoint);
+  return { navigation: [navItemsL, navItemsC, navItemsR] };
+};

package/src/components/Layout/components/Header/hooks/useHeaderVisibility.ts

@@ -38,9 +38,9 @@ export const useHeaderVisibility = (
   const hasActions = Boolean(actions);
   const hasLogo = Boolean(logo);
   const hasMenu = !mdUp;
-  const hasNavItemsC = Boolean(navItemsC);
-  const hasNavItemsL = Boolean(navItemsL);
-  const hasNavItemsR = Boolean(navItemsR);
+  const hasNavItemsC = Boolean(navItemsC && navItemsC.length > 0);
+  const hasNavItemsL = Boolean(navItemsL && navItemsL.length > 0);
+  const hasNavItemsR = Boolean(navItemsR && navItemsR.length > 0);
   const hasSlogan = Boolean(slogan);
   const hasSocials = Boolean(socialMedia);
   // Determines header content visibility.