47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
import { MarkGithubIcon } from '@primer/octicons-react'
|
|
|
|
import { Link } from 'components/Link'
|
|
import { useTranslation } from 'components/hooks/useTranslation'
|
|
import { useMainContext } from 'components/context/MainContext'
|
|
import { SidebarProduct } from './SidebarProduct'
|
|
import { SidebarHomepage } from './SidebarHomepage'
|
|
|
|
export const SidebarNav = () => {
|
|
const router = useRouter()
|
|
const { error, relativePath } = useMainContext()
|
|
const { t } = useTranslation('header')
|
|
|
|
return (
|
|
<div
|
|
className="d-none d-lg-block bg-primary position-sticky top-0 overflow-y-auto flex-shrink-0 pb-5 border-right"
|
|
style={{ width: 326, height: '100vh' }}
|
|
>
|
|
<div
|
|
className="d-flex flex-items-center p-4 position-sticky top-0 color-bg-default"
|
|
style={{ zIndex: 3 }}
|
|
id="github-logo"
|
|
role="banner"
|
|
>
|
|
<Link
|
|
href={`/${router.locale}`}
|
|
className="color-fg-default"
|
|
aria-hidden="true"
|
|
tabIndex={-1}
|
|
>
|
|
<MarkGithubIcon size={32} />
|
|
</Link>
|
|
<Link
|
|
href={`/${router.locale}`}
|
|
className="f4 text-semibold color-fg-default no-underline no-wrap pl-2 flex-auto"
|
|
>
|
|
{t('github_docs')}
|
|
</Link>
|
|
</div>
|
|
<nav>
|
|
{error === '404' || relativePath === 'index.md' ? <SidebarHomepage /> : <SidebarProduct />}
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|