85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
import { Flex, globalCss, styled } from '@traefiklabs/faency'
|
|
import { ReactNode, useMemo, useState } from 'react'
|
|
import { Helmet } from 'react-helmet-async'
|
|
import { useLocation } from 'react-router-dom'
|
|
|
|
import Container from './Container'
|
|
import { LAPTOP_BP, SideBarPanel, SideNav, TopNav } from './Navigation'
|
|
|
|
import { ToastPool } from 'components/ToastPool'
|
|
import { ToastProvider } from 'contexts/toasts'
|
|
|
|
export const LIGHT_PRIMARY_COLOR = '#217F97'
|
|
export const DARK_PRIMARY_COLOR = '#2AA2C1'
|
|
|
|
export const globalStyles = globalCss({
|
|
'.light': {
|
|
'--colors-primary': LIGHT_PRIMARY_COLOR,
|
|
},
|
|
|
|
'.dark': {
|
|
'--colors-primary': DARK_PRIMARY_COLOR,
|
|
},
|
|
|
|
body: {
|
|
backgroundColor: '$contentBg',
|
|
m: 0,
|
|
},
|
|
})
|
|
|
|
const PageContainer = styled(Container, {
|
|
py: '$5',
|
|
px: '$5',
|
|
m: 0,
|
|
'@media (max-width:1440px)': {
|
|
maxWidth: '100%',
|
|
},
|
|
})
|
|
|
|
export interface Props {
|
|
title?: string
|
|
children?: ReactNode
|
|
}
|
|
|
|
const Page = ({ children }: Props) => {
|
|
const { pathname } = useLocation()
|
|
const [isSideBarPanelOpen, setIsSideBarPanelOpen] = useState(false)
|
|
const location = useLocation()
|
|
|
|
const isDemoPage = useMemo(() => pathname.includes('hub-dashboard'), [pathname])
|
|
|
|
const renderedContent = useMemo(() => {
|
|
if (isDemoPage) {
|
|
return children
|
|
}
|
|
|
|
return (
|
|
<PageContainer data-testid={`${location.pathname} page`} direction="column">
|
|
<TopNav />
|
|
{children}
|
|
</PageContainer>
|
|
)
|
|
}, [children, isDemoPage, location.pathname])
|
|
|
|
return (
|
|
<ToastProvider>
|
|
{globalStyles()}
|
|
<Helmet>
|
|
<title>Traefik Proxy</title>
|
|
</Helmet>
|
|
<Flex>
|
|
<SideBarPanel isOpen={isSideBarPanelOpen} onOpenChange={setIsSideBarPanelOpen} />
|
|
<SideNav isExpanded={isSideBarPanelOpen} onSidePanelToggle={() => setIsSideBarPanelOpen(true)} isResponsive />
|
|
<Flex
|
|
justify="center"
|
|
css={{ flex: 1, margin: 'auto', ml: 264, [`@media (max-width:${LAPTOP_BP}px)`]: { ml: 60 } }}
|
|
>
|
|
{renderedContent}
|
|
</Flex>
|
|
</Flex>
|
|
<ToastPool />
|
|
</ToastProvider>
|
|
)
|
|
}
|
|
|
|
export default Page
|