108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
import { LinkExternalIcon, MarkGithubIcon } from '@primer/octicons-react'
|
|
|
|
import { Link } from 'components/Link'
|
|
import { useTranslation } from './hooks/useTranslation'
|
|
import { useMainContext } from './context/MainContext'
|
|
import { SidebarProduct } from './product/SidebarProduct'
|
|
import { AllProductsLink } from './product/AllProductsLink'
|
|
import { useVersion } from './hooks/useVersion'
|
|
|
|
export const SidebarNav = () => {
|
|
const router = useRouter()
|
|
const { error, relativePath, isFPT } = useMainContext()
|
|
const { t } = useTranslation('header')
|
|
|
|
return (
|
|
<div className="d-none d-lg-block color-bg-tertiary position-sticky top-0 overflow-y-auto root">
|
|
<div
|
|
className="d-flex flex-items-center p-4 position-sticky top-0 color-bg-tertiary"
|
|
style={{ zIndex: 3 }}
|
|
id="github-logo"
|
|
role="banner"
|
|
>
|
|
<Link
|
|
href={`/${router.locale}`}
|
|
className="color-text-primary"
|
|
aria-hidden="true"
|
|
tabIndex={-1}
|
|
>
|
|
<MarkGithubIcon size={32} />
|
|
</Link>
|
|
<Link
|
|
href={`/${router.locale}`}
|
|
className="h4-mktg color-text-primary no-underline no-wrap pl-2 flex-auto"
|
|
>
|
|
{t('github_docs')}
|
|
</Link>
|
|
</div>
|
|
<nav>
|
|
{error === '404' || relativePath === 'index.md' ? (
|
|
<ul className="sidebar-products mt-4">
|
|
{!isFPT && <AllProductsLink />}
|
|
<SidebarHomepage />
|
|
</ul>
|
|
) : (
|
|
<ul className="sidebar-products">
|
|
<SidebarProduct />
|
|
</ul>
|
|
)}
|
|
</nav>
|
|
|
|
<style jsx>
|
|
{`
|
|
.root {
|
|
width: 286px;
|
|
height: 100vh;
|
|
flex-shrink: 0;
|
|
padding-bottom: 32px;
|
|
}
|
|
`}
|
|
</style>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const SidebarHomepage = () => {
|
|
const router = useRouter()
|
|
const { currentVersion } = useVersion()
|
|
const { activeProducts, isFPT } = useMainContext()
|
|
|
|
return (
|
|
<>
|
|
{activeProducts.map((product) => {
|
|
if (!isFPT && !product.versions?.includes(currentVersion) && !product.external) {
|
|
return null
|
|
}
|
|
|
|
const href = `${!product.external ? `/${router.locale}` : ''}${
|
|
product.versions?.includes(currentVersion) && !isFPT
|
|
? `/${currentVersion}/${product.id}`
|
|
: product.href
|
|
}`
|
|
|
|
return (
|
|
<li
|
|
key={product.id}
|
|
title={`${product.name}${product.external ? '(External Site)' : ''}`}
|
|
className="sidebar-product"
|
|
>
|
|
<a
|
|
href={href}
|
|
target={product.external ? '_blank' : undefined}
|
|
className="f4 pl-4 pr-5 py-2 color-text-primary"
|
|
>
|
|
{product.name}
|
|
{product.external && (
|
|
<span className="ml-1">
|
|
<LinkExternalIcon size="small" />
|
|
</span>
|
|
)}
|
|
</a>
|
|
</li>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|