src/index.css

@@ -20,36 +20,65 @@ html body {
   height: 100vh;
 }
 
-/* Custom Orange Sidebar Menu Styles */
-.custom-orange-menu.ant-menu-dark .ant-menu-item-selected {
+/* Custom green Sidebar Menu Styles */
+.custom-green-menu.ant-menu-dark .ant-menu-item-selected {
   background-color: rgba(255, 255, 255, 0.2) !important;
   color: white !important;
 }
 
-.custom-orange-menu.ant-menu-dark .ant-menu-item-selected::after {
+.custom-green-menu.ant-menu-dark .ant-menu-item-selected::after {
   border-right-color: white !important;
 }
 
-.custom-orange-menu.ant-menu-dark .ant-menu-item:hover,
-.custom-orange-menu.ant-menu-dark .ant-menu-submenu-title:hover {
+.custom-green-menu.ant-menu-dark .ant-menu-item:hover,
+.custom-green-menu.ant-menu-dark .ant-menu-submenu-title:hover {
   background-color: rgba(255, 255, 255, 0.15) !important;
   color: white !important;
 }
 
-.custom-orange-menu.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title {
+.custom-green-menu.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title {
   color: white !important;
 }
 
-.custom-orange-menu.ant-menu-dark.ant-menu-inline .ant-menu-sub {
+.custom-green-menu.ant-menu-dark.ant-menu-inline .ant-menu-sub {
   background: rgba(0, 0, 0, 0.2) !important;
 }
 
-.custom-orange-menu.ant-menu-dark .ant-menu-item,
-.custom-orange-menu.ant-menu-dark .ant-menu-submenu-title {
+.custom-green-menu.ant-menu-dark .ant-menu-item,
+.custom-green-menu.ant-menu-dark .ant-menu-submenu-title {
   color: rgba(255, 255, 255, 0.9) !important;
 }
 
-.custom-orange-menu.ant-menu-dark .ant-menu-item-active,
-.custom-orange-menu.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title {
+.custom-green-menu.ant-menu-dark .ant-menu-item-active,
+.custom-green-menu.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title {
   color: white !important;
-}
+}
+
+/*start styling for scrollbar menu */
+.custom-menu-scrollbar::-webkit-scrollbar {
+    width: 8px;
+}
+.custom-menu-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 10px;
+    margin: 5px 0;
+}
+.custom-menu-scrollbar::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #1BAA56 0%, rgb(5, 75, 34) 100%);
+    border-radius: 10px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+}
+.custom-menu-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #2bc56d 0%, rgb(8, 94, 43) 100%);
+}
+.custom-menu-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: #1BAA56 transparent;
+}
+/* Hilangkan panah atas/bawah */
+.custom-menu-scrollbar::-webkit-scrollbar-button {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+}
+/*end styling for scrollbar menu */

src/layout/LayoutMenu.jsx

@@ -422,7 +422,7 @@ const LayoutMenu = () => {
                 border: 'none',
             }}
             theme="dark"
-            className="custom-orange-menu"
+            className="custom-green-menu"
         />
     );
 };

src/layout/LayoutSidebar.jsx

@@ -30,8 +30,24 @@ const LayoutSidebar = () => {
                 zIndex: 9999
             }}
         >
-            <LayoutLogo />
-            <LayoutMenu />
+            <div style={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100vh',
+                overflow: 'hidden'
+            }}>
+                {/* Logo section - fixed height */}
+                <div style={{flexShrink: 0,minHeight: '64px'}}>
+                    <LayoutLogo />
+                </div>
+                
+                {/* Menu section - scrollable */}
+                <div style={{flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
+                    <div className="custom-menu-scrollbar" style={{flex: 1, overflowY: 'auto', overflowX: 'hidden', backgroundColor: 'transparent'}}>
+                        <LayoutMenu />
+                    </div>
+                </div>
+            </div>
         </Sider>
     );
 };