From bce9ca3b0fcd3b43d27218cd3d08199e87dde70a Mon Sep 17 00:00:00 2001
From: Carlos Andres Perez Ubeda <descarlos2013@gmail.com>
Date: Mon, 18 Nov 2024 17:29:39 -0600
Subject: [PATCH] refactor: update responsive overlay and improve dashboard
 layout

- Removed ResponsiveOverlay component.
- Added ResetMiniNavOnResize component to handle mini nav visibility.
- Updated dashboard layout to conditionally render navigation components.
- Adjusted main content padding and enhanced layout styles.
---
 src/App.tsx                                   |  2 +-
 .../ResetMiniNavOnResize.tsx                  | 28 ++++++++++
 .../responsive-overlay/ResponsiveOverlay.tsx  | 52 -------------------
 src/components/responsive-overlay/index.ts    |  2 +-
 src/layouts/dashboard/layout.tsx              | 13 +++--
 src/layouts/dashboard/main.tsx                |  2 +-
 src/layouts/dashboard/nav-mini.tsx            |  2 +-
 src/layouts/dashboard/nav-vertical.tsx        | 20 ++++++-
 8 files changed, 60 insertions(+), 61 deletions(-)
 create mode 100644 src/components/responsive-overlay/ResetMiniNavOnResize.tsx
 delete mode 100644 src/components/responsive-overlay/ResponsiveOverlay.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 2ee92464..c521bbb2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -77,7 +77,7 @@ export default function App() {
                 <SettingsDrawer />
                 <ProgressBar />
                 <Router />
-                {/*<ResponsiveOverlay />*/}
+                <ResponsiveOverlay />
               </SnackbarProvider>
             </MotionLazy>
           </ThemeProvider>
diff --git a/src/components/responsive-overlay/ResetMiniNavOnResize.tsx b/src/components/responsive-overlay/ResetMiniNavOnResize.tsx
new file mode 100644
index 00000000..dd4b4094
--- /dev/null
+++ b/src/components/responsive-overlay/ResetMiniNavOnResize.tsx
@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import {useSettingsContext} from "@src/components/settings";
+
+const ResetMiniNavOnResize = () => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+  const settings = useSettingsContext();
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsSmallScreen(window.innerWidth < 1200);
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  if(isSmallScreen && settings.themeLayout === 'mini') {
+    settings.onUpdate('themeLayout', 'vertical');
+  }
+
+  if (!isSmallScreen) {
+    return null;
+  }
+};
+
+export default ResetMiniNavOnResize;
diff --git a/src/components/responsive-overlay/ResponsiveOverlay.tsx b/src/components/responsive-overlay/ResponsiveOverlay.tsx
deleted file mode 100644
index 43dc9cc7..00000000
--- a/src/components/responsive-overlay/ResponsiveOverlay.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Box, Typography } from '@mui/material';
-import Image from "@src/components/image";
-import responsiveImage from '@public/assets/illustrations/working-responsive.png';
-
-const ResponsiveOverlay = () => {
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsSmallScreen(window.innerWidth < 1200);
-    };
-
-    window.addEventListener('resize', handleResize);
-    handleResize();
-
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  if (!isSmallScreen) {
-    return null;
-  }
-
-  return (
-    <Box
-      sx={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
-        color: '#fff',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 2000,
-      }}
-    >
-
-      <Image src={responsiveImage} alt="Watchit App" sx={{ width: 350}} />
-      <Box sx={{ m: 4 }} />
-      <Typography variant="h6">Watchit App</Typography>
-      <Typography variant="h6">
-        We are working on making this page responsive.
-      </Typography>
-    </Box>
-  );
-};
-
-export default ResponsiveOverlay;
diff --git a/src/components/responsive-overlay/index.ts b/src/components/responsive-overlay/index.ts
index fafd0f08..6d2f49b9 100644
--- a/src/components/responsive-overlay/index.ts
+++ b/src/components/responsive-overlay/index.ts
@@ -1 +1 @@
-export { default as ResponsiveOverlay } from './ResponsiveOverlay.tsx';
+export { default as ResponsiveOverlay } from './ResetMiniNavOnResize.tsx';
diff --git a/src/layouts/dashboard/layout.tsx b/src/layouts/dashboard/layout.tsx
index f391bfc3..b55d4bfa 100644
--- a/src/layouts/dashboard/layout.tsx
+++ b/src/layouts/dashboard/layout.tsx
@@ -54,7 +54,6 @@ export default function DashboardLayout({ children }: Props) {
   return (
     <>
       <Header onOpenNav={nav.onTrue} />
-
       <Box
         sx={{
           minHeight: 1,
@@ -62,8 +61,16 @@ export default function DashboardLayout({ children }: Props) {
           flexDirection: { xs: 'column', md: 'row' },
         }}
       >
-        {renderNavVertical}
-
+        {
+          lgUp
+            ? renderNavVertical
+            : (
+              <NavVertical
+                openNav={nav.value}
+                onCloseNav={nav.onFalse}
+              />
+            )
+        }
         <Main>{children}</Main>
       </Box>
     </>
diff --git a/src/layouts/dashboard/main.tsx b/src/layouts/dashboard/main.tsx
index 00edebc2..b4e29dca 100644
--- a/src/layouts/dashboard/main.tsx
+++ b/src/layouts/dashboard/main.tsx
@@ -18,7 +18,7 @@ export default function Main({ children, sx, ...other }: BoxProps) {
     <Box
       component="main"
       sx={{
-        padding: 5,
+        padding: '0px 5px',
         transition: 'all 0.7s ease',
         flexGrow: 1,
         minHeight: 1,
diff --git a/src/layouts/dashboard/nav-mini.tsx b/src/layouts/dashboard/nav-mini.tsx
index 6b5e1569..00019e54 100644
--- a/src/layouts/dashboard/nav-mini.tsx
+++ b/src/layouts/dashboard/nav-mini.tsx
@@ -21,7 +21,7 @@ export default function NavMini() {
       sx={{
         flexShrink: { lg: 0 },
         width: { lg: NAV.W_MINI },
-        backgroundColor: '#1E1F22'
+        backgroundColor: '#1E1F22',
       }}
     >
       <Stack
diff --git a/src/layouts/dashboard/nav-vertical.tsx b/src/layouts/dashboard/nav-vertical.tsx
index 0d60d7f7..a1bd250e 100644
--- a/src/layouts/dashboard/nav-vertical.tsx
+++ b/src/layouts/dashboard/nav-vertical.tsx
@@ -23,6 +23,7 @@ import { useNavData } from './config-navigation';
 import { AccountPopover, NotificationsPopover, Searchbar } from '../_common';
 import { NavToggleButton } from '../_common';
 import {NAV} from "@src/layouts/config-layout.ts";
+import NavMini from "@src/layouts/dashboard/nav-mini.tsx";
 // ----------------------------------------------------------------------
 
 type Props = {
@@ -150,11 +151,26 @@ export default function NavVertical({ openNav, onCloseNav}: Props) {
           onClose={onCloseNav}
           PaperProps={{
             sx: {
-              width: NAV.W_VERTICAL,
+              width: NAV.W_VERTICAL + NAV.W_MINI,
             },
           }}
         >
-          {renderContent}
+          <Stack direction={'row'} sx={{
+
+          }}>
+            <Box sx={{
+              width: NAV.W_MINI,
+            }}>
+              <NavMini />
+            </Box>
+            <Box sx={{
+              width: NAV.W_VERTICAL,
+            }}>
+              {renderContent}
+            </Box>
+
+          </Stack>
+
         </Drawer>
       )}
       <LoginModal open={loginModalOpen} onClose={handleCloseModal} />