fix: active header navigation links should have the option to be matc…

…hed by "exact" (#141)

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

@@ -8,6 +8,11 @@ export type Navigation = [
   NavLinkItem[] | undefined
 ]; // [LEFT, CENTER, RIGHT]
 
+export enum SELECTED_MATCH {
+  EQUALS = "EQUALS",
+  STARTS_WITH = "STARTS_WITH", // Default value.
+}
+
 export interface SocialMedia {
   label: ReactNode;
   socials: Social[];

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

@@ -1,13 +1,27 @@
+import { SELECTED_MATCH } from "../../../../../common/entities";
+
 /**
  * Returns true if the navigation link is selected.
  * @param url - The URL of the navigation link.
  * @param pathname - The current pathname.
+ * @param selectedMatch - The selected match type.
  * @returns true if the navigation link is selected.
  */
 export function isNavigationLinkSelected(
   url: string,
-  pathname?: string
+  pathname?: string,
+  selectedMatch: SELECTED_MATCH = SELECTED_MATCH.STARTS_WITH
 ): 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;
+}

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

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

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

@@ -8,6 +8,7 @@ import {
   REL_ATTRIBUTE,
 } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
+import { SELECTED_MATCH } from "../../../../common/entities";
 import { HeaderProps } from "../../../../header";
 import { isNavigationLinkSelected } from "./common/utils";
 import { NavigationButtonLabel } from "./components/NavigationButtonLabel/navigationButtonLabel";
@@ -21,6 +22,7 @@ export interface NavLinkItem {
   flatten?: Partial<Record<BreakpointKey, boolean>>;
   label: ReactNode;
   menuItems?: MenuItem[];
+  selectedMatch?: SELECTED_MATCH;
   target?: ANCHOR_TARGET;
   url: string;
   visible?: Partial<Record<BreakpointKey, boolean>>;
@@ -53,7 +55,14 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
       <Links ref={ref} className={className} style={style}>
         {links.map(
           (
-            { divider, label, menuItems, target = ANCHOR_TARGET.SELF, url },
+            {
+              divider,
+              label,
+              menuItems,
+              selectedMatch,
+              target = ANCHOR_TARGET.SELF,
+              url,
+            },
             i
           ) =>
             menuItems ? (
@@ -91,7 +100,7 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                         );
                   }}
                   variant={
-                    isNavigationLinkSelected(url, pathname)
+                    isNavigationLinkSelected(url, pathname, selectedMatch)
                       ? "activeNav"
                       : "nav"
                   }