Tom Butcher
24a3a03c65
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- Updated DashboardLayout to utilize Electron context for dynamic spacing adjustments. - Enhanced About and Settings components to include icon keys for improved navigation clarity. - Refined DashboardOverviewPage to generate dynamic icon keys based on page names. - Improved DashboardTabs to support sidebar icons, enhancing visual consistency. - Expanded NavigationTabsContext to manage icon keys for tabs, streamlining tab interactions. - Updated sidebarIconMap to utilize component references for better performance and maintainability.
92 lines
3.3 KiB
JavaScript
92 lines
3.3 KiB
JavaScript
// DashboardLayout.js
|
|
import PropTypes from 'prop-types'
|
|
import { Layout, Flex } from 'antd'
|
|
import { useContext } from 'react'
|
|
import { useLocation } from 'react-router-dom'
|
|
import ProductionSidebar from './Production/ProductionSidebar'
|
|
import InventorySidebar from './Inventory/InventorySidebar'
|
|
import FinanceSidebar from './Finance/FinanceSidebar'
|
|
import SalesSidebar from './Sales/SalesSidebar'
|
|
import ManagementSidebar from './Management/ManagementSidebar'
|
|
import DashboardNavigation from './common/DashboardNavigation'
|
|
import DashboardBreadcrumb from './common/DashboardBreadcrumb'
|
|
import DeveloperSidebar from './Developer/DeveloperSidebar'
|
|
import DashboardSidebarSplitter from './common/DashboardSidebarSplitter'
|
|
import MobileFooterNavigation from './common/MobileFooterNavigation'
|
|
import { useThemeContext } from './context/ThemeContext'
|
|
import { MessageProvider } from './context/MessageContext'
|
|
import { useDashboardObjectToolsContext } from './context/DashboardObjectToolsContext'
|
|
import { useMediaQuery } from 'react-responsive'
|
|
import { ElectronContext } from './context/ElectronContext'
|
|
|
|
const { Content } = Layout
|
|
|
|
const DashboardLayout = ({ children }) => {
|
|
const location = useLocation()
|
|
const isMobile = useMediaQuery({ maxWidth: 768 })
|
|
const { isElectron } = useContext(ElectronContext)
|
|
const isProduction = location.pathname.startsWith('/dashboard/production')
|
|
const isInventory = location.pathname.startsWith('/dashboard/inventory')
|
|
const isFinance = location.pathname.startsWith('/dashboard/finance')
|
|
const isSales = location.pathname.startsWith('/dashboard/sales')
|
|
const isManagement = location.pathname.startsWith('/dashboard/management')
|
|
const isDeveloper = location.pathname.startsWith('/dashboard/developer')
|
|
|
|
const { isDarkMode } = useThemeContext()
|
|
const { currentObjectTools } = useDashboardObjectToolsContext()
|
|
|
|
const sidebar = isProduction ? (
|
|
<ProductionSidebar />
|
|
) : isInventory ? (
|
|
<InventorySidebar />
|
|
) : isFinance ? (
|
|
<FinanceSidebar />
|
|
) : isSales ? (
|
|
<SalesSidebar />
|
|
) : isManagement ? (
|
|
<ManagementSidebar />
|
|
) : isDeveloper ? (
|
|
<DeveloperSidebar />
|
|
) : (
|
|
<ProductionSidebar />
|
|
)
|
|
|
|
return (
|
|
<MessageProvider>
|
|
<Layout
|
|
style={{ height: 'var(--unit-100vh)' }}
|
|
className={`${isDarkMode ? 'dark-mode' : 'light-mode'} main-layout${isMobile ? ' is-mobile' : ''}`}
|
|
>
|
|
<DashboardNavigation />
|
|
<DashboardSidebarSplitter sidebar={sidebar}>
|
|
<Layout
|
|
style={{ padding: '24px', height: '100%' }}
|
|
className='main-content-layout'
|
|
>
|
|
<Content>
|
|
<Flex
|
|
vertical
|
|
style={{ height: '100%' }}
|
|
gap={isElectron ? '10px' : '20px'}
|
|
>
|
|
<Flex justify='space-between' align='center'>
|
|
<DashboardBreadcrumb style={{ margin: '16px 0' }} />
|
|
{currentObjectTools}
|
|
</Flex>
|
|
<div style={{ flex: 1, minHeight: 0 }}>{children}</div>
|
|
</Flex>
|
|
</Content>
|
|
</Layout>
|
|
</DashboardSidebarSplitter>
|
|
{isMobile ? <MobileFooterNavigation /> : null}
|
|
</Layout>
|
|
</MessageProvider>
|
|
)
|
|
}
|
|
|
|
DashboardLayout.propTypes = {
|
|
children: PropTypes.node.isRequired
|
|
}
|
|
|
|
export default DashboardLayout
|