Merge pull request #4 from guardiafinance/feat/add-navbar-route-prefix

feat: add route prefix for navbar navigate links

Author: garcia-victor-fin

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardiafinance/design-system",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "exports": {
     ".": {
@@ -80,8 +80,8 @@
     "typescript": "^5.7.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router": "^7.9.1",
     "zod": "^4.1.8"
   }

package.json

@@ -18,7 +18,8 @@ import {
     NavigationItem,
     getActiveStatesFromPath,
     getDefaultActiveArea,
-    getNavigationItems
+    getNavigationItems,
+    addRoutePrefix
 } from "./utils";
 import { DynamicMenuSections } from "./dynamic-section";
 import { When } from "../../lib/when";
@@ -64,7 +65,8 @@ function NavbarInternal({
         if (item.onClick) {
             item.onClick();
         } else if (item.path) {
-            navigate(item.path);
+            const pathWithPrefix = addRoutePrefix(item.path, settings.routePrefix);
+            navigate(pathWithPrefix);
         }
 
         onItemClick?.(item);

src/components/navbar/navbar.tsx

@@ -53,6 +53,7 @@ export interface NavbarConfiguration {
     areas: NavigationArea[];
     defaultActiveArea?: string;
     allowDefaultPathBehavior?: boolean;
+    routePrefix?: string;
     organization?: NavbarOrganization;
     generalArea?: GeneralArea;
     user?: NavbarUser;
@@ -64,6 +65,48 @@ export interface NavbarConfiguration {
     };
 }
 
+export const stripRoutePrefix = (pathname: string, prefix?: string): string => {
+    if (!prefix) {
+        return pathname;
+    }
+
+    const normalizedPrefix = prefix.startsWith('/') ? prefix : `/${prefix}`;
+    const normalizedPathname = pathname.startsWith('/') ? pathname : `/${pathname}`;
+
+    if (normalizedPathname.startsWith(normalizedPrefix)) {
+        const stripped = normalizedPathname.slice(normalizedPrefix.length);
+        if (stripped === '') {
+            return '/';
+        }
+        return stripped.startsWith('/') ? stripped : `/${stripped}`;
+    }
+
+    return pathname;
+};
+
+export const addRoutePrefix = (path: string, prefix?: string): string => {
+    if (!prefix || !path) {
+        return path;
+    }
+
+    let normalizedPrefix = prefix.startsWith('/') ? prefix : `/${prefix}`;
+    const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+
+    if (normalizedPath === '/') {
+        return normalizedPrefix;
+    }
+
+    if (normalizedPrefix === '/') {
+        return normalizedPath;
+    }
+
+    if (normalizedPrefix.endsWith('/')) {
+        normalizedPrefix = normalizedPrefix.slice(0, -1);
+    }
+
+    return `${normalizedPrefix}${normalizedPath}`;
+};
+
 export const getDefaultActiveArea = (config: NavbarConfiguration): string => {
     if (config.defaultActiveArea) {
         return config.defaultActiveArea;
@@ -113,10 +156,11 @@ export const matchesNavigationItem = (pathname: string, item: NavigationItem): b
 };
 
 export const findNavigationItemByPath = (config: NavbarConfiguration, path: string): NavigationItem | null => {
+    const strippedPath = stripRoutePrefix(path, config.routePrefix);
     for (const area of config.areas) {
         for (const section of area.sections) {
             for (const item of section.items) {
-                if (matchesNavigationItem(path, item)) {
+                if (matchesNavigationItem(strippedPath, item)) {
                     return item;
                 }
             }
@@ -146,9 +190,10 @@ export const getActiveStatesFromPath = (config: NavbarConfiguration, pathname: s
 
     const foundItem = findNavigationItemByPath(config, pathname);
     if (foundItem) {
+        const strippedPath = stripRoutePrefix(pathname, config.routePrefix);
         for (const area of config.areas) {
             for (const section of area.sections) {
-                if (section.items.some(item => matchesNavigationItem(pathname, item))) {
+                if (section.items.some(item => matchesNavigationItem(strippedPath, item))) {
                     activeArea = area.title;
                     activeItem = foundItem.title;
                     return { activeArea, activeItem };