From 8e85add33b8007a6b8ab1d9f7daae143c2d4645e Mon Sep 17 00:00:00 2001
From: MurakawaTakuya <murakawatakuya5@gmail.com>
Date: Thu, 5 Dec 2024 15:52:04 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=8A=E3=83=93=E3=82=B2=E3=83=BC=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=83=90=E3=83=BC=E3=81=AE=E3=83=87=E3=82=B6?=
 =?UTF-8?q?=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}
     >
       <Tabs
         size="lg"
@@ -55,7 +56,7 @@ export default function NavigationMenu() {
         sx={(theme) => ({
           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() {
           <Tab
             disableIndicator
             orientation="vertical"
+            sx={{ margin: "0 3px", padding: "8px 0 !important" }}
             {...(index === 0 && { color: colors[0] })}
-            disabled={!user}
           >
             <ListItemDecorator>
               <FormatListBulletedIcon />
@@ -91,8 +92,8 @@ export default function NavigationMenu() {
           <Tab
             disableIndicator
             orientation="vertical"
+            sx={{ margin: "0 3px", padding: "8px 0 !important" }}
             {...(index === 1 && { color: colors[1] })}
-            disabled={!user}
           >
             <ListItemDecorator>
               <HomeRoundedIcon />
@@ -102,6 +103,7 @@ export default function NavigationMenu() {
           <Tab
             disableIndicator
             orientation="vertical"
+            sx={{ margin: "0 3px", padding: "8px 0 !important" }}
             {...(index === 2 && { color: colors[2] })}
           >
             <ListItemDecorator>
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;
 }