Improve navbar rendering

saleor · Jul 16, 2024 · a43eed6 · a43eed6
1 parent 2ea2927
commit a43eed6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -2,7 +2,7 @@ import { Box, ConfigurationIcon, HomeIcon, OrdersIcon, SellsIcon } from "@saleor
 import { NavigationTile } from "./NavigationTile";
 
 export const ROUTES = {
-  dashboard: "/app/",
+  dashboard: "/app",
   checkout: "/app/checkout",
   transactions: "/app/transactions",
   configuration: "/app/configuration",

diff --git a/src/components/NavigationTile.tsx b/src/components/NavigationTile.tsx
@@ -8,11 +8,26 @@ interface NavigationTileProps {
   children: React.ReactNode;
 }
 
+const navbarPathMatch = (href: string, pathname: string) => {
+  if (pathname === href) {
+    return true;
+  }
+
+  // pathname matches href + /[any param]
+  const regex = new RegExp(`^${href}/\\[.+\\]$`);
+  if (regex.test(pathname)) {
+    return true;
+  }
+
+  return false;
+};
+
 export const NavigationTile = ({ href, children }: NavigationTileProps) => {
   const router = useRouter();
   const { pathname } = router;
 
-  const isActive = pathname === href;
+  const isActive = navbarPathMatch(href, pathname);
+
   return (
     <Link href={href}>
       <Text