update LayoutMenu , LayoutSidebar components

src/layout/MainLayout.jsx

@@ -1,21 +1,26 @@
-import React from 'react';
-import { Layout, theme } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Layout, theme, Grid } from 'antd';
 import LayoutFooter from './LayoutFooter';
 import LayoutHeader from './LayoutHeader';
 import LayoutSidebar from './LayoutSidebar';
 
 const { Content } = Layout;
+const { useBreakpoint } = Grid;
 
 const MainLayout = ({ children }) => {
     const {
         token: { colorBgContainer, borderRadiusLG },
     } = theme.useToken();
 
+    const screens = useBreakpoint();
+    const isDesktop = screens.lg;
+
     return (
         <Layout style={{ height: '100vh' }}>
             <LayoutSidebar />
             <Layout
                 style={{
+                    marginLeft: isDesktop ? '300px' : '0',
                     overflow: 'auto',
                 }}
             >