Merge pull request #87 from MurakawaTakuya/feat/79-navigation-menu

navigation menu作成
MurakawaTakuya · Dec 5, 2024 · 430074b · 430074b
2 parents f81c939 + 8e85add
commit 430074b
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 5 deletions.
diff --git a/src/Components/NavigationMenu/NavigationMenu.tsx b/src/Components/NavigationMenu/NavigationMenu.tsx
@@ -0,0 +1,118 @@
+"use client";
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
+import HomeRoundedIcon from "@mui/icons-material/HomeRounded";
+import Person from "@mui/icons-material/Person";
+import Box from "@mui/joy/Box";
+import ListItemDecorator from "@mui/joy/ListItemDecorator";
+import Tab, { tabClasses } from "@mui/joy/Tab";
+import TabList from "@mui/joy/TabList";
+import Tabs from "@mui/joy/Tabs";
+import { redirect } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export default function NavigationMenu() {
+  const paths = [
+    ["/mycontent", "/mycontent/"],
+    ["/"],
+    ["/account", "/account/"],
+  ];
+  const pathname = window.location.pathname;
+  const defaultIndex = paths[0].some((path) => path === pathname)
+    ? 0
+    : paths[1].some((path) => path === pathname)
+    ? 1
+    : 2;
+  const [index, setIndex] = useState(defaultIndex);
+  const colors = ["success", "primary", "warning"] as const;
+
+  useEffect(() => {
+    if (document.readyState === "complete") {
+      if (!paths[index].some((path) => path === pathname)) {
+        redirect(paths[index][0]);
+      }
+    }
+  }, [index]);
+
+  return (
+    <Box
+      sx={{
+        flexGrow: 1,
+        borderTopLeftRadius: "12px",
+        borderTopRightRadius: "12px",
+        bgcolor: `${"var(--colors-index)"}.500`,
+        position: "fixed",
+        bottom: "30px",
+        width: "100%",
+        maxWidth: "600px",
+        zIndex: 100,
+      }}
+      style={{ "--colors-index": colors[index] } as React.CSSProperties}
+    >
+      <Tabs
+        size="lg"
+        aria-label="Bottom Navigation"
+        value={index}
+        onChange={(event, value) => setIndex(value as number)}
+        sx={(theme) => ({
+          p: 1,
+          borderRadius: 16,
+          maxWidth: "93%",
+          mx: "auto",
+          boxShadow: theme.shadow.sm,
+          "--joy-shadowChannel": theme.vars.palette[colors[index]].darkChannel,
+          [`& .${tabClasses.root}`]: {
+            py: 1,
+            flex: 1,
+            transition: "0.3s",
+            fontWeight: "md",
+            fontSize: "md",
+            [`&:not(.${tabClasses.selected}):not(:hover)`]: {
+              opacity: 0.7,
+            },
+          },
+        })}
+      >
+        <TabList
+          variant="plain"
+          size="sm"
+          disableUnderline
+          sx={{ borderRadius: "lg", p: 0 }}
+        >
+          <Tab
+            disableIndicator
+            orientation="vertical"
+            sx={{ margin: "0 3px", padding: "8px 0 !important" }}
+            {...(index === 0 && { color: colors[0] })}
+          >
+            <ListItemDecorator>
+              <FormatListBulletedIcon />
+            </ListItemDecorator>
+            My contents
+          </Tab>
+          <Tab
+            disableIndicator
+            orientation="vertical"
+            sx={{ margin: "0 3px", padding: "8px 0 !important" }}
+            {...(index === 1 && { color: colors[1] })}
+          >
+            <ListItemDecorator>
+              <HomeRoundedIcon />
+            </ListItemDecorator>
+            Homes
+          </Tab>
+          <Tab
+            disableIndicator
+            orientation="vertical"
+            sx={{ margin: "0 3px", padding: "8px 0 !important" }}
+            {...(index === 2 && { color: colors[2] })}
+          >
+            <ListItemDecorator>
+              <Person />
+            </ListItemDecorator>
+            Profile
+          </Tab>
+        </TabList>
+      </Tabs>
+    </Box>
+  );
+}
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
@@ -26,7 +26,7 @@ const Card = styled(MuiCard)(({ theme }) => ({
   width: "100%",
   padding: theme.spacing(4),
   gap: theme.spacing(2),
-  margin: "auto",
+  margin: "0 auto",
   boxShadow:
     "hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px",
   borderRadius: "20px",
@@ -96,7 +96,7 @@ export default function Account() {
         direction="column"
         justifyContent="center"
         alignItems="center"
-        sx={{ height: "100vh", padding: 2 }}
+        sx={{ padding: 2 }}
       >
         <Card variant="outlined">
           <Typography variant="h4" textAlign="center">

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import Header from "@/Components/Header/Header";
+import NavigationMenu from "@/Components/NavigationMenu/NavigationMenu";
 import { TopPage } from "@/Components/TopPage/TopPage";
 import "@/styles/globals.scss";
 import "@/utils/CloudMessaging/getNotification";
@@ -27,7 +28,10 @@ export default function RootLayout({
       <body>
         <Header />
         <UserProvider>
-          <TopPage>{children}</TopPage>
+          <TopPage>
+            {children}
+            <NavigationMenu />
+          </TopPage>
         </UserProvider>
       </body>
     </html>

diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -15,11 +15,12 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol", "Noto Color Emoji" !important;
-  height: 100vh;
   margin: 0 auto !important;
-  max-width: 700px;
+  max-width: 600px;
+  min-height: 100vh;
 }
 
 main {
   background: white;
+  padding-bottom: 130px;
 }