src/layout/LayoutMenu.jsx

@@ -25,7 +25,6 @@ import {
     TeamOutlined,
     ClockCircleOutlined,
     CalendarOutlined,
-    UsergroupAddOutlined,
 } from '@ant-design/icons';
 
 const { Text } = Typography;
@@ -50,6 +49,11 @@ const allItems = [
                 icon: <ProductOutlined style={{ fontSize: '19px' }} />,
                 label: <Link to="/master/plant-section">Plant Section</Link>,
             },
+            {
+                key: 'master-brand-device',
+                icon: <AntDesignOutlined style={{ fontSize: '19px' }} />,
+                label: <Link to="/master/brand-device">Brand Device</Link>,
+            },
             {
                 key: 'master-device',
                 icon: <MobileOutlined style={{ fontSize: '19px' }} />,
@@ -60,11 +64,6 @@ const allItems = [
                 icon: <TagOutlined style={{ fontSize: '19px' }} />,
                 label: <Link to="/master/tag">Tag</Link>,
             },
-            {
-                key: 'master-brand-device',
-                icon: <AntDesignOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/master/brand-device">Brand Device</Link>,
-            },
             {
                 key: 'master-status',
                 icon: <SafetyOutlined style={{ fontSize: '19px' }} />,
@@ -139,18 +138,6 @@ const allItems = [
             </Link>
         ),
     },
-    {
-        key: 'shift-management',
-        icon: <ClockCircleOutlined style={{ fontSize: '19px' }} />,
-        label: 'Manajemen Shift',
-        children: [
-            {
-                key: 'shift-member',
-                icon: <UsergroupAddOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/shift-management/member">Anggota Shift</Link>,
-            },
-        ],
-    },
 ];
 
 const LayoutMenu = () => {

src/layout/LayoutSidebar.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import { Layout } from 'antd';
 import LayoutLogo from './LayoutLogo';
 import LayoutMenu from './LayoutMenu';
@@ -18,12 +18,18 @@ const LayoutSidebar = () => {
             }}
             style={{
                 background: 'linear-gradient(180deg, #FF8C42 0%, #FF6B35 100%)',
+                overflow: 'auto',
+                height: '100vh',
+                position: 'fixed',
+                left: 0,
+                top: 0,
+                bottom: 0,
             }}
         >
             <LayoutLogo />
             <LayoutMenu />
         </Sider>
-    )
+    );
-}
+};
 
-export default LayoutSidebar
+export default LayoutSidebar;

src/layout/MainLayout.jsx

@@ -1,21 +1,26 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
-import { Layout, theme } from 'antd';
+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',
                 }}
             >