From a43eed6c61f30564ff2aafada14223fa5022710b Mon Sep 17 00:00:00 2001
From: droniu <droniu@droniu.dev>
Date: Tue, 16 Jul 2024 14:30:35 +0200
Subject: [PATCH] Improve navbar rendering

---
 src/components/Navigation.tsx     |  2 +-
 src/components/NavigationTile.tsx | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index d67a3a2..a25bba3 100644
--- 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
index 9f119c2..df8ef15 100644
--- 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