From ddcbd1cfcd1b237ebd0878214262a9c16438b61a Mon Sep 17 00:00:00 2001 From: zhangchao <544262408@qq.com> Date: Mon, 20 Feb 2023 10:53:06 +0800 Subject: [PATCH] fix: clicking on join court leads to court menu but doesn't change the highlight --- src/bootstrap/app.js | 60 +++---------------------------- src/components/menu/index.js | 15 ++++++++ src/components/menu/menuItems.js | 28 +++++++++++++++ src/components/menu/styledMenu.js | 46 ++++++++++++++++++++++++ src/hooks/use-menu-selectkey.js | 24 +++++++++++++ 5 files changed, 118 insertions(+), 55 deletions(-) create mode 100644 src/components/menu/index.js create mode 100644 src/components/menu/menuItems.js create mode 100644 src/components/menu/styledMenu.js create mode 100644 src/hooks/use-menu-selectkey.js diff --git a/src/bootstrap/app.js b/src/bootstrap/app.js index 282122a5..3f9cb595 100644 --- a/src/bootstrap/app.js +++ b/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)} > - {MenuItems} + @@ -56,9 +58,7 @@ export default function App() { - - {MenuItems} - + @@ -172,27 +172,6 @@ const ConvertPnk = loadable(() => import(/* webpackPrefetch: true */ "../contain fallback: , }); -const MenuItems = [ - - Home - , - - Courts - , - - My Cases - , - - - Guide - - , -]; - 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 diff --git a/src/components/menu/index.js b/src/components/menu/index.js new file mode 100644 index 00000000..2450b98b --- /dev/null +++ b/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 ( + + {MenuItems()} + + ); +}; + +export default MenuMobile; diff --git a/src/components/menu/menuItems.js b/src/components/menu/menuItems.js new file mode 100644 index 00000000..80d11838 --- /dev/null +++ b/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 [ + + Home + , + + Courts + , + + My Cases + , + + + Guide + + , + ]; +}; + +export default menuItems; diff --git a/src/components/menu/styledMenu.js b/src/components/menu/styledMenu.js new file mode 100644 index 00000000..de2f0dc6 --- /dev/null +++ b/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 ( + + {MenuItems()} + + ); +}; + +export default StyleMenu; diff --git a/src/hooks/use-menu-selectkey.js b/src/hooks/use-menu-selectkey.js new file mode 100644 index 00000000..c81a517b --- /dev/null +++ b/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; +}