fix: clicking on join court leads to court menu but doesn't change the highlight

Author: qqqzhch

src/bootstrap/app.js

@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import t from "prop-types";
 import loadable from "@loadable/component";
 import styled from "styled-components/macro";
-import { Col, Layout, Menu, Row, Spin } from "antd";
+import { Col, Layout, Row, Spin } from "antd";
 import { Helmet } from "react-helmet";
 import { BrowserRouter, NavLink, Route, Switch, useParams } from "react-router-dom";
 import { ReactComponent as Logo } from "../assets/images/kleros-logo-flat-light.svg";
@@ -17,6 +17,8 @@ import ChainChangeWatcher from "./chain-change-watcher";
 import drizzle, { DrizzleProvider, Initializer, useDrizzle } from "./drizzle";
 import ErrorBoundary from "../components/error-boundary";
 import SwitchChainFallback from "../components/error-fallback/switch-chain";
+import MenuMobile from "../components/menu/index";
+import MenuPc from "../components/menu/styledMenu";
 
 export default function App() {
   const [isMenuClosed, setIsMenuClosed] = useState(true);
@@ -45,7 +47,7 @@ export default function App() {
                         collapsed={isMenuClosed}
                         onClick={() => setIsMenuClosed((previousState) => !previousState)}
                       >
-                        <Menu theme="dark">{MenuItems}</Menu>
+                        <MenuMobile></MenuMobile>
                       </StyledLayoutSider>
                       <Layout>
                         <StyledLayoutHeader>
@@ -56,9 +58,7 @@ export default function App() {
                               </LogoNavLink>
                             </StyledLogoCol>
                             <Col lg={14} md={12} xs={0} style={{ padding: "0 16px" }}>
-                              <StyledMenu mode="horizontal" theme="dark">
-                                {MenuItems}
-                              </StyledMenu>
+                              <MenuPc></MenuPc>
                             </Col>
                             <StyledTrayCol lg={6} md={8} sm={12} xs={24}>
                               <StyledTray>
@@ -172,27 +172,6 @@ const ConvertPnk = loadable(() => import(/* webpackPrefetch: true */ "../contain
   fallback: <StyledSpin />,
 });
 
-const MenuItems = [
-  <Menu.Item key="home">
-    <NavLink to="/">Home</NavLink>
-  </Menu.Item>,
-  <Menu.Item key="courts">
-    <NavLink to="/courts">Courts</NavLink>
-  </Menu.Item>,
-  <Menu.Item key="cases">
-    <NavLink to="/cases">My Cases</NavLink>
-  </Menu.Item>,
-  <Menu.Item key="guide">
-    <a
-      href="https://blog.kleros.io/become-a-juror-blockchain-dispute-resolution-on-ethereum/"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      Guide
-    </a>
-  </Menu.Item>,
-];
-
 const settings = {
   draw: "When I am drawn as a juror.",
   appeal: "When a case I ruled is appealed.",
@@ -247,35 +226,6 @@ const StyledTrayCol = styled(Col)`
   height: 64px;
 `;
 
-const StyledMenu = styled(Menu)`
-  font-weight: 500;
-  line-height: 64px !important;
-  text-align: center;
-
-  &.ant-menu-dark {
-    background-color: transparent;
-  }
-
-  && {
-    .ant-menu-item > a {
-      color: rgba(255, 255, 255, 0.85);
-
-      &.hover,
-      &.focus {
-        color: rgba(255, 255, 255, 1);
-      }
-    }
-
-    .ant-menu-item-selected {
-      background-color: transparent !important;
-
-      > a {
-        color: rgba(255, 255, 255, 1);
-      }
-    }
-  }
-`;
-
 const StyledLayoutContent = styled(Layout.Content)`
   background: #f2e3ff;
   // The header takes exactly 64px

src/components/menu/index.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Menu } from "antd";
+import MenuItems from "./menuItems";
+import useMenuSelectkey from "../../hooks/use-menu-selectkey";
+
+const MenuMobile = () => {
+  let selectKey = useMenuSelectkey();
+  return (
+    <Menu theme="dark" selectedKeys={[selectKey]}>
+      {MenuItems()}
+    </Menu>
+  );
+};
+
+export default MenuMobile;

src/components/menu/menuItems.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Menu } from "antd";
+import { NavLink } from "react-router-dom";
+
+const menuItems = () => {
+  return [
+    <Menu.Item key="home">
+      <NavLink to="/">Home</NavLink>
+    </Menu.Item>,
+    <Menu.Item key="courts">
+      <NavLink to="/courts">Courts</NavLink>
+    </Menu.Item>,
+    <Menu.Item key="cases">
+      <NavLink to="/cases">My Cases</NavLink>
+    </Menu.Item>,
+    <Menu.Item key="guide">
+      <a
+        href="https://blog.kleros.io/become-a-juror-blockchain-dispute-resolution-on-ethereum/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Guide
+      </a>
+    </Menu.Item>,
+  ];
+};
+
+export default menuItems;

src/components/menu/styledMenu.js

@@ -0,0 +1,46 @@
+import React from "react";
+import styled from "styled-components/macro";
+import { Menu } from "antd";
+import MenuItems from "./menuItems";
+import useMenuSelectkey from "../../hooks/use-menu-selectkey";
+
+const StyledMenu = styled(Menu)`
+  font-weight: 500;
+  line-height: 64px !important;
+  text-align: center;
+
+  &.ant-menu-dark {
+    background-color: transparent;
+  }
+
+  && {
+    .ant-menu-item > a {
+      color: rgba(255, 255, 255, 0.85);
+
+      &.hover,
+      &.focus {
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+
+    .ant-menu-item-selected {
+      background-color: transparent !important;
+
+      > a {
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+  }
+`;
+
+const StyleMenu = () => {
+  let selectKey = useMenuSelectkey();
+
+  return (
+    <StyledMenu mode="horizontal" theme="dark" selectedKeys={[selectKey]}>
+      {MenuItems()}
+    </StyledMenu>
+  );
+};
+
+export default StyleMenu;

src/hooks/use-menu-selectkey.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function useMenuSelectkey() {
+  let [selectKey, SetSelectKey] = useState("");
+  let location = useLocation();
+
+  useEffect(() => {
+    let pathname = location.pathname;
+    switch (pathname) {
+      case "/courts":
+        SetSelectKey("courts");
+        break;
+      case "/cases":
+        SetSelectKey("cases");
+        break;
+      default:
+        SetSelectKey("home");
+        break;
+    }
+  }, [location]);
+
+  return selectKey;
+}