diff --git a/website/src/components/sidebar.js b/website/src/components/sidebar.js index 541cc1260..27c71e70f 100644 --- a/website/src/components/sidebar.js +++ b/website/src/components/sidebar.js @@ -7,6 +7,18 @@ import Link from './link' import Dropdown from './dropdown' 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 }) => { return (
@@ -28,6 +40,7 @@ const Sidebar = ({ items, pageMenu, slug }) => { const [initialized, setInitialized] = useState(false) const [activeSection, setActiveSection] = useState(null) const activeRef = useRef() + const activeHeading = getActiveHeading(items, slug) useEffect(() => { const handleInView = ({ detail }) => setActiveSection(detail) @@ -45,10 +58,13 @@ const Sidebar = ({ items, pageMenu, slug }) => { return ( +

+ {activeHeading} +

{items.map((section, i) => (
    -
  • {section.label}
  • +
  • {section.label}
  • {section.items.map(({ text, url, onClick, menu, isActive }, j) => { const currentMenu = menu || pageMenu || [] const active = isActive || slug === url diff --git a/website/src/styles/sidebar.module.sass b/website/src/styles/sidebar.module.sass index 3163ee5f0..c26da5074 100644 --- a/website/src/styles/sidebar.module.sass +++ b/website/src/styles/sidebar.module.sass @@ -45,6 +45,9 @@ $crumb-bar: 2px &:hover color: var(--color-dark) +.active-heading + display: none + .crumbs display: block padding-top: 1rem