Tom Butcher
2fa5c288d2
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- Added MobileFooterNavigation component for improved navigation on mobile devices, featuring segmented navigation for key sections. - Updated DashboardLayout to conditionally render MobileFooterNavigation based on screen size. - Enhanced DashboardNavigation to dynamically adjust menu items based on mobile view, improving user experience. - Refactored CSS styles for mobile footer navigation to ensure proper layout and responsiveness. - Adjusted ObjectTable component to account for new mobile layout, ensuring consistent display across devices.
99 lines
2.5 KiB
JavaScript
99 lines
2.5 KiB
JavaScript
import { useContext, useMemo } from 'react'
|
|
import { Layout } from 'antd'
|
|
import { useMediaQuery } from 'react-responsive'
|
|
import { useLocation, useNavigate } from 'react-router-dom'
|
|
import { AuthContext } from '../context/AuthContext'
|
|
import { ElectronContext } from '../context/ElectronContext'
|
|
import {
|
|
getSidebarDefaultPath,
|
|
isSidebarSectionVisible
|
|
} from '../../../database/Sidebars'
|
|
import { getSidebarIconNode } from '../../Icons/sidebarIconMap'
|
|
import SegmentedNav from './SegmentedNav'
|
|
|
|
const { Footer } = Layout
|
|
|
|
const MobileFooterNavigation = () => {
|
|
const isMobile = useMediaQuery({ maxWidth: 768 })
|
|
const { userProfile, authenticated } = useContext(AuthContext)
|
|
const { isElectron } = useContext(ElectronContext)
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
const includeDev = import.meta.env.DEV
|
|
|
|
const sectionItems = useMemo(
|
|
() =>
|
|
[
|
|
{
|
|
key: 'production',
|
|
label: 'Production',
|
|
iconKey: 'production'
|
|
},
|
|
{
|
|
key: 'inventory',
|
|
label: 'Inventory',
|
|
iconKey: 'inventory'
|
|
},
|
|
{
|
|
key: 'sales',
|
|
label: 'Sales',
|
|
iconKey: 'sales'
|
|
},
|
|
{
|
|
key: 'finance',
|
|
label: 'Finance',
|
|
iconKey: 'finance'
|
|
},
|
|
{
|
|
key: 'management',
|
|
label: 'Management',
|
|
iconKey: 'settings'
|
|
}
|
|
].filter((item) =>
|
|
isSidebarSectionVisible(item.key, { includeDev, userProfile })
|
|
),
|
|
[includeDev, userProfile]
|
|
)
|
|
|
|
const selectedKey = useMemo(() => {
|
|
const pathParts = location.pathname.split('/').filter(Boolean)
|
|
const sectionKey = pathParts[1]
|
|
return (
|
|
sectionItems.find((item) => item.key === sectionKey)?.key ||
|
|
sectionItems[0]?.key
|
|
)
|
|
}, [location.pathname, sectionItems])
|
|
|
|
const options = useMemo(
|
|
() =>
|
|
sectionItems.map((item) => ({
|
|
value: item.key,
|
|
label: item.label,
|
|
icon: getSidebarIconNode(item.iconKey)
|
|
})),
|
|
[sectionItems]
|
|
)
|
|
|
|
const showControls = !isElectron || authenticated
|
|
|
|
if (!isMobile || !showControls || options.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Footer className='mobile-footer-navigation ant-menu-light'>
|
|
<SegmentedNav
|
|
className='mobile-footer-navigation-tabs'
|
|
value={selectedKey}
|
|
options={options}
|
|
animated
|
|
onChange={(key) =>
|
|
navigate(getSidebarDefaultPath(key, { includeDev, userProfile }))
|
|
}
|
|
/>
|
|
</Footer>
|
|
)
|
|
}
|
|
|
|
export default MobileFooterNavigation
|