Tabsに変更

styles/TopAppBar.tsx

@@ -1,29 +1,45 @@
-import React from "react";
+import React, { useState } from "react";
-import Link from "next/link";
+import { withRouter } from "next/router";
 import { makeStyles } from "@material-ui/styles";
-import { AppBar, Toolbar, IconButton } from "@material-ui/core";
+import { AppBar, Tabs, Tab } from "@material-ui/core";
-import { Home } from "@material-ui/icons";
+import { Home, Info } from "@material-ui/icons";
 
-const useStyles = makeStyles({
+export const routes = [
+  { pathname: "/", icon: <Home /> },
+  { pathname: "/about", icon: <Info /> }
+];
+
+const TopAppBar: React.FC<{ router: any }> = ({ router }) => {
+  const classes = makeStyles({
     root: {
       flexGrow: 1
     }
+  })();
+  const [value, setValue] = useState(
+    routes.findIndex(({ pathname }) => pathname === router.pathname)
+  );
+  router.events.on("routeChangeStart", (url: string) => {
+    setValue(routes.findIndex(({ pathname }) => pathname === url));
   });
-
-const TopAppBar: React.FC = () => {
-  const classes = useStyles();
   return (
     <div className={classes.root}>
       <AppBar color="default">
-        <Toolbar>
+        <Tabs
-          <Link href="/">
+          value={value}
-            <IconButton>
+          onChange={(_, value) => {
-              <Home />
+            router.push(routes[value].pathname);
-            </IconButton>
+            setValue(value);
-          </Link>
+          }}
-        </Toolbar>
+          variant="fullWidth"
+          indicatorColor="primary"
+          textColor="primary"
+        >
+          {routes.map(({ icon }, i) => (
+            <Tab key={i} icon={icon} />
+          ))}
+        </Tabs>
       </AppBar>
     </div>
   );
 };
-export default TopAppBar;
+export default withRouter(TopAppBar);