3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-04 01:09:20 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): expanded sidebar categories by default (#2682)

Browse source 
* feat: update sidebar categ to  take collapsed prop

* feat: add extra sidebars collapsed test

* fix: only mutate item.collapsed if necessary

* feat: update docs for SidebarItemCategory

* fix: update snapshots

* fix: update json to match new sidebar schema

* fix: update last snapshot

* refactor: check if item should be expanded

* docs: update sidebar categories section

* refactor: use new collpased on docusaurus

* feat: only highlight category for active page

* fix: check for window

* refactor: use ExecutionEnviornment

* refactor: make isCategoryOfActivePage pure

* fix: rename docs to docs-introduction in sidebars

* Update docs.md

* misc: remove setting for every sidebar

Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>
This commit is contained in:
Joe Previte 2020-05-27 22:17:19 -07:00 • committed by GitHub
parent d8ebe8b2e4
commit 07b9e9cd62
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 273 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

38
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
View file

@ -6,6 +6,7 @@
*/
import React, {useState, useCallback} from 'react';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import classnames from 'classnames';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useAnnouncementBarContext from '@theme/hooks/useAnnouncementBarContext';
@ -44,6 +45,28 @@ function DocSidebarItem({
setCollapsed((state) => !state);
});
// Make sure we have access to the window
const activePageRelativeUrl = ExecutionEnvironment.canUseDOM
? window.location.pathname + window.location.search
: null;
// We need to know if the category item
// is the parent of the active page
// If it is, this returns true and make sure to highlight this category
const isCategoryOfActivePage = (_items, _activePageRelativeUrl) => {
// Make sure we have items
if (typeof _items !== 'undefined') {
return _items.some((categoryItem) => {
// Grab the category item's href
const childHref = categoryItem.href;
// Compare it to the current active page
return _activePageRelativeUrl === childHref;
});
}
return false;
};
switch (type) {
case 'category':
return (
@ -56,7 +79,10 @@ function DocSidebarItem({
<a
className={classnames('menu__link', {
'menu__link--sublist': collapsible,
'menu__link--active': collapsible && !item.collapsed,
'menu__link--active':
collapsible &&
!item.collapsed &&
isCategoryOfActivePage(items, activePageRelativeUrl),
})}
href="#!"
onClick={collapsible ? handleItemClick : undefined}
@ -116,8 +142,18 @@ function mutateSidebarCollapsingState(item, path) {
items
.map((childItem) => mutateSidebarCollapsingState(childItem, path))
.filter((val) => val).length > 0;
// Check if the user wants the category to be expanded by default
const shouldExpand = item.collapsed === false;
// eslint-disable-next-line no-param-reassign
item.collapsed = !anyChildItemsActive;
if (shouldExpand) {
// eslint-disable-next-line no-param-reassign
item.collapsed = false;
}
return anyChildItemsActive;
}