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

@@ -77,7 +77,7 @@ export default function App() {
                 <SettingsDrawer />
                 <ProgressBar />
                 <Router />
-                {/*<ResponsiveOverlay />*/}
+                <ResponsiveOverlay />
               </SnackbarProvider>
             </MotionLazy>
           </ThemeProvider>

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;

src/components/responsive-overlay/index.ts

@@ -1 +1 @@
-export { default as ResponsiveOverlay } from './ResponsiveOverlay.tsx';
+export { default as ResponsiveOverlay } from './ResetMiniNavOnResize.tsx';

src/layouts/dashboard/layout.tsx

@@ -54,16 +54,23 @@ export default function DashboardLayout({ children }: Props) {
   return (
     <>
       <Header onOpenNav={nav.onTrue} />
-
       <Box
         sx={{
           minHeight: 1,
           display: 'flex',
           flexDirection: { xs: 'column', md: 'row' },
         }}
       >
-        {renderNavVertical}
-
+        {
+          lgUp
+            ? renderNavVertical
+            : (
+              <NavVertical
+                openNav={nav.value}
+                onCloseNav={nav.onFalse}
+              />
+            )
+        }
         <Main>{children}</Main>
       </Box>
     </>

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,

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

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