From e95f7506a54817b99f488013a05499db889a63e8 Mon Sep 17 00:00:00 2001 From: Kohei Watanabe <kou029w@gmail.com> Date: Thu, 11 Jun 2020 23:19:57 +0900 Subject: [PATCH] fix tabs --- styles/TopAppBar.tsx | 35 ++++++++++++++++++++++------------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/styles/TopAppBar.tsx b/styles/TopAppBar.tsx index 4a364b5..20bd9f2 100644 --- a/styles/TopAppBar.tsx +++ b/styles/TopAppBar.tsx @@ -6,33 +6,42 @@ import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; import routes from "../routes"; +const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? ""; + const TopAppBar = () => { const router = useRouter(); - const pathname = ( - routes.find(({ pathname }) => pathname === router.pathname) || { - pathname: "/", - } - ).pathname; + const currentPathname = React.useMemo( + () => + router.pathname.startsWith(basePath) + ? router.pathname.slice(basePath.length) + : router.pathname, + [router.pathname] + ); + const tabPathname = React.useMemo( + () => + routes.reduce( + (prev, { pathname }) => + pathname === currentPathname ? pathname : prev, + "/" + ), + [currentPathname] + ); return ( <AppBar color="default"> <Tabs - value={pathname} + value={tabPathname} variant="fullWidth" indicatorColor="primary" textColor="primary" > - {routes.map(({ pathname, icon }) => ( + {routes.map(({ pathname, icon }, index) => ( <Tab - key={pathname} + key={index} value={pathname} icon={icon} component={React.forwardRef<HTMLAnchorElement, {}>((props, ref) => ( <Link href={pathname}> - <a - ref={ref} - href={[process.env.NEXT_PUBLIC_BASE_PATH, pathname].join("")} - {...props} - /> + <a ref={ref} href={[basePath, pathname].join("")} {...props} /> </Link> ))} />