@databiosphere/findable-ui 7.0.0 → 8.0.1

package/lib/hooks/useBreakpoint.d.ts

@@ -0,0 +1,17 @@
+import { UseCurrentBreakpoint } from "./useCurrentBreakpoint";
+export declare type UseBreakpoint = {
+    breakpoint?: UseCurrentBreakpoint;
+    lg: boolean;
+    lgDown: boolean;
+    lgUp: boolean;
+    md: boolean;
+    mdDown: boolean;
+    mdUp: boolean;
+    sm: boolean;
+    smDown: boolean;
+    smUp: boolean;
+    xs: boolean;
+    xsDown: boolean;
+    xsUp: boolean;
+};
+export declare const useBreakpoint: () => UseBreakpoint;

package/lib/hooks/useBreakpoint.js

@@ -0,0 +1,34 @@
+import { useCurrentBreakpoint, } from "./useCurrentBreakpoint";
+export const useBreakpoint = () => {
+    const breakpoint = useCurrentBreakpoint();
+    // Current breakpoint.
+    const xs = breakpoint === "xs";
+    const sm = breakpoint === "sm";
+    const md = breakpoint === "md";
+    const lg = breakpoint === "lg";
+    // Current breakpoint, down.
+    const xsDown = xs;
+    const smDown = xs || sm;
+    const mdDown = xs || sm || md;
+    const lgDown = xs || sm || md || lg;
+    // Current breakpoint, up.
+    const xsUp = xs || sm || md || lg;
+    const smUp = sm || md || lg;
+    const mdUp = md || lg;
+    const lgUp = lg;
+    return {
+        breakpoint,
+        lg,
+        lgDown,
+        lgUp,
+        md,
+        mdDown,
+        mdUp,
+        sm,
+        smDown,
+        smUp,
+        xs,
+        xsDown,
+        xsUp,
+    };
+};

package/lib/hooks/useBreakpointHelper.d.ts

@@ -9,6 +9,6 @@ export declare enum BREAKPOINT_FN_NAME {
     UP = "up"
 }
 declare type BreakpointFnName = BREAKPOINT_FN_NAME;
-declare type BreakpointKey = Breakpoint;
+export declare type BreakpointKey = Breakpoint;
 export declare const useBreakpointHelper: (fnName: BreakpointFnName, breakpointKey: BreakpointKey) => boolean;
 export {};

package/lib/hooks/useCurrentBreakpoint.d.ts

@@ -0,0 +1,3 @@
+import { BreakpointKey } from "./useBreakpointHelper";
+export declare type UseCurrentBreakpoint = BreakpointKey | undefined;
+export declare const useCurrentBreakpoint: () => UseCurrentBreakpoint;

package/lib/hooks/useCurrentBreakpoint.js

@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "./useBreakpointHelper";
+const breakpointKeys = ["xs", "sm", "md", "lg"];
+export const useCurrentBreakpoint = () => {
+    const xs = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "xs");
+    const sm = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "sm");
+    const md = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "md");
+    const lg = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "lg");
+    const breakpoints = useMemo(() => ({ lg, md, sm, xs }), [lg, md, sm, xs]);
+    return breakpointKeys.find((key) => breakpoints[key]);
+};

package/lib/hooks/useMenu.d.ts

@@ -0,0 +1,10 @@
+export interface UseMenu {
+    onClose: () => void;
+    onOpen: () => void;
+    open: boolean;
+}
+/**
+ * Menu functionality for menu dropdown.
+ * @returns menu functionality.
+ */
+export declare const useMenu: () => UseMenu;

package/lib/hooks/useMenu.js

@@ -0,0 +1,17 @@
+import { useCallback, useState } from "react";
+/**
+ * Menu functionality for menu dropdown.
+ * @returns menu functionality.
+ */
+export const useMenu = () => {
+    const [open, setOpen] = useState(false);
+    // Closes header menu.
+    const onClose = useCallback(() => {
+        setOpen(false);
+    }, []);
+    // Opens header menu.
+    const onOpen = useCallback(() => {
+        setOpen(true);
+    }, []);
+    return { onClose, onOpen, open };
+};

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/lib/views/ExploreView/exploreView.js

@@ -1,12 +1,11 @@
-import { useRouter } from "next/router";
 import React, { useEffect, useMemo, useState } from "react";
 import { track } from "../../common/analytics/analytics";
 import { EVENT_NAME, EVENT_PARAM } from "../../common/analytics/entities";
-import { Tabs } from "../../components/common/Tabs/tabs";
 import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
 import { ClearAllFilters } from "../../components/Filter/components/ClearAllFilters/clearAllFilters";
 import { Filters, } from "../../components/Filter/components/Filters/filters";
 import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
+import { Tabs } from "../../components/Index/components/Tabs/tabs";
 import { Index as IndexView } from "../../components/Index/index";
 import { SidebarButton } from "../../components/Layout/components/Sidebar/components/SidebarButton/sidebarButton";
 import { SidebarLabel } from "../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel";
@@ -21,30 +20,15 @@ import { useSummary } from "../../hooks/useSummary";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
 import { DESKTOP_SM } from "../../theme/common/breakpoints";
-/**
- * Returns tabs to be used as a prop for the Tabs component.
- * @param entities - Entities config.
- * @returns tabs list.
- */
-function getTabs(entities) {
-    return entities.map(({ label, route, tabIcon: icon, tabIconPosition: iconPosition }) => ({
-        icon,
-        iconPosition,
-        label,
-        value: route,
-    }));
-}
 export const ExploreView = (props) => {
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
     const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
     const { config, entityConfig } = useConfig(); // Get app level config.
     const { exploreDispatch, exploreState } = useExploreState(); // Get the useReducer state and dispatch for "Explore".
-    const { entities, explorerTitle, summaryConfig, trackingConfig } = config;
+    const { explorerTitle, summaryConfig, trackingConfig } = config;
     const { listView } = entityConfig;
     const { listHero, subTitleHero } = listView || {};
-    const { categoryGroups, categoryViews, filterCount, tabValue } = exploreState;
-    const { push } = useRouter();
-    const tabs = getTabs(entities);
+    const { categoryGroups, categoryViews, filterCount } = exploreState;
     const { response: summaryResponse } = useSummary(); // Fetch summary.
     useEntityList(props); // Fetch entities.
     const { entityListType } = props;
@@ -98,15 +82,6 @@ export const ExploreView = (props) => {
     const onOpenDrawer = () => {
         setIsDrawerOpen(true);
     };
-    /**
-     * Callback fired when selected tab value changes.
-     * - Sets state tabsValue to selected tab value.
-     * - Executes a pushState and resets pagination.
-     * @param tabValue - Selected tab value.
-     */
-    const onTabChange = (tabValue) => {
-        push(`/${tabValue}`);
-    };
     /**
      * Dispatch a SelectedEntityType action when entityListType changes.
      */
@@ -128,7 +103,7 @@ export const ExploreView = (props) => {
                 React.createElement(ClearAllFilters, null),
                 React.createElement(SearchAllFilters, { categoryViews: categoryViews, drawerOpen: isDrawerOpen, onFilter: onFilterChange.bind(null, true) })),
             React.createElement(Filters, { categoryFilters: categoryFilters, closeAncestor: onCloseDrawer, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig?.trackFilterOpened }))),
-        React.createElement(IndexView, { className: props.className, List: renderList(exploreState, entityConfig, entityListType), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (React.createElement(SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: React.createElement(Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabValue }), title: explorerTitle })));
+        React.createElement(IndexView, { className: props.className, List: renderList(exploreState, entityConfig, entityListType), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (React.createElement(SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: React.createElement(Tabs, null), title: entityConfig.explorerTitle || explorerTitle })));
 };
 /**
  * Builds the category views into category views grouped by the given category group configuration.

package/package.json

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

package/src/common/entities.ts

@@ -17,17 +17,6 @@ export interface CategoryTag {
  */
 export type CategoryValueKey = string;
 
-/**
- * Element alignment.
- */
-export enum ELEMENT_ALIGNMENT {
-  CENTER = "CENTER",
-  LEFT = "LEFT",
-  RIGHT = "RIGHT",
-}
-
-export type ElementAlignment = ELEMENT_ALIGNMENT;
-
 /**
  * Set of selected category values.
  */

package/src/components/Index/components/Tabs/common/utils.ts

@@ -0,0 +1,33 @@
+import { EntityConfig } from "../../../../../config/entities";
+import { Tab } from "../../../../common/Tabs/tabs";
+
+/**
+ * Returns entity list tabs list for the tabs component.
+ * @param entities - Entities config.
+ * @returns tabs list.
+ */
+export function getEntityListTabs(entities: EntityConfig[]): Tab[] {
+  return entities.reduce(
+    (
+      acc: Tab[],
+      {
+        label,
+        listView: { enableTab = true } = {},
+        route,
+        tabIcon: icon,
+        tabIconPosition: iconPosition,
+      }
+    ) => {
+      if (enableTab) {
+        acc.push({
+          icon,
+          iconPosition,
+          label,
+          value: route,
+        });
+      }
+      return acc;
+    },
+    []
+  );
+}

package/src/components/Index/components/Tabs/tabs.tsx

@@ -0,0 +1,23 @@
+import Router from "next/router";
+import React, { useCallback, useMemo } from "react";
+import { useConfig } from "../../../../hooks/useConfig";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { Tabs as DXTabs, TabValue } from "../../../common/Tabs/tabs";
+import { getEntityListTabs } from "./common/utils";
+
+export const Tabs = (): JSX.Element | null => {
+  const { config } = useConfig();
+  const { exploreState } = useExploreState();
+  const { entities } = config;
+  const { tabValue } = exploreState;
+  const tabs = useMemo(() => getEntityListTabs(entities), [entities]);
+
+  // Callback fired when selected tab value changes.
+  const onTabChange = useCallback(async (tabValue: TabValue): Promise<void> => {
+    await Router.push(`/${tabValue}`);
+  }, []);
+
+  if (tabs.length <= 1) return null;
+
+  return <DXTabs onTabChange={onTabChange} tabs={tabs} value={tabValue} />;
+};

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

@@ -1,17 +1,21 @@
-export const HEADER_HEIGHT = 56;
-export const HEADER_FADE_TIMEOUT = 0;
+import {
+  AppBarProps as MAppBarProps,
+  ToolbarProps as MToolbarProps,
+} from "@mui/material";
 
-export const FADE_TRANSITION_PROPS = {
-  timeout: HEADER_FADE_TIMEOUT,
-  unmountOnExit: true,
-};
+export const HEADER_HEIGHT = 56;
 
-export const HEADER_NAVIGATION_LABEL = {
-  MORE: "More",
-  SOCIALS: "Follow Us",
+export const APP_BAR_PROPS: Partial<MAppBarProps> = {
+  elevation: 1,
+  position: "fixed",
 };
 
-export const SWITCH_TRANSITION_PROPS = {
+export const FADE_TRANSITION_PROPS = {
+  appear: false,
   timeout: 0,
   unmountOnExit: true,
 };
+
+export const TOOLBAR_PROPS: Partial<MToolbarProps> = {
+  variant: "dense",
+};

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

@@ -1,5 +1,12 @@
 import { ReactNode } from "react";
 import { Social } from "../../../../common/Socials/socials";
+import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
+
+export type Navigation = [
+  NavLinkItem[] | undefined,
+  NavLinkItem[] | undefined,
+  NavLinkItem[] | undefined
+]; // [LEFT, CENTER, RIGHT]
 
 export interface SocialMedia {
   label: ReactNode;

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

@@ -1,84 +1,107 @@
-import { Social } from "../../../../common/Socials/socials";
-import { RenderComponent } from "../../../../ComponentCreator/components/RenderComponent/renderComponent";
-import { ANCHOR_TARGET } from "../../../../Links/common/entities";
-import { MenuItem } from "../components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems";
+import { Breakpoint } from "@mui/material";
 import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
-import { HEADER_NAVIGATION_LABEL } from "./constants";
-import { SocialMedia } from "./entities";
+import { Navigation } from "./entities";
 
 /**
- * Returns the navigation links as configured, where the "More" menu is flattened.
- * @param links - Header navigation links.
- * @returns header navigation links, without links grouped under the "More" menu.
+ * Returns the configured menu navigation links, for the current breakpoint.
+ * @param navigation - Navigation links.
+ * @param breakpoint - Current breakpoint.
+ * @returns navigation links.
  */
-export function flattenMoreLink(links: NavLinkItem[]): NavLinkItem[] {
-  return links.flatMap((link: NavLinkItem) => {
-    if (link.label === HEADER_NAVIGATION_LABEL.MORE) {
-      if (link.flatten === false) {
-        return link;
+export function getMenuNavigationLinks(
+  navigation?: Navigation,
+  breakpoint?: Breakpoint
+): NavLinkItem[] {
+  if (!navigation) return [];
+  const navLinkItems = navigation.reduce((acc: NavLinkItem[], navLinkItems) => {
+    if (!navLinkItems) return acc;
+    acc.push(...navLinkItems);
+    return acc;
+  }, []);
+  return getNavigationLinks(navLinkItems, breakpoint);
+}
+
+/**
+ * Returns configured navigation links, for the current breakpoint.
+ * @param navigationLinks - Navigation links.
+ * @param breakpoint - Current breakpoint.
+ * @returns navigation links.
+ */
+export function getNavigationLinks(
+  navigationLinks?: NavLinkItem[],
+  breakpoint?: Breakpoint
+): NavLinkItem[] {
+  if (!navigationLinks) return [];
+  return navigationLinks.reduce(
+    (acc: NavLinkItem[], navLinkItem: NavLinkItem) => {
+      const processedNavLink = processNavLinkItem(navLinkItem, breakpoint);
+      if (processedNavLink) {
+        acc.push(...processedNavLink);
       }
-      return link.menuItems as NavLinkItem[];
-    }
-    return link;
-  });
+      return acc;
+    },
+    []
+  );
 }
 
 /**
- * Returns the navigation links as configured, all menu links specified as "flatten" are flattened, including the "More" menu.
- * @param links - Header navigation links.
- * @returns header navigation links.
+ * Returns true if the link is flattened at the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Current breakpoint.
+ * @returns true if the link is flattened.
  */
-export function flattenNavigationLinks(links: NavLinkItem[]): NavLinkItem[] {
-  return links.flatMap((link: NavLinkItem) => {
-    if (link.flatten || link.label === HEADER_NAVIGATION_LABEL.MORE) {
-      return link.menuItems as NavLinkItem[];
-    }
-    return link;
-  });
+function isLinkFlattened(
+  navLinkItem: NavLinkItem,
+  breakpoint?: Breakpoint
+): boolean {
+  if (!breakpoint) return false; // Default is not flattened.
+  if (!navLinkItem.flatten) return false; // Default is not flattened.
+  return navLinkItem.flatten[breakpoint] === true;
 }
 
 /**
- * Returns header navigation links with socials appended with the corresponding label "Follow Us".
- * @param links - Header navigation links.
- * @param socialMedia - Header social media.
- * @param onlySmDesktop - Media breakpoint query is "true" for small desktop only.
- * @returns header navigation links.
+ * Returns true if the link is visible at the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Current breakpoint.
+ * @returns true if the link is visible.
  */
-export function getHeaderNavigationLinks(
-  links: NavLinkItem[],
-  socialMedia: SocialMedia | undefined,
-  onlySmDesktop: boolean
-): NavLinkItem[] {
-  if (onlySmDesktop) {
-    const navLinks = [...links];
-    if (socialMedia) {
-      navLinks.push({
-        label: socialMedia.label,
-        menuItems: getFollowUsMenuItems(socialMedia.socials),
-        url: "",
-      });
-    }
-    return navLinks;
-  }
-  // Return the links without the "More" or "Follow Us" menu.
-  return flattenMoreLink(links);
+function isLinkVisible(
+  navLinkItem: NavLinkItem,
+  breakpoint?: Breakpoint
+): boolean {
+  if (!breakpoint) return true; // Default is visible.
+  if (!navLinkItem.visible) return true; // Default is visible.
+  return navLinkItem.visible[breakpoint] !== false;
 }
 
 /**
- * Returns menu items for the "Follow Us" menu.
- * @param socials - Social configuration.
- * @returns a list of social menu items for the "Follow Us" menu.
+ * Returns the processed navigation link item.
+ * Flattens menu items, and removes items that are not visible for the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Current breakpoint.
+ * @returns processed navigation link item.
  */
-function getFollowUsMenuItems(socials: Social[]): MenuItem[] {
-  return socials.map(({ Icon, label, url }) => {
-    return {
-      icon: RenderComponent({
-        Component: Icon,
-        ...{ fontSize: "small" },
-      }),
-      label,
-      target: ANCHOR_TARGET.BLANK,
-      url,
-    };
-  });
+function processNavLinkItem(
+  navLinkItem: NavLinkItem,
+  breakpoint?: Breakpoint
+): NavLinkItem[] | undefined {
+  if (isLinkVisible(navLinkItem, breakpoint)) {
+    const cloneLink = { ...navLinkItem };
+    // Recursively process menu items.
+    if (cloneLink.menuItems) {
+      const menuItems = getNavigationLinks(navLinkItem.menuItems, breakpoint);
+      // Remove menu items if empty.
+      if (menuItems.length === 0) {
+        delete cloneLink.menuItems;
+      } else {
+        // Flatten the menu items if the navigation is flattened.
+        if (isLinkFlattened(cloneLink, breakpoint)) {
+          return menuItems;
+        } else {
+          cloneLink.menuItems = menuItems;
+        }
+      }
+    }
+    return [cloneLink];
+  }
 }

package/src/components/Layout/components/Header/components/Announcements/announcements.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { ComponentsConfig } from "../../../../../../config/entities";
+import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
+
+export interface AnnouncementsProps {
+  announcements?: ComponentsConfig;
+}
+
+export const Announcements = ({
+  announcements,
+}: AnnouncementsProps): JSX.Element | null => {
+  if (!announcements) return null;
+  return <ComponentCreator components={announcements} response={{}} />;
+};

package/src/components/Layout/components/Header/components/Content/components/Actions/actions.tsx

@@ -3,12 +3,8 @@ import { HeaderActions } from "./actions.styles";
 
 export interface ActionsProps {
   children: ReactNode | ReactNode[];
-  showActions?: boolean;
 }
 
-export const Actions = ({
-  children,
-  showActions = true,
-}: ActionsProps): JSX.Element => {
-  return <>{showActions && <HeaderActions>{children}</HeaderActions>}</>;
+export const Actions = ({ children }: ActionsProps): JSX.Element => {
+  return <HeaderActions>{children}</HeaderActions>;
 };

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.tsx

@@ -1,12 +1,7 @@
 import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
-import { Fade, IconButton } from "@mui/material";
+import { IconButton as MIconButton } from "@mui/material";
 import React from "react";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../../../../../theme/common/breakpoints";
-import { SWITCH_TRANSITION_PROPS } from "../../../../../../../../common/constants";
+import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
 import { Button } from "./requestAuthentication.styles";
 
 export interface RequestAuthenticationProps {
@@ -18,30 +13,24 @@ export const RequestAuthentication = ({
   closeMenu,
   requestAuthorization,
 }: RequestAuthenticationProps): JSX.Element => {
-  const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
-  const switchProps = SWITCH_TRANSITION_PROPS;
-  return (
-    <>
-      <Fade in={smDesktop} {...switchProps}>
-        <Button
-          onClick={requestAuthorization}
-          startIcon={<LoginRoundedIcon />}
-          variant="nav"
-        >
-          Sign in
-        </Button>
-      </Fade>
-      <Fade in={!smDesktop} {...switchProps}>
-        <IconButton
-          color="ink"
-          onClick={(): void => {
-            closeMenu();
-            requestAuthorization();
-          }}
-        >
-          <LoginRoundedIcon />
-        </IconButton>
-      </Fade>
-    </>
+  const { mdUp } = useBreakpoint();
+  return mdUp ? (
+    <Button
+      onClick={requestAuthorization}
+      startIcon={<LoginRoundedIcon />}
+      variant="nav"
+    >
+      Sign in
+    </Button>
+  ) : (
+    <MIconButton
+      color="ink"
+      onClick={(): void => {
+        closeMenu();
+        requestAuthorization();
+      }}
+    >
+      <LoginRoundedIcon />
+    </MIconButton>
   );
 };

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;