@databiosphere/findable-ui 8.0.0 → 8.0.2

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.d.ts

@@ -12,7 +12,7 @@ export declare const FilterLabel: import("@emotion/styled").StyledComponent<{
     size?: "large" | "medium" | "small" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "nav" | "text" | "outlined" | "contained" | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.styles.d.ts

@@ -12,7 +12,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     size?: "large" | "medium" | "small" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "nav" | "text" | "outlined" | "contained" | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Content/components/Navigation/navigation.styles.js

@@ -9,6 +9,7 @@ export const Navigation = styled(DXNavigation) `
   margin: 0;
   justify-content: flex-start;
 
+  .MuiButton-activeNav,
   .MuiButton-nav {
     ${textBodyLarge500};
     justify-content: space-between;
@@ -22,6 +23,7 @@ export const Navigation = styled(DXNavigation) `
 export const DrawerNavigation = styled(Navigation) `
   gap: 0;
 
+  .MuiButton-activeNav,
   .MuiButton-nav {
     ${textBody500};
     padding: 14px 24px;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/menu.d.ts

@@ -5,6 +5,7 @@ export interface MenuProps {
     headerProps: HeaderProps;
     open: boolean;
     openMenu: () => void;
+    pathname?: string;
     style?: CSSProperties;
 }
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/menu.js

@@ -9,7 +9,7 @@ import { Slogan } from "../../../Slogan/slogan";
 import { Navigation } from "./components/Content/components/Navigation/navigation.styles";
 import { Socials } from "./components/Content/components/Socials/socials.styles";
 import { Toolbar } from "./components/Toolbar/toolbar";
-export const Menu = forwardRef(function HeaderMenu({ closeMenu, headerProps, open, openMenu, style }, ref) {
+export const Menu = forwardRef(function HeaderMenu({ closeMenu, headerProps, open, openMenu, pathname, style }, ref) {
     const { navigation, slogan, socialMedia } = headerProps;
     const { breakpoint, smDown } = useBreakpoint();
     // Set drawer open state to false on change of media breakpoint from small desktop "md" and up.
@@ -28,6 +28,6 @@ export const Menu = forwardRef(function HeaderMenu({ closeMenu, headerProps, ope
                 React.createElement(Toolbar, { onClose: closeMenu, ...headerProps })),
             React.createElement(Content, null,
                 slogan && React.createElement(Slogan, { slogan: slogan }),
-                React.createElement(Navigation, { closeAncestor: closeMenu, headerProps: headerProps, links: getMenuNavigationLinks(navigation, breakpoint) }),
+                React.createElement(Navigation, { closeAncestor: closeMenu, headerProps: headerProps, links: getMenuNavigationLinks(navigation, breakpoint), pathname: pathname }),
                 socialMedia && (React.createElement(Socials, { buttonSize: "xlarge", socials: socialMedia.socials }))))));
 });

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.styles.d.ts

@@ -12,7 +12,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     size?: "large" | "medium" | "small" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "nav" | "text" | "outlined" | "contained" | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.d.ts

@@ -6,5 +6,6 @@ export interface NavigationDrawerProps {
     headerProps?: HeaderProps;
     menuItems: MenuItem[];
     menuLabel: ReactNode;
+    pathname?: string;
 }
-export declare const NavigationDrawer: ({ closeAncestor, headerProps, menuItems, menuLabel, }: NavigationDrawerProps) => JSX.Element;
+export declare const NavigationDrawer: ({ closeAncestor, headerProps, menuItems, menuLabel, pathname, }: NavigationDrawerProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.js

@@ -8,7 +8,7 @@ import { DrawerNavigation as Navigation } from "../../../Actions/components/Menu
 import { Toolbar } from "../../../Actions/components/Menu/components/Toolbar/toolbar";
 import { Slide } from "./components/Slide/slide";
 import { Button as BackButton, Content } from "./navigationDrawer.styles";
-export const NavigationDrawer = ({ closeAncestor, headerProps, menuItems, menuLabel, }) => {
+export const NavigationDrawer = ({ closeAncestor, headerProps, menuItems, menuLabel, pathname, }) => {
     const [drawerOpen, setDrawerOpen] = useState(false);
     const openDrawer = () => {
         setDrawerOpen(true);
@@ -27,5 +27,5 @@ export const NavigationDrawer = ({ closeAncestor, headerProps, menuItems, menuLa
                 React.createElement(Toolbar, { onClose: closeDrawers, ...headerProps })),
             React.createElement(Content, null,
                 React.createElement(BackButton, { fullWidth: true, onClick: closeDrawer, StartIcon: BackArrowIcon, variant: "nav" }, menuLabel),
-                React.createElement(Navigation, { closeAncestor: closeDrawers, headerProps: headerProps, links: menuItems })))));
+                React.createElement(Navigation, { closeAncestor: closeDrawers, headerProps: headerProps, links: menuItems, pathname: pathname })))));
 };

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.d.ts

@@ -6,5 +6,6 @@ export interface NavLinkMenuProps {
     closeAncestor?: () => void;
     menuItems: MenuItem[];
     menuLabel: ReactNode;
+    pathname?: string;
 }
-export declare const NavigationMenu: ({ anchorOrigin, closeAncestor, menuItems, menuLabel, }: NavLinkMenuProps) => JSX.Element;
+export declare const NavigationMenu: ({ anchorOrigin, closeAncestor, menuItems, menuLabel, pathname, }: NavLinkMenuProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.js

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
 import { NavigationMenuItems, } from "../NavigationMenuItems/navigationMenuItems";
 import { Button, Menu } from "./navigationMenu.styles";
-export const NavigationMenu = ({ anchorOrigin = { horizontal: "left", vertical: "bottom" }, closeAncestor, menuItems, menuLabel, }) => {
+export const NavigationMenu = ({ anchorOrigin = { horizontal: "left", vertical: "bottom" }, closeAncestor, menuItems, menuLabel, pathname, }) => {
     const { mdUp } = useBreakpoint();
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
@@ -20,5 +20,5 @@ export const NavigationMenu = ({ anchorOrigin = { horizontal: "left", vertical:
                 horizontal: "left",
                 vertical: "top",
             } },
-            React.createElement(NavigationMenuItems, { closeMenu: closeMenu, menuItems: menuItems }))));
+            React.createElement(NavigationMenuItems, { closeMenu: closeMenu, menuItems: menuItems, pathname: pathname }))));
 };

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.js

@@ -1,10 +1,11 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Menu as MMenu } from "@mui/material";
+import { inkLight, smokeLight, smokeMain, } from "../../../../../../../../../../styles/common/mixins/colors";
 import { Button as DXButton } from "../../../../../../../../../common/Button/button";
 export const Menu = styled(MMenu) `
   .MuiPaper-menu {
-    border-color: ${({ theme }) => theme.palette.smoke.main};
+    border-color: ${smokeMain};
     margin: 4px 0;
     max-width: 324px;
     min-width: 204px;
@@ -31,12 +32,17 @@ export const Menu = styled(MMenu) `
         }
 
         .MuiListItemText-secondary {
-          color: ${({ theme }) => theme.palette.ink.light};
+          color: ${inkLight};
           white-space: normal;
         }
       }
+
+      &.Mui-selected {
+        background-color: ${smokeLight};
+      }
     }
 
+    .MuiButton-activeNav,
     .MuiButton-nav {
       font-weight: 400;
       justify-content: space-between;
@@ -57,8 +63,8 @@ export const Button = styled(DXButton, {
     shouldForwardProp: (prop) => prop !== "isActive",
 }) `
   // Button is "active" i.e. menu is open.
-  ${({ isActive, theme }) => isActive &&
+  ${(props) => props.isActive &&
     css `
-      background-color: ${theme.palette.smoke.light};
+      background-color: ${smokeLight(props)};
     `};
 `;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.d.ts

@@ -7,5 +7,6 @@ export interface MenuItem extends NavLinkItem {
 export interface NavLinkMenuProps {
     closeMenu: () => void;
     menuItems: MenuItem[];
+    pathname?: string;
 }
-export declare const NavigationMenuItems: ({ closeMenu, menuItems, }: NavLinkMenuProps) => JSX.Element;
+export declare const NavigationMenuItems: ({ closeMenu, menuItems, pathname, }: NavLinkMenuProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.js

@@ -5,15 +5,15 @@ import { TEXT_BODY_400, TEXT_BODY_500, TEXT_BODY_SMALL_400_2_LINES, } from "../.
 import { ANCHOR_TARGET } from "../../../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../../../Links/common/utils";
 import { NavigationMenu } from "../NavigationMenu/navigationMenu";
-export const NavigationMenuItems = ({ closeMenu, menuItems, }) => {
+export const NavigationMenuItems = ({ closeMenu, menuItems, pathname, }) => {
     const router = useRouter();
-    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, target = ANCHOR_TARGET.SELF, url, }, i) => nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, anchorOrigin: { horizontal: "right", vertical: "top" }, closeAncestor: closeMenu, menuItems: nestedMenuItems, menuLabel: label })) : (React.createElement(Fragment, { key: i },
+    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, target = ANCHOR_TARGET.SELF, url, }, i) => nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, anchorOrigin: { horizontal: "right", vertical: "top" }, closeAncestor: closeMenu, menuItems: nestedMenuItems, menuLabel: label, pathname: pathname })) : (React.createElement(Fragment, { key: i },
         React.createElement(MMenuItem, { onClick: () => {
                 closeMenu();
                 isClientSideNavigation(url)
                     ? router.push(url)
                     : window.open(url, target, "noopener noreferrer");
-            } },
+            }, selected: url === pathname },
             icon && React.createElement(ListItemIcon, null, icon),
             React.createElement(ListItemText, { primary: label, primaryTypographyProps: {
                     variant: description ? TEXT_BODY_500 : TEXT_BODY_400,

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.d.ts

@@ -17,6 +17,7 @@ export interface NavigationProps {
     closeAncestor?: () => void;
     headerProps?: HeaderProps;
     links: NavLinkItem[];
+    pathname?: string;
     style?: CSSProperties;
 }
 export declare const Navigation: React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.js

@@ -7,17 +7,17 @@ import { isClientSideNavigation } from "../../../../../../../Links/common/utils"
 import { NavigationDrawer } from "./components/NavigationDrawer/navigationDrawer";
 import { NavigationMenu } from "./components/NavigationMenu/navigationMenu";
 import { Navigation as Links } from "./navigation.styles";
-export const Navigation = forwardRef(function Navigation({ className, closeAncestor, headerProps, links, style }, ref) {
+export const Navigation = forwardRef(function Navigation({ className, closeAncestor, headerProps, links, pathname, style, }, ref) {
     const { mdUp } = useBreakpoint();
     const router = useRouter();
     return (React.createElement(Links, { ref: ref, className: className, style: style }, links.map(({ divider, label, menuItems, target = ANCHOR_TARGET.SELF, url }, i) => menuItems ? (React.createElement(Fragment, { key: i },
-        mdUp ? (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, menuItems: menuItems, menuLabel: label })) : (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, menuItems: menuItems, menuLabel: label })),
+        mdUp ? (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, menuItems: menuItems, menuLabel: label, pathname: pathname })) : (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, menuItems: menuItems, menuLabel: label, pathname: pathname })),
         divider && React.createElement(Divider, null))) : (React.createElement(Fragment, { key: i },
         React.createElement(Button, { onClick: () => {
                 isClientSideNavigation(url)
                     ? router.push(url)
                     : window.open(url, target, "noopener noreferrer");
                 closeAncestor?.();
-            }, variant: "nav" }, label),
+            }, variant: url === pathname ? "activeNav" : "nav" }, label),
         divider && React.createElement(Divider, null))))));
 });

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.styles.js

@@ -13,6 +13,7 @@ export const Navigation = styled("div") `
     justify-content: inherit;
   }
 
+  .MuiButton-activeNav,
   .MuiButton-nav {
     ${textBody500};
     padding: 6px 12px;

package/lib/components/Layout/components/Header/header.js

@@ -1,4 +1,5 @@
 import { Fade, Toolbar } from "@mui/material";
+import { usePathname } from "next/navigation";
 import React from "react";
 import { useBreakpoint } from "../../../../hooks/useBreakpoint";
 import { useMenu } from "../../../../hooks/useMenu";
@@ -21,7 +22,9 @@ export const Header = ({ ...headerProps }) => {
     const { isIn } = useHeaderVisibility(headerProps);
     const { headerRef } = useMeasureHeader();
     const { onClose, onOpen, open } = useMenu();
+    const pathname = usePathname() ?? "";
     const { actions, announcements, authenticationEnabled, className, logo, navigation: [navItemsL, navItemsC, navItemsR] = [], searchEnabled, searchURL, slogan, socialMedia, } = headerProps;
+    const navigationProps = { headerProps, pathname };
     return (React.createElement(AppBar, { ...APP_BAR_PROPS, ref: headerRef, className: className },
         React.createElement(Announcements, { announcements: announcements }),
         React.createElement(Toolbar, { ...TOOLBAR_PROPS },
@@ -30,16 +33,16 @@ export const Header = ({ ...headerProps }) => {
                     logo,
                     isIn.isSloganIn && React.createElement(Divider, { flexItem: true, orientation: "vertical" }),
                     isIn.isSloganIn && React.createElement(Slogan, { slogan: slogan }),
-                    isIn.isLeftNavigationIn && (React.createElement(DXNavigation, { headerProps: headerProps, links: getNavigationLinks(navItemsL, breakpoint) })))),
+                    isIn.isLeftNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: getNavigationLinks(navItemsL, breakpoint) })))),
             React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isCenterGroupIn },
-                React.createElement(Center, null, isIn.isCenterNavigationIn && (React.createElement(DXNavigation, { headerProps: headerProps, links: getNavigationLinks(navItemsC, breakpoint) })))),
+                React.createElement(Center, null, isIn.isCenterNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: getNavigationLinks(navItemsC, breakpoint) })))),
             React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isRightGroupIn },
                 React.createElement(Right, null,
-                    isIn.isRightNavigationIn && (React.createElement(DXNavigation, { headerProps: headerProps, links: getNavigationLinks(navItemsR) })),
+                    isIn.isRightNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: getNavigationLinks(navItemsR) })),
                     isIn.isSocialsIn && (React.createElement(Socials, { buttonSize: "small", socials: socialMedia?.socials || [] })),
                     isIn.isActionsIn && (React.createElement(Actions, null,
                         React.createElement(Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
                         React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
                         actions,
-                        React.createElement(Menu, { closeMenu: onClose, headerProps: headerProps, open: open, openMenu: onOpen }))))))));
+                        React.createElement(Menu, { ...navigationProps, closeMenu: onClose, open: open, openMenu: onOpen }))))))));
 };

package/lib/theme/common/components.js

@@ -383,6 +383,23 @@ export const MuiButton = (theme) => {
             },
         },
         variants: [
+            {
+                props: {
+                    variant: "activeNav", // associated with "nav" variant.
+                },
+                style: {
+                    ...theme.typography[TEXT_BODY_500],
+                    backgroundColor: theme.palette.smoke.light,
+                    color: theme.palette.ink.main,
+                    minWidth: 0,
+                    textTransform: "capitalize",
+                    whiteSpace: "nowrap",
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    "&:hover": {
+                        backgroundColor: theme.palette.smoke.light,
+                    },
+                },
+            },
             {
                 props: {
                     variant: "nav",

package/package.json

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

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Content/components/Navigation/navigation.styles.ts

@@ -13,6 +13,7 @@ export const Navigation = styled(DXNavigation)`
   margin: 0;
   justify-content: flex-start;
 
+  .MuiButton-activeNav,
   .MuiButton-nav {
     ${textBodyLarge500};
     justify-content: space-between;
@@ -27,6 +28,7 @@ export const Navigation = styled(DXNavigation)`
 export const DrawerNavigation = styled(Navigation)`
   gap: 0;
 
+  .MuiButton-activeNav,
   .MuiButton-nav {
     ${textBody500};
     padding: 14px 24px;

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

@@ -16,12 +16,13 @@ export interface MenuProps {
   headerProps: HeaderProps;
   open: boolean;
   openMenu: () => void;
+  pathname?: string;
   style?: CSSProperties; // Required for Fade component. See https://mui.com/material-ui/transitions/#child-requirement.
 }
 
 export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
   function HeaderMenu(
-    { closeMenu, headerProps, open, openMenu, style }: MenuProps,
+    { closeMenu, headerProps, open, openMenu, pathname, style }: MenuProps,
     ref
   ): JSX.Element | null {
     const { navigation, slogan, socialMedia } = headerProps;
@@ -61,6 +62,7 @@ export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
               closeAncestor={closeMenu}
               headerProps={headerProps}
               links={getMenuNavigationLinks(navigation, breakpoint)}
+              pathname={pathname}
             />
             {socialMedia && (
               <Socials buttonSize="xlarge" socials={socialMedia.socials} />

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

@@ -16,6 +16,7 @@ export interface NavigationDrawerProps {
   headerProps?: HeaderProps;
   menuItems: MenuItem[];
   menuLabel: ReactNode;
+  pathname?: string;
 }
 
 export const NavigationDrawer = ({
@@ -23,6 +24,7 @@ export const NavigationDrawer = ({
   headerProps,
   menuItems,
   menuLabel,
+  pathname,
 }: NavigationDrawerProps): JSX.Element => {
   const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
   const openDrawer = (): void => {
@@ -71,6 +73,7 @@ export const NavigationDrawer = ({
             closeAncestor={closeDrawers}
             headerProps={headerProps}
             links={menuItems}
+            pathname={pathname}
           />
         </Content>
       </MDialog>

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.ts

@@ -1,6 +1,11 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Menu as MMenu } from "@mui/material";
+import {
+  inkLight,
+  smokeLight,
+  smokeMain,
+} from "../../../../../../../../../../styles/common/mixins/colors";
 import { Button as DXButton } from "../../../../../../../../../common/Button/button";
 
 interface Props {
@@ -9,7 +14,7 @@ interface Props {
 
 export const Menu = styled(MMenu)`
   .MuiPaper-menu {
-    border-color: ${({ theme }) => theme.palette.smoke.main};
+    border-color: ${smokeMain};
     margin: 4px 0;
     max-width: 324px;
     min-width: 204px;
@@ -36,12 +41,17 @@ export const Menu = styled(MMenu)`
         }
 
         .MuiListItemText-secondary {
-          color: ${({ theme }) => theme.palette.ink.light};
+          color: ${inkLight};
           white-space: normal;
         }
       }
+
+      &.Mui-selected {
+        background-color: ${smokeLight};
+      }
     }
 
+    .MuiButton-activeNav,
     .MuiButton-nav {
       font-weight: 400;
       justify-content: space-between;
@@ -63,9 +73,9 @@ export const Button = styled(DXButton, {
   shouldForwardProp: (prop) => prop !== "isActive",
 })<Props>`
   // Button is "active" i.e. menu is open.
-  ${({ isActive, theme }) =>
-    isActive &&
+  ${(props) =>
+    props.isActive &&
     css`
-      background-color: ${theme.palette.smoke.light};
+      background-color: ${smokeLight(props)};
     `};
 `;

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

@@ -13,6 +13,7 @@ export interface NavLinkMenuProps {
   closeAncestor?: () => void;
   menuItems: MenuItem[];
   menuLabel: ReactNode;
+  pathname?: string;
 }
 
 export const NavigationMenu = ({
@@ -20,6 +21,7 @@ export const NavigationMenu = ({
   closeAncestor,
   menuItems,
   menuLabel,
+  pathname,
 }: NavLinkMenuProps): JSX.Element => {
   const { mdUp } = useBreakpoint();
   const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
@@ -52,7 +54,11 @@ export const NavigationMenu = ({
           vertical: "top",
         }}
       >
-        <NavigationMenuItems closeMenu={closeMenu} menuItems={menuItems} />
+        <NavigationMenuItems
+          closeMenu={closeMenu}
+          menuItems={menuItems}
+          pathname={pathname}
+        />
       </Menu>
     </>
   );

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

@@ -24,11 +24,13 @@ export interface MenuItem extends NavLinkItem {
 export interface NavLinkMenuProps {
   closeMenu: () => void;
   menuItems: MenuItem[];
+  pathname?: string;
 }
 
 export const NavigationMenuItems = ({
   closeMenu,
   menuItems,
+  pathname,
 }: NavLinkMenuProps): JSX.Element => {
   const router = useRouter();
   return (
@@ -53,6 +55,7 @@ export const NavigationMenuItems = ({
               closeAncestor={closeMenu}
               menuItems={nestedMenuItems}
               menuLabel={label}
+              pathname={pathname}
             />
           ) : (
             <Fragment key={i}>
@@ -63,6 +66,7 @@ export const NavigationMenuItems = ({
                     ? router.push(url)
                     : window.open(url, target, "noopener noreferrer");
                 }}
+                selected={url === pathname}
               >
                 {icon && <ListItemIcon>{icon}</ListItemIcon>}
                 <ListItemText

package/src/components/Layout/components/Header/components/Content/components/Navigation/navigation.styles.ts

@@ -14,6 +14,7 @@ export const Navigation = styled("div")`
     justify-content: inherit;
   }
 
+  .MuiButton-activeNav,
   .MuiButton-nav {
     ${textBody500};
     padding: 6px 12px;

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

@@ -26,12 +26,20 @@ export interface NavigationProps {
   closeAncestor?: () => void;
   headerProps?: HeaderProps;
   links: NavLinkItem[];
+  pathname?: string;
   style?: CSSProperties; // Required for Fade component. See https://mui.com/material-ui/transitions/#child-requirement.
 }
 
 export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
   function Navigation(
-    { className, closeAncestor, headerProps, links, style }: NavigationProps,
+    {
+      className,
+      closeAncestor,
+      headerProps,
+      links,
+      pathname,
+      style,
+    }: NavigationProps,
     ref
   ): JSX.Element {
     const { mdUp } = useBreakpoint();
@@ -50,6 +58,7 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                     closeAncestor={closeAncestor}
                     menuItems={menuItems}
                     menuLabel={label}
+                    pathname={pathname}
                   />
                 ) : (
                   <NavigationDrawer
@@ -57,6 +66,7 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                     headerProps={headerProps}
                     menuItems={menuItems}
                     menuLabel={label}
+                    pathname={pathname}
                   />
                 )}
                 {divider && <Divider />}
@@ -70,7 +80,7 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                       : window.open(url, target, "noopener noreferrer");
                     closeAncestor?.();
                   }}
-                  variant="nav"
+                  variant={url === pathname ? "activeNav" : "nav"}
                 >
                   {label}
                 </Button>

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

@@ -1,4 +1,5 @@
 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";
@@ -41,6 +42,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
   const { isIn } = useHeaderVisibility(headerProps);
   const { headerRef } = useMeasureHeader();
   const { onClose, onOpen, open } = useMenu();
+  const pathname = usePathname() ?? "";
   const {
     actions,
     announcements,
@@ -53,6 +55,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
     slogan,
     socialMedia,
   } = headerProps;
+  const navigationProps = { headerProps, pathname };
 
   return (
     <AppBar {...APP_BAR_PROPS} ref={headerRef} className={className}>
@@ -72,7 +75,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
             {/* Left navigation */}
             {isIn.isLeftNavigationIn && (
               <DXNavigation
-                headerProps={headerProps}
+                {...navigationProps}
                 links={getNavigationLinks(navItemsL, breakpoint)}
               />
             )}
@@ -84,7 +87,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
             {/* Center navigation */}
             {isIn.isCenterNavigationIn && (
               <DXNavigation
-                headerProps={headerProps}
+                {...navigationProps}
                 links={getNavigationLinks(navItemsC, breakpoint)}
               />
             )}
@@ -96,7 +99,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
             {/* Navigation */}
             {isIn.isRightNavigationIn && (
               <DXNavigation
-                headerProps={headerProps}
+                {...navigationProps}
                 links={getNavigationLinks(navItemsR)}
               />
             )}
@@ -125,8 +128,8 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
                 {actions}
                 {/* Menu */}
                 <Menu
+                  {...navigationProps}
                   closeMenu={onClose}
-                  headerProps={headerProps}
                   open={open}
                   openMenu={onOpen}
                 />

package/src/theme/common/components.ts

@@ -410,6 +410,23 @@ export const MuiButton = (theme: Theme): Components["MuiButton"] => {
       },
     },
     variants: [
+      {
+        props: {
+          variant: "activeNav", // associated with "nav" variant.
+        },
+        style: {
+          ...theme.typography[TEXT_BODY_500],
+          backgroundColor: theme.palette.smoke.light,
+          color: theme.palette.ink.main,
+          minWidth: 0,
+          textTransform: "capitalize",
+          whiteSpace: "nowrap",
+          // eslint-disable-next-line sort-keys -- disabling key order for readability
+          "&:hover": {
+            backgroundColor: theme.palette.smoke.light,
+          },
+        },
+      },
       {
         props: {
           variant: "nav",

package/types/data-explorer-ui.d.ts

@@ -59,6 +59,7 @@ declare module "@mui/material/styles" {
  */
 declare module "@mui/material/Button" {
   interface ButtonPropsVariantOverrides {
+    activeNav: true;
     nav: true;
   }
 }