fix: unable to scroll page when navigate via drawer

Sports-day · Oct 7, 2024 · f59f99c · f59f99c
1 parent e163a51
commit f59f99c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/app/(authenticated)/layout.tsx b/app/(authenticated)/layout.tsx
@@ -16,7 +16,7 @@ export default function RootLayout({
             <CssBaseline/>
             <Box sx={{ display: 'flex' }}>
                 <Navigation/>
-                <Stack minHeight="100lvh-8" width="100%" mt={8}>
+                <Stack minHeight="100lvh-8" width="100%" mt={8} overflow={"scrollable"}>
                     {children}
                 </Stack>
             </Box>

diff --git a/components/layout/navigation.tsx b/components/layout/navigation.tsx
@@ -26,8 +26,10 @@ export const Navigation = () => {
     const [isClosing, setIsClosing] = React.useState(false);
 
     const handleDrawerClose = () => {
-        setIsClosing(true);
-        setMobileOpen(false);
+        if (mobileOpen) {
+            setIsClosing(true);
+            setMobileOpen(false);
+        }
     }
     const handleDrawerTransitionEnd = () => {
         setIsClosing(false);
@@ -48,7 +50,7 @@ export const Navigation = () => {
                     sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
                     component={NextLink}
                     href={"/"}
-                    onClick={handleDrawerToggle}
+                    onClick={handleDrawerClose}
                 >
                     <Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
                            alignItems="center">
@@ -65,7 +67,7 @@ export const Navigation = () => {
                     sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
                     component={NextLink}
                     href={"/"}
-                    onClick={handleDrawerToggle}
+                    onClick={handleDrawerClose}
                 >
                     <Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
                            alignItems="center">
@@ -102,7 +104,7 @@ export const Navigation = () => {
                     sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
                     component={NextLink}
                     href={"/sports"}
-                    onClick={handleDrawerToggle}
+                    onClick={handleDrawerClose}
                 >
                     <Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
                            alignItems="center">
@@ -170,7 +172,7 @@ export const Navigation = () => {
                     sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
                     component={NextLink}
                     href={"/roles"}
-                    onClick={handleDrawerToggle}
+                    onClick={handleDrawerClose}
                 >
                     <Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
                            alignItems="center">