forked from
fogtype.com/_
プレイグラウンド、サンドボックス、使い捨てスクリプト置き場
fix tabs
Kohei Watanabe
(Jun 11, 2020, 11:24 PM +0900)
e95f7506
bb0f1764
+22
-13
+22
-13
styles/TopAppBar.tsx
+22
-13
styles/TopAppBar.tsx
···
6
6
import Tab from "@material-ui/core/Tab";
7
7
import routes from "../routes";
8
8
9
+
const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
10
+
9
11
const TopAppBar = () => {
10
12
const router = useRouter();
11
-
const pathname = (
12
-
routes.find(({ pathname }) => pathname === router.pathname) || {
13
-
pathname: "/",
14
-
}
15
-
).pathname;
13
+
const currentPathname = React.useMemo(
14
+
() =>
15
+
router.pathname.startsWith(basePath)
16
+
? router.pathname.slice(basePath.length)
17
+
: router.pathname,
18
+
[router.pathname]
19
+
);
20
+
const tabPathname = React.useMemo(
21
+
() =>
22
+
routes.reduce(
23
+
(prev, { pathname }) =>
24
+
pathname === currentPathname ? pathname : prev,
25
+
"/"
26
+
),
27
+
[currentPathname]
28
+
);
16
29
return (
17
30
<AppBar color="default">
18
31
<Tabs
19
-
value={pathname}
32
+
value={tabPathname}
20
33
variant="fullWidth"
21
34
indicatorColor="primary"
22
35
textColor="primary"
23
36
>
24
-
{routes.map(({ pathname, icon }) => (
37
+
{routes.map(({ pathname, icon }, index) => (
25
38
<Tab
26
-
key={pathname}
39
+
key={index}
27
40
value={pathname}
28
41
icon={icon}
29
42
component={React.forwardRef<HTMLAnchorElement, {}>((props, ref) => (
30
43
<Link href={pathname}>
31
-
<a
32
-
ref={ref}
33
-
href={[process.env.NEXT_PUBLIC_BASE_PATH, pathname].join("")}
34
-
{...props}
35
-
/>
44
+
<a ref={ref} href={[basePath, pathname].join("")} {...props} />
36
45
</Link>
37
46
))}
38
47
/>