mirror of
https://github.com/explosion/spaCy.git
synced 2025-07-11 08:42:28 +03:00
Generate active sidebar heading (h0) at compile time
This commit is contained in:
parent
4ab1871a75
commit
51b7b88acf
|
@ -7,6 +7,18 @@ import Link from './link'
|
||||||
import Dropdown from './dropdown'
|
import Dropdown from './dropdown'
|
||||||
import classes from '../styles/sidebar.module.sass'
|
import classes from '../styles/sidebar.module.sass'
|
||||||
|
|
||||||
|
function getActiveHeading(items, slug) {
|
||||||
|
if (/^\/?universe/.test(slug)) return 'Universe'
|
||||||
|
for (let section of items) {
|
||||||
|
for (let { isActive, url } of section.items) {
|
||||||
|
if (isActive || slug === url) {
|
||||||
|
return section.label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return 'Documentation'
|
||||||
|
}
|
||||||
|
|
||||||
const DropdownNavigation = ({ items, defaultValue }) => {
|
const DropdownNavigation = ({ items, defaultValue }) => {
|
||||||
return (
|
return (
|
||||||
<div className={classes.dropdown}>
|
<div className={classes.dropdown}>
|
||||||
|
@ -28,6 +40,7 @@ const Sidebar = ({ items, pageMenu, slug }) => {
|
||||||
const [initialized, setInitialized] = useState(false)
|
const [initialized, setInitialized] = useState(false)
|
||||||
const [activeSection, setActiveSection] = useState(null)
|
const [activeSection, setActiveSection] = useState(null)
|
||||||
const activeRef = useRef()
|
const activeRef = useRef()
|
||||||
|
const activeHeading = getActiveHeading(items, slug)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleInView = ({ detail }) => setActiveSection(detail)
|
const handleInView = ({ detail }) => setActiveSection(detail)
|
||||||
|
@ -45,10 +58,13 @@ const Sidebar = ({ items, pageMenu, slug }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<menu className={classNames('sidebar', classes.root)}>
|
<menu className={classNames('sidebar', classes.root)}>
|
||||||
|
<h1 hidden aria-hidden="true" className={classNames('h0', classes.activeHeading)}>
|
||||||
|
{activeHeading}
|
||||||
|
</h1>
|
||||||
<DropdownNavigation items={items} defaultValue={slug} />
|
<DropdownNavigation items={items} defaultValue={slug} />
|
||||||
{items.map((section, i) => (
|
{items.map((section, i) => (
|
||||||
<ul className={classes.section} key={i}>
|
<ul className={classes.section} key={i}>
|
||||||
<li className={classNames('h0', classes.label)}>{section.label}</li>
|
<li className={classes.label}>{section.label}</li>
|
||||||
{section.items.map(({ text, url, onClick, menu, isActive }, j) => {
|
{section.items.map(({ text, url, onClick, menu, isActive }, j) => {
|
||||||
const currentMenu = menu || pageMenu || []
|
const currentMenu = menu || pageMenu || []
|
||||||
const active = isActive || slug === url
|
const active = isActive || slug === url
|
||||||
|
|
|
@ -45,6 +45,9 @@ $crumb-bar: 2px
|
||||||
&:hover
|
&:hover
|
||||||
color: var(--color-dark)
|
color: var(--color-dark)
|
||||||
|
|
||||||
|
.active-heading
|
||||||
|
display: none
|
||||||
|
|
||||||
.crumbs
|
.crumbs
|
||||||
display: block
|
display: block
|
||||||
padding-top: 1rem
|
padding-top: 1rem
|
||||||
|
|
Loading…
Reference in New Issue
Block a user