From 3901a2ad32e31a6bcd386a1611fd27f5e4381866 Mon Sep 17 00:00:00 2001 From: MurakawaTakuya Date: Thu, 5 Dec 2024 12:02:42 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E3=83=8A=E3=83=93=E3=82=B2=E3=83=BC?= =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../NavigationMenu/NavigationMenu.tsx | 93 +++++++++++++++++++ src/app/account/page.tsx | 4 +- src/app/layout.tsx | 6 +- src/styles/globals.scss | 4 +- 4 files changed, 102 insertions(+), 5 deletions(-) create mode 100644 src/Components/NavigationMenu/NavigationMenu.tsx diff --git a/src/Components/NavigationMenu/NavigationMenu.tsx b/src/Components/NavigationMenu/NavigationMenu.tsx new file mode 100644 index 0000000..8157691 --- /dev/null +++ b/src/Components/NavigationMenu/NavigationMenu.tsx @@ -0,0 +1,93 @@ +"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 { useState } from "react"; + +export default function NavigationMenu() { + const [index, setIndex] = useState(0); + const colors = ["success", "primary", "warning"] as const; + return ( + + setIndex(value as number)} + sx={(theme) => ({ + p: 1, + borderRadius: 16, + maxWidth: 500, + 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, + }, + }, + })} + > + + + + + + My contents + + + + + + Homes + + + + + + Profile + + + + + ); +} diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx index 1a0a2cc..0a87136 100644 --- 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 }} > diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5d659b0..3297228 100644 --- 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({
- {children} + + {children} + + diff --git a/src/styles/globals.scss b/src/styles/globals.scss index f00aaa2..6578a0e 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -15,9 +15,9 @@ 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 { From 5acf6dd151ce76096c0e22d559d7658a04c90e1b Mon Sep 17 00:00:00 2001 From: MurakawaTakuya Date: Thu, 5 Dec 2024 15:43:51 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=E3=83=8A=E3=83=93=E3=82=B2=E3=83=BC?= =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=90=E3=83=BC=E3=81=AE=E3=83=9A?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E9=81=B7=E7=A7=BB=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../NavigationMenu/NavigationMenu.tsx | 31 ++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/src/Components/NavigationMenu/NavigationMenu.tsx b/src/Components/NavigationMenu/NavigationMenu.tsx index 8157691..028880a 100644 --- a/src/Components/NavigationMenu/NavigationMenu.tsx +++ b/src/Components/NavigationMenu/NavigationMenu.tsx @@ -1,4 +1,5 @@ "use client"; +import { useUser } from "@/utils/UserContext"; import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; import HomeRoundedIcon from "@mui/icons-material/HomeRounded"; import Person from "@mui/icons-material/Person"; @@ -7,17 +8,37 @@ 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 { useState } from "react"; +import { redirect } from "next/navigation"; +import { useEffect, useState } from "react"; export default function NavigationMenu() { - const [index, setIndex] = useState(0); + 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; + const { user } = useUser(); + + useEffect(() => { + if (document.readyState === "complete") { + if (!paths[index].some((path) => path === pathname)) { + redirect(paths[index][0]); + } + } + }, [index]); + return ( @@ -70,6 +92,7 @@ export default function NavigationMenu() { disableIndicator orientation="vertical" {...(index === 1 && { color: colors[1] })} + disabled={!user} > From 8e85add33b8007a6b8ab1d9f7daae143c2d4645e Mon Sep 17 00:00:00 2001 From: MurakawaTakuya Date: Thu, 5 Dec 2024 15:52:04 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=E3=83=8A=E3=83=93=E3=82=B2=E3=83=BC?= =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=90=E3=83=BC=E3=81=AE=E3=83=87?= =?UTF-8?q?=E3=82=B6=E3=82=A4=E3=83=B3=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/NavigationMenu/NavigationMenu.tsx | 16 +++++++++------- src/styles/globals.scss | 1 + 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/Components/NavigationMenu/NavigationMenu.tsx b/src/Components/NavigationMenu/NavigationMenu.tsx index 028880a..3ea2054 100644 --- a/src/Components/NavigationMenu/NavigationMenu.tsx +++ b/src/Components/NavigationMenu/NavigationMenu.tsx @@ -1,5 +1,4 @@ "use client"; -import { useUser } from "@/utils/UserContext"; import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; import HomeRoundedIcon from "@mui/icons-material/HomeRounded"; import Person from "@mui/icons-material/Person"; @@ -25,7 +24,6 @@ export default function NavigationMenu() { : 2; const [index, setIndex] = useState(defaultIndex); const colors = ["success", "primary", "warning"] as const; - const { user } = useUser(); useEffect(() => { if (document.readyState === "complete") { @@ -42,10 +40,13 @@ export default function NavigationMenu() { borderTopLeftRadius: "12px", borderTopRightRadius: "12px", bgcolor: `${"var(--colors-index)"}.500`, - position: "sticky", + position: "fixed", bottom: "30px", + width: "100%", + maxWidth: "600px", + zIndex: 100, }} - style={{ "--colors-index": colors[index] } as any} + style={{ "--colors-index": colors[index] } as React.CSSProperties} > ({ p: 1, borderRadius: 16, - maxWidth: 500, + maxWidth: "93%", mx: "auto", boxShadow: theme.shadow.sm, "--joy-shadowChannel": theme.vars.palette[colors[index]].darkChannel, @@ -80,8 +81,8 @@ export default function NavigationMenu() { @@ -91,8 +92,8 @@ export default function NavigationMenu() { @@ -102,6 +103,7 @@ export default function NavigationMenu() { diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 6578a0e..2c53976 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -22,4 +22,5 @@ body { main { background: white; + padding-bottom: 130px; }