70 lines
1.9 KiB
JavaScript

import { useLocation } from 'react-router-dom'
import DashboardSidebar from '../common/DashboardSidebar'
import ProductionIcon from '../../Icons/ProductionIcon'
import PrinterIcon from '../../Icons/PrinterIcon'
import JobIcon from '../../Icons/JobIcon'
import GCodeFileIcon from '../../Icons/GCodeFileIcon'
import SubJobIcon from '../../Icons/SubJobIcon'
const items = [
{
key: 'overview',
icon: <ProductionIcon />,
label: 'Overview',
path: '/dashboard/production/overview'
},
{ type: 'divider' },
{
key: 'printers',
icon: <PrinterIcon />,
label: 'Printers',
path: '/dashboard/production/printers'
},
{
key: 'jobs',
icon: <JobIcon />,
label: 'Jobs',
path: '/dashboard/production/jobs'
},
{
key: 'subJobs',
icon: <SubJobIcon />,
label: 'Sub Jobs',
path: '/dashboard/production/subjobs'
},
{
key: 'gcodeFiles',
icon: <GCodeFileIcon />,
label: 'GCode Files',
path: '/dashboard/production/gcodefiles'
}
]
const routeKeyMap = {
'/dashboard/production/overview': 'overview',
'/dashboard/production/printers': 'printers',
'/dashboard/production/jobs': 'jobs',
'/dashboard/production/subjobs': 'subJobs',
'/dashboard/production/gcodefiles': 'gcodeFiles'
}
const ProductionSidebar = (props) => {
const location = useLocation()
const selectedKey = (() => {
const match = Object.keys(routeKeyMap).find((path) => {
const pathSplit = path.split('/')
const locationPathSplit = location.pathname.split('/')
if (pathSplit.length > locationPathSplit.length) return false
for (let i = 0; i < pathSplit.length; i++) {
if (pathSplit[i] !== locationPathSplit[i]) return false
}
return true
})
return match ? routeKeyMap[match] : 'overview'
})()
return <DashboardSidebar items={items} selectedKey={selectedKey} {...props} />
}
export default ProductionSidebar