dify/web/app/components/main-nav/layout.tsx

33 lines
786 B
TypeScript

'use client'
import type { ReactNode } from 'react'
import { useTranslation } from 'react-i18next'
import MainNav from './index'
import { MAIN_CONTENT_ID, SkipNav } from './skip-nav'
type MainNavLayoutProps = {
children: ReactNode
}
const MainNavLayout = ({
children,
}: MainNavLayoutProps) => {
const { t } = useTranslation('common')
return (
<div className="flex h-0 min-h-0 grow overflow-hidden bg-background-body">
<SkipNav>{t('navigation.skipToMain')}</SkipNav>
<MainNav />
<main
id={MAIN_CONTENT_ID}
tabIndex={-1}
className="flex min-w-0 grow flex-col overflow-hidden outline-hidden focus:outline-hidden focus-visible:outline-hidden"
>
{children}
</main>
</div>
)
}
export default MainNavLayout