e8b7d3b9fc
* start SidebarNav, enable dark mode * wip: sidebarnav, fix primer components theme rendering * feat: ProductSiteTree, useFeatureFlag * feat: add new product site tree (untested) * wire up HomepageVersionPicker, run lint * fix: remove re-render logic, fix homepage version picker to be natural width * fix: support css + primer/components color modes * fix: rename categoryId -> productId * feat: ProductSiteTree and AllArticlesProduct * fix: cleanup warnings * fix: use next links on ProductSiteTreeNew * fix: use next Link on AllArticlesProduct * fix: add tooltip to ScrollButton, remove stylesheet dependency * feat: ProductArticlesList component * fix: convert color_mode value from cookie when necessary * remove comments * replace liquid with jsx Co-authored-by: Rachael Sewell <rachmari@github.com>
107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
import Link from 'next/link'
|
|
import { LinkExternalIcon, MarkGithubIcon } from '@primer/octicons-react'
|
|
import { useTranslation } from './hooks/useTranslation'
|
|
import { useMainContext } from './context/MainContext'
|
|
import { ProductSiteTree } from './product/ProductSiteTree'
|
|
import { ProductSiteTreeNew } from './product/ProductSiteTreeNew'
|
|
import { AllProductsLink } from './product/AllProductsLink'
|
|
import { useVersion } from './hooks/useVersion'
|
|
import { useFeatureFlags } from './hooks/useFeatureFlags'
|
|
|
|
type Props = {}
|
|
export const SidebarNav = (props: Props) => {
|
|
const router = useRouter()
|
|
const { currentVersion } = useVersion()
|
|
const { error, relativePath } = useMainContext()
|
|
const { FEATURE_NEW_SITETREE } = useFeatureFlags()
|
|
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}`}>
|
|
<a className="color-text-primary" aria-hidden="true" tabIndex={-1}>
|
|
<MarkGithubIcon size={32} />
|
|
</a>
|
|
</Link>
|
|
<Link href={`/${router.locale}`}>
|
|
<a className="h4-mktg color-text-primary no-underline no-wrap pl-2 flex-auto">
|
|
{t('github_docs')}
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
<nav>
|
|
{error === '404' || relativePath === 'index.md' ? (
|
|
<ul className="sidebar-products mt-4">
|
|
{currentVersion !== 'homepage' && <AllProductsLink />}
|
|
<SidebarHomepage />
|
|
</ul>
|
|
) : (
|
|
<ul className="sidebar-products">
|
|
{FEATURE_NEW_SITETREE ? <ProductSiteTreeNew /> : <ProductSiteTree />}
|
|
</ul>
|
|
)}
|
|
</nav>
|
|
|
|
<style jsx>
|
|
{`
|
|
.root {
|
|
width: 280px;
|
|
height: 100vh;
|
|
flex-shrink: 0;
|
|
}
|
|
`}
|
|
</style>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const SidebarHomepage = () => {
|
|
const router = useRouter()
|
|
const { currentVersion } = useVersion()
|
|
const { activeProducts } = useMainContext()
|
|
|
|
return (
|
|
<>
|
|
{activeProducts.map((product) => {
|
|
if (!product.versions?.includes(currentVersion) && currentVersion !== 'homepage') {
|
|
return null
|
|
}
|
|
|
|
const href = `${!product.external ? `/${router.locale}` : ''}${
|
|
product.versions?.includes(currentVersion)
|
|
? `/${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>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|