fix: prevent reusing same link on sidebar

Author: neocybereth

apps/namadillo/src/App/Common/SidebarMenuItem.tsx

@@ -1,17 +1,21 @@
 import clsx from "clsx";
-import { NavLink } from "react-router-dom";
+import { NavLink, useLocation } from "react-router-dom";
 
 type Props = {
   url?: string;
   children: React.ReactNode;
   shouldHighlight?: boolean;
+  preventNavigationOnSameRoute?: boolean;
 };
 
 export const SidebarMenuItem = ({
   url,
   children,
   shouldHighlight,
+  preventNavigationOnSameRoute = false,
 }: Props): JSX.Element => {
+  const location = useLocation();
+
   const className = clsx(
     "flex items-center gap-5 text-lg text-white",
     "transition-colors duration-300 ease-out-quad hover:text-cyan",
@@ -24,9 +28,16 @@ export const SidebarMenuItem = ({
     return <span className={className}>{children}</span>;
   }
 
+  const handleClick = (e: React.MouseEvent): void => {
+    if (preventNavigationOnSameRoute && location.pathname === url) {
+      e.preventDefault();
+    }
+  };
+
   return (
     <NavLink
       to={url}
+      onClick={handleClick}
       className={({ isActive }) =>
         clsx(className, {
           "text-yellow font-bold": isActive || shouldHighlight,

apps/namadillo/src/App/Layout/Navigation.tsx

@@ -99,6 +99,10 @@ export const Navigation = (): JSX.Element => {
                   shouldHighlight={
                     !!highlightTransferItem || !!highlightShieldItem
                   }
+                  preventNavigationOnSameRoute={
+                    (item.label === "Shield" && highlightShieldItem) ||
+                    (item.label === "Transfer" && highlightTransferItem)
+                  }
                 >
                   {item.icon}
                   {item.label}

apps/namadillo/src/App/Transfer/TransferSource.tsx

@@ -88,8 +88,11 @@ export const TransferSource = ({
   return (
     <div
       className={clsx(
-        "relative bg-neutral-800 rounded-lg px-4 py-5 border-2",
-        selectedTokenType === "shielded" ? "border-yellow-400" : "border-white"
+        "relative bg-neutral-800 rounded-lg px-4 py-5",
+        asset && "border",
+        asset && selectedTokenType === "shielded" ?
+          "border-yellow-400"
+        : asset && "border-white"
       )}
     >
       <header className="relative flex justify-between">