106 lines
3.2 KiB
JavaScript
106 lines
3.2 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
import { Link, useLocation } from 'react-router-dom'
|
|
import { Layout, Menu, Flex, Button } from 'antd'
|
|
import { DashboardOutlined } from '@ant-design/icons'
|
|
import FilamentStockIcon from '../../Icons/FilamentStockIcon'
|
|
import PartStockIcon from '../../Icons/PartStockIcon'
|
|
import ProductStockIcon from '../../Icons/ProductStockIcon'
|
|
import StockAuditIcon from '../../Icons/StockAuditIcon'
|
|
import StockEventIcon from '../../Icons/StockEventIcon'
|
|
import CollapseSidebarIcon from '../../Icons/CollapseSidebarIcon'
|
|
import ExpandSidebarIcon from '../../Icons/ExpandSidebarIcon'
|
|
|
|
const { Sider } = Layout
|
|
|
|
const SIDEBAR_COLLAPSED_KEY = 'sidebar_collapsed'
|
|
|
|
const InventorySidebar = () => {
|
|
const location = useLocation()
|
|
const [selectedKey, setSelectedKey] = useState('inventory')
|
|
const [collapsed, setCollapsed] = useState(() => {
|
|
const savedState = sessionStorage.getItem(SIDEBAR_COLLAPSED_KEY)
|
|
return savedState ? JSON.parse(savedState) : false
|
|
})
|
|
|
|
useEffect(() => {
|
|
const pathParts = location.pathname.split('/').filter(Boolean)
|
|
if (pathParts.length > 2) {
|
|
setSelectedKey(pathParts[2]) // Return the section (inventory/management)
|
|
}
|
|
}, [location.pathname])
|
|
|
|
const handleCollapse = (newCollapsed) => {
|
|
setCollapsed(newCollapsed)
|
|
sessionStorage.setItem(SIDEBAR_COLLAPSED_KEY, JSON.stringify(newCollapsed))
|
|
}
|
|
|
|
const items = [
|
|
{
|
|
key: 'overview',
|
|
label: <Link to='/dashboard/inventory/overview'>Overview</Link>,
|
|
icon: <DashboardOutlined />
|
|
},
|
|
{ type: 'divider' },
|
|
{
|
|
key: 'filamentstocks',
|
|
label: (
|
|
<Link to='/dashboard/inventory/filamentstocks'>Filament Stocks</Link>
|
|
),
|
|
icon: <FilamentStockIcon />
|
|
},
|
|
{
|
|
key: 'partstocks',
|
|
label: <Link to='/dashboard/inventory/partstocks'>Part Stocks</Link>,
|
|
icon: <PartStockIcon />
|
|
},
|
|
{
|
|
key: 'productstocks',
|
|
label: (
|
|
<Link to='/dashboard/inventory/productstocks'>Product Stocks</Link>
|
|
),
|
|
icon: <ProductStockIcon />
|
|
},
|
|
{ type: 'divider' },
|
|
{
|
|
key: 'stockevents',
|
|
label: <Link to='/dashboard/inventory/stockevents'>Stock Events</Link>,
|
|
icon: <StockEventIcon />
|
|
},
|
|
{
|
|
key: 'stockaudits',
|
|
label: <Link to='/dashboard/inventory/stockaudits'>Stock Audits</Link>,
|
|
icon: <StockAuditIcon />
|
|
}
|
|
]
|
|
|
|
return (
|
|
<Sider width={250} theme='light' collapsed={collapsed}>
|
|
<Flex
|
|
style={{ height: '100%' }}
|
|
vertical
|
|
className='ant-menu-root ant-menu-inline ant-menu-light'
|
|
>
|
|
<Menu
|
|
mode='inline'
|
|
selectedKeys={[selectedKey]}
|
|
defaultSelectedKeys={['overview']}
|
|
style={{ height: '100%', flexGrow: 1, border: 'none' }}
|
|
items={items}
|
|
_internalDisableMenuItemTitleTooltip
|
|
/>
|
|
<Flex style={{ padding: '4px', width: '100%' }}>
|
|
<Button
|
|
size='large'
|
|
type='text'
|
|
icon={collapsed ? <ExpandSidebarIcon /> : <CollapseSidebarIcon />}
|
|
style={{ flexGrow: 1 }}
|
|
onClick={() => handleCollapse(!collapsed)}
|
|
/>
|
|
</Flex>
|
|
</Flex>
|
|
</Sider>
|
|
)
|
|
}
|
|
|
|
export default InventorySidebar
|