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; }