From d7ae8b315c21259ea9f79d1f40df9a18914af19e Mon Sep 17 00:00:00 2001
From: ItsukiKigoshi <itsukikigoshi@gmail.com>
Date: Thu, 1 Aug 2024 18:48:34 +0900
Subject: [PATCH] feat: add curation&reading tab

---
 src/app/curation/page.tsx      |   3 +-
 src/app/page.tsx               |  15 +----
 src/app/reading/page.tsx       |   7 +++
 src/app/salespolicy/page.tsx   |   7 +--
 src/app/template.tsx           |  24 ++++++-
 src/components/Footer.tsx      |  56 ++++++++++++-----
 src/components/Header.tsx      | 110 +++++++++++++++++++++++++++++++++
 src/components/Main.tsx        |  64 ++-----------------
 src/components/SalesPolicy.tsx |  23 +++----
 9 files changed, 198 insertions(+), 111 deletions(-)
 create mode 100644 src/app/reading/page.tsx
 create mode 100644 src/components/Header.tsx

diff --git a/src/app/curation/page.tsx b/src/app/curation/page.tsx
index 3421508..18d0748 100644
--- a/src/app/curation/page.tsx
+++ b/src/app/curation/page.tsx
@@ -1,5 +1,6 @@
+import { Stack, Typography } from "@mui/material";
 import React from "react";
 
 export default function App() {
-  return <div>page</div>;
+  return <Typography>Curation: Under Construction</Typography>;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8f8232e..7953a7a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,19 +1,8 @@
 "use client";
-import Footer from "@/components/Footer";
 import Main from "@/components/Main";
+import Footer from "@/components/Footer";
 import { Box } from "@mui/material";
 
 export default function App() {
-  return (
-    <Box
-      sx={{
-        display: "grid",
-        placeItems: "center", // Center the content horizontally and vertically
-        minHeight: "100vh", // Set a minimum height to fill the entire viewport
-      }}
-    >
-      <Main />
-      <Footer />
-    </Box>
-  );
+  return <Main />;
 }
diff --git a/src/app/reading/page.tsx b/src/app/reading/page.tsx
new file mode 100644
index 0000000..072d05f
--- /dev/null
+++ b/src/app/reading/page.tsx
@@ -0,0 +1,7 @@
+import ButtonGoHome from "@/components/ButtonGoHome";
+import { Stack, Typography } from "@mui/material";
+import React from "react";
+
+export default function App() {
+  return <Typography>Reading: Under Construction</Typography>;
+}
diff --git a/src/app/salespolicy/page.tsx b/src/app/salespolicy/page.tsx
index a982ed4..dc240cc 100644
--- a/src/app/salespolicy/page.tsx
+++ b/src/app/salespolicy/page.tsx
@@ -1,10 +1,7 @@
 "use client";
 import SalesPolicy from "@/components/SalesPolicy";
+import { Box, Stack } from "@mui/material";
 
 export default function App() {
-  return (
-    <div>
-      <SalesPolicy />
-    </div>
-  );
+  return <SalesPolicy />;
 }
diff --git a/src/app/template.tsx b/src/app/template.tsx
index 35cfadf..e393a42 100644
--- a/src/app/template.tsx
+++ b/src/app/template.tsx
@@ -1,6 +1,12 @@
 "use client";
-import { createTheme, ThemeProvider, useMediaQuery } from "@mui/material";
-import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
+import Footer from "@/components/Footer";
+import {
+  createTheme,
+  Stack,
+  ThemeProvider,
+  useMediaQuery,
+} from "@mui/material";
+import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
 import React from "react";
 
 export default function Template({ children }: { children: React.ReactNode }) {
@@ -15,9 +21,21 @@ export default function Template({ children }: { children: React.ReactNode }) {
       }),
     [prefersDarkMode]
   );
+
   return (
     <AppRouterCacheProvider>
-      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      <ThemeProvider theme={theme}>
+        <Stack
+          sx={{ minHeight: "100vh" }}
+          direction="column"
+          justifyContent="center"
+          alignItems="center"
+          spacing={10}
+        >
+          {children}
+          <Footer />
+        </Stack>
+      </ThemeProvider>
     </AppRouterCacheProvider>
   );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 8f4833f..89f760c 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,25 +1,35 @@
 import GitHubIcon from "@mui/icons-material/GitHub";
 import InfoIcon from "@mui/icons-material/Info";
-import SendIcon from "@mui/icons-material/Send";
-import { Button, ButtonGroup, Stack } from "@mui/material";
+import AutoStoriesIcon from "@mui/icons-material/AutoStories";
+import CottageIcon from "@mui/icons-material/Cottage";
+import TipsAndUpdatesIcon from "@mui/icons-material/TipsAndUpdates";
+import { Button, ButtonGroup, Paper, Stack } from "@mui/material";
 
 export default function Footer() {
   const row_1 = [
     {
-      title: "家庭教師として雇う",
-      url: "http://www.ansin-teacher.net/data/teacher59096.html",
-      icon: <SendIcon />,
+      title: "Home",
+      url: "/",
+      inNewTab: false,
+      icon: <CottageIcon />,
     },
     {
-      title: "Source",
-      url: "https://github.com/ItsukiKigoshi/itsukikigoshi.github.io",
-      icon: <GitHubIcon />,
+      title: "Curation",
+      url: "/curation",
+      isNewTab: false,
+      icon: <TipsAndUpdatesIcon />,
+    },
+    {
+      title: "Reading",
+      url: "/reading",
+      isNewTab: false,
+      icon: <AutoStoriesIcon />,
     },
   ].map((item) => (
     <Button
       key={item.title}
       href={item.url}
-      target="_blank"
+      target={item.isNewTab ? "_blank" : "_self"}
       startIcon={item.icon}
     >
       {item.title}
@@ -30,13 +40,20 @@ export default function Footer() {
     {
       title: "特定商取引法に基づく表記",
       url: "/salespolicy",
+      isNewTab: false,
       icon: <InfoIcon />,
     },
+    {
+      title: "Source",
+      url: "https://github.com/ItsukiKigoshi/itsukikigoshi.github.io",
+      isNewTab: true,
+      icon: <GitHubIcon />,
+    },
   ].map((item) => (
     <Button
-      variant="outlined"
       key={item.title}
       href={item.url}
+      target={item.isNewTab ? "_blank" : "_self"}
       startIcon={item.icon}
     >
       {item.title}
@@ -44,9 +61,20 @@ export default function Footer() {
   ));
 
   return (
-    <Stack useFlexGap spacing={1}>
-      {<ButtonGroup aria-label="button group">{row_1}</ButtonGroup>}
-      {row_2}
-    </Stack>
+    <Paper
+      sx={{
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        p: 2,
+      }}
+      elevation={0}
+    >
+      <Stack spacing={1} alignItems="center">
+        {<ButtonGroup>{row_1}</ButtonGroup>}
+        {<ButtonGroup>{row_2}</ButtonGroup>}
+      </Stack>
+    </Paper>
   );
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..d61f79d
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,110 @@
+import * as React from "react";
+import MenuIcon from "@mui/icons-material/Menu";
+import {
+  AppBar,
+  Box,
+  Avatar,
+  Button,
+  Typography,
+  Toolbar,
+  List,
+  ListItemText,
+  ListItemButton,
+  ListItem,
+  IconButton,
+  Drawer,
+  Divider,
+  CssBaseline,
+  Stack,
+} from "@mui/material";
+import Link from "next/link";
+
+const drawerWidth = 240;
+const navItems = ["Home", "Curation", "Contact"];
+
+export default function Header() {
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+
+  const handleDrawerToggle = () => {
+    setMobileOpen((prevState) => !prevState);
+  };
+
+  const drawer = (
+    <Box onClick={handleDrawerToggle} sx={{ textAlign: "center" }}>
+      <Stack
+        direction="row"
+        justifyContent="center"
+        alignItems="center"
+        spacing={2}
+        my={2}
+      >
+        <Avatar
+          alt={`Itsuki Kigoshi's Profile Picture`}
+          src={`/profile.jpg`}
+          sx={{ width: 50, height: 50 }}
+        />
+        <Typography variant="h6" sx={{ my: 2 }}>
+          Itsuki Kigoshi
+        </Typography>
+      </Stack>
+
+      <Divider />
+      <List>
+        {navItems.map((item) => (
+          <ListItem key={item} disablePadding>
+            <ListItemButton sx={{ textAlign: "center" }}>
+              <Link href={`/${item}`}>
+                <ListItemText primary={item} />
+              </Link>
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+
+  return (
+    <Box sx={{ display: "flex" }}>
+      <CssBaseline />
+      <AppBar component="nav">
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            edge="start"
+            onClick={handleDrawerToggle}
+            sx={{ mr: 2, display: { sm: "none" } }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Box sx={{ display: { xs: "none", sm: "block" } }}>
+            {navItems.map((item) => (
+              <Button key={item} sx={{ color: "#fff" }}>
+                {item}
+              </Button>
+            ))}
+          </Box>
+        </Toolbar>
+      </AppBar>
+      <nav>
+        <Drawer
+          variant="temporary"
+          open={mobileOpen}
+          onClose={handleDrawerToggle}
+          ModalProps={{
+            keepMounted: true, // Better open performance on mobile.
+          }}
+          sx={{
+            display: { xs: "block", sm: "none" },
+            "& .MuiDrawer-paper": {
+              boxSizing: "border-box",
+              width: drawerWidth,
+            },
+          }}
+        >
+          {drawer}
+        </Drawer>
+      </nav>
+    </Box>
+  );
+}
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index 9aa17cd..b27b030 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -5,8 +5,6 @@ import {
   Avatar,
   Box,
   Button,
-  Card,
-  CardContent,
   IconButton,
   Stack,
   Typography,
@@ -47,19 +45,21 @@ export default function Main() {
       }}
     >
       <Stack
-        spacing={1}
+        justifyContent="center"
         sx={{
           display: "grid",
+          maxHeight: "60vh",
           placeItems: "center", // Center the content horizontally and vertically
         }}
         my={2}
+        spacing={2}
       >
         <Avatar
           alt={`Itsuki Kigoshi's Profile Picture`}
           src={`/profile.jpg`}
           sx={{ width: 200, height: 200 }}
         />
-        <Typography sx={{ fontSize: 28 }}>Itsuki KIGOSHI</Typography>
+        <Typography sx={{ fontSize: 28 }}>Itsuki Kigoshi</Typography>
         <Typography>{`ICU '27 (2004)`}</Typography>
       </Stack>
       <Stack spacing={1}>
@@ -75,62 +75,6 @@ export default function Main() {
           {linkButtons}
         </Stack>
       </Stack>
-      {/* <Stack>
-        <Card>
-          <CardContent>
-            <h2>
-              Hi there 👋 I'm NOT an engineer but wanna be a creator/artist.
-            </h2>
-            <h3>🔭I’m currently thinking of creating...</h3>
-            <ul>
-              <li>
-                <a href="https://github.com/ItsukiKigoshi/open-desk-view">
-                  open-desk-view
-                </a>
-                : Open-sourced webcam tool for easily showing docs on ur table
-                in online meetings like{" "}
-                <a href="https://support.apple.com/en-gb/guide/mac-help/mchl06927be8/mac">
-                  Apple's 'Desk View'
-                </a>
-                .
-              </li>
-              <li>
-                <a href="https://github.com/ItsukiKigoshi/icu-catalogue">
-                  ICU Catalogue
-                </a>
-                : Powerful syllabi search engine and academic planning tool for
-                ICU students.
-              </li>
-              <li>
-                <a href="https://github.com/ItsukiKigoshi/shinonome-bunko">
-                  Shinonome Bunko
-                </a>
-                : Automated git-based OCR&peer-review platform for publishing
-                public domain Japanese literature as e-books.
-              </li>
-              <li>
-                <a href="https://github.com/ItsukiKigoshi/curhythm">Curhythm</a>
-                : Rubik's Cube-alike musical instrument to generate beat,
-                melody, harmony & video.
-              </li>
-              <li>
-                OpenPoliCash: Git-based open-source 政治資金収支報告書 database
-                with an Open Data
-              </li>
-            </ul>
-            <h3>🎈My dream is...</h3>
-            <ul>
-              <li>
-                Collaborating with <a href="https://zutomayo.net">Zutomayo</a>{" "}
-                as an artist🦔.
-              </li>
-              <li>Holding a museum exhibition as a contemporary artist🎨.</li>
-            </ul>
-            <h3>📫 How to reach me:</h3>
-            <p>itsukikigoshi+github[at]gmail.com</p>
-          </CardContent>
-        </Card>
-      </Stack> */}
     </Box>
   );
 }
diff --git a/src/components/SalesPolicy.tsx b/src/components/SalesPolicy.tsx
index 127eb68..4dd1628 100644
--- a/src/components/SalesPolicy.tsx
+++ b/src/components/SalesPolicy.tsx
@@ -1,5 +1,4 @@
-import CottageIcon from "@mui/icons-material/Cottage";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 
 export default function SalesPolicy() {
   function createData(title: string, content: string) {
@@ -22,14 +21,12 @@ export default function SalesPolicy() {
   ];
 
   return (
-    <Box
-      sx={{
-        display: "grid",
-        placeItems: "center", // Center the content horizontally and vertically
-        minHeight: "100vh", // Set a minimum height to fill the entire viewport
-        m: 2,
-        p: 2,
-      }}
+    <Stack
+      direction="column"
+      justifyContent="center"
+      alignItems="center"
+      spacing={2}
+      p={2}
     >
       <Typography sx={{ fontSize: 24 }}>特定商取引法に基づく表記</Typography>
       <Box
@@ -45,10 +42,6 @@ export default function SalesPolicy() {
           </Box>
         ))}
       </Box>
-
-      <Button href="/" variant="contained" startIcon={<CottageIcon />}>
-        Go Home
-      </Button>
-    </Box>
+    </Stack>
   );
 }