diff --git a/src/layout/LayoutMenu.jsx b/src/layout/LayoutMenu.jsx
index d0d5cfc..c0f12f0 100644
--- a/src/layout/LayoutMenu.jsx
+++ b/src/layout/LayoutMenu.jsx
@@ -51,39 +51,58 @@ const allItems = [
label: 'Dashboard',
children: [
{
- key: 'dashboard-svg-overview',
+ key: 'dashboard-svg-compressor',
icon: ,
- label: Overview,
+ label: 'Compressor',
+ children: [
+ {
+ key: 'dashboard-svg-compressor-overview',
+ icon: ,
+ label: Overview,
+ },
+ {
+ key: 'dashboard-svg-compressor-compressor-a',
+ icon: ,
+ label: Compressor A,
+ },
+ {
+ key: 'dashboard-svg-compressor-compressor-b',
+ icon: ,
+ label: Compressor B,
+ },
+ {
+ key: 'dashboard-svg-compressor-compressor-c',
+ icon: ,
+ label: Compressor C,
+ },
+ ]
},
{
- key: 'dashboard-svg-compressor-a',
+ key: 'dashboard-svg-airdryer',
icon: ,
- label: Compressor A,
- },
- {
- key: 'dashboard-svg-compressor-b',
- icon: ,
- label: Compressor B,
- },
- {
- key: 'dashboard-svg-compressor-c',
- icon: ,
- label: Compressor C,
- },
- {
- key: 'dashboard-svg-airdryer-a',
- icon: ,
- label: Air Dryer A,
- },
- {
- key: 'dashboard-svg-airdryer-b',
- icon: ,
- label: Air Dryer B,
- },
- {
- key: 'dashboard-svg-airdryer-c',
- icon: ,
- label: Air Dryer C,
+ label: 'Air Dryer',
+ children: [
+ {
+ key: 'dashboard-svg-airdryer-overview',
+ icon: ,
+ label: Overview,
+ },
+ {
+ key: 'dashboard-svg-airdryer-airdryer-a',
+ icon: ,
+ label: Air Dryer A,
+ },
+ {
+ key: 'dashboard-svg-airdryer-airdryer-b',
+ icon: ,
+ label: Air Dryer B,
+ },
+ {
+ key: 'dashboard-svg-airdryer-airdryer-c',
+ icon: ,
+ label: Air Dryer C,
+ },
+ ]
},
],
},
@@ -221,37 +240,77 @@ const LayoutMenu = () => {
// Handle master routes
if (pathname.startsWith('/master/')) {
const subPath = pathParts[1];
- return `master-${subPath}`;
+ // Convert kebab-case to the actual menu keys
+ const masterKeyMap = {
+ 'plant-sub-section': 'master-plant-sub-section',
+ 'brand-device': 'master-brand-device',
+ 'device': 'master-device',
+ 'unit': 'master-unit',
+ 'tag': 'master-tag',
+ 'status': 'master-status',
+ 'shift': 'master-shift'
+ };
+ return masterKeyMap[subPath] || `master-${subPath}`;
}
// Handle dashboard svg routes
if (pathname.startsWith('/dashboard-svg/')) {
const subPath = pathParts[1];
+ // Map specific routes to their menu keys
+ if (subPath === 'overview-compressor') return 'dashboard-svg-compressor-overview';
+ if (subPath === 'compressor-a') return 'dashboard-svg-compressor-compressor-a';
+ if (subPath === 'compressor-b') return 'dashboard-svg-compressor-compressor-b';
+ if (subPath === 'compressor-c') return 'dashboard-svg-compressor-compressor-c';
+ if (subPath === 'overview-airdryer') return 'dashboard-svg-airdryer-overview';
+ if (subPath === 'airdryer-a') return 'dashboard-svg-airdryer-airdryer-a';
+ if (subPath === 'airdryer-b') return 'dashboard-svg-airdryer-airdryer-b';
+ if (subPath === 'airdryer-c') return 'dashboard-svg-airdryer-airdryer-c';
+
return `dashboard-svg-${subPath}`;
}
// Handle report routes
if (pathname.startsWith('/report/')) {
const subPath = pathParts[1];
- return `report-${subPath}`;
+ const reportKeyMap = {
+ 'trending': 'report-trending',
+ 'report': 'report-report'
+ };
+ return reportKeyMap[subPath] || `report-${subPath}`;
}
// Handle history routes
if (pathname.startsWith('/history/')) {
const subPath = pathParts[1];
- return `history-${subPath}`;
+ const historyKeyMap = {
+ 'alarm': 'history-alarm',
+ 'event': 'history-event'
+ };
+ return historyKeyMap[subPath] || `history-${subPath}`;
}
return 'home'; // default
};
- // Function to get parent key from menu key
- const getParentKey = (key) => {
- if (key.startsWith('master-')) return 'master';
- if (key.startsWith('dashboard-svg-')) return 'dashboard-svg';
- if (key.startsWith('report-')) return 'report';
- if (key.startsWith('history-')) return 'history';
- return null;
+ // Function to get parent keys from menu key
+ const getParentKeys = (key) => {
+ const parentKeys = [];
+
+ if (key.startsWith('dashboard-svg-compressor-')) {
+ parentKeys.push('dashboard-svg', 'dashboard-svg-compressor');
+ } else if (key.startsWith('dashboard-svg-airdryer-')) {
+ parentKeys.push('dashboard-svg', 'dashboard-svg-airdryer');
+ } else if (key.startsWith('dashboard-svg-')) {
+ parentKeys.push('dashboard-svg');
+ } else if (key.startsWith('master-')) {
+ parentKeys.push('master');
+ } else if (key.startsWith('report-')) {
+ parentKeys.push('report');
+ } else if (key.startsWith('history-')) {
+ parentKeys.push('history');
+ }
+
+ return parentKeys;
};
// Update selected and open keys when route changes
@@ -259,11 +318,11 @@ const LayoutMenu = () => {
const currentKey = getMenuKeyFromPath(location.pathname);
setSelectedKeys([currentKey]);
- const parentKey = getParentKey(currentKey);
-
- // If current menu has parent, open it. Otherwise, close all dropdowns
- if (parentKey) {
- setStateOpenKeys([parentKey]);
+ const parentKeys = getParentKeys(currentKey);
+
+ // Always keep the parent menus open when a child is selected
+ if (parentKeys.length > 0) {
+ setStateOpenKeys(parentKeys);
} else {
setStateOpenKeys([]);
}
@@ -289,17 +348,30 @@ const LayoutMenu = () => {
const onOpenChange = (openKeys) => {
const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);
+
+ // If clicking on a menu that was previously closed
if (currentOpenKey !== undefined) {
const repeatIndex = openKeys
.filter((key) => key !== currentOpenKey)
.findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]);
+
setStateOpenKeys(
openKeys
.filter((_, index) => index !== repeatIndex)
.filter((key) => levelKeys[key] <= levelKeys[currentOpenKey])
);
} else {
- setStateOpenKeys(openKeys);
+ // If clicking on a menu that was previously open, close only that menu
+ // but keep other parent menus open if they have active children
+ const currentKey = getMenuKeyFromPath(location.pathname);
+ const necessaryParentKeys = getParentKeys(currentKey);
+
+ // Filter out only the menus that are necessary to keep open
+ const filteredOpenKeys = openKeys.filter(key =>
+ necessaryParentKeys.includes(key)
+ );
+
+ setStateOpenKeys(filteredOpenKeys);
}
};
@@ -310,25 +382,17 @@ const LayoutMenu = () => {
return allItems
.filter(
(item) => item.key !== 'setting'
- // tambahkan menu jika terdapat menu yang di sembunyikan dari user karyawan
- // && item.key !== 'master'
- // && item.key !== 'master'
)
.map((item) => {
if (item.key === 'master') {
return {
...item,
- // buka command dibawah jika terdapat sub menu yang di sembunyikan
- // children: item.children.filter(
- // child => child.key !== 'master-product'
- // tambahkan menu jika terdapat menu yang di sembunyikan dari user karyawan
- // && child.key !== 'master-service'
- // )
};
}
return item;
});
};
+
const items = isAdmin === 1 ? allItems : karyawan();
return (
@@ -348,4 +412,4 @@ const LayoutMenu = () => {
/>
);
};
-export default LayoutMenu;
+export default LayoutMenu;
\ No newline at end of file