docs: redesign sidebar (#8408)
* initial changes * redesign the sidebar + nav drawer * changes to sidebar items * finish up sidebar redesign * support new sidebar in resources * general fixes * integrate in ui * support api reference * refactor * integrate in user guide * docs: fix build errors * fix user guide build * more refactoring * added banner * added bottom logo + icon * fix up sidebar * fix up paddings * fix shadow bottom * docs: add table of content (#8445) * add toc types * implement toc functionality * finished toc redesign * redesigned table of content * mobile fixes * truncate text in toc * mobile fixes * merge fixes * implement redesign * add hide sidebar * add menu action item * finish up hide sidebar design * implement redesign in resources * integrate in api reference * integrate changes in ui * fixes to api reference scrolling * fix build error * fix build errors * fixes * fixes to sidebar * general fixes * fix active category not closing * fix long titles
This commit is contained in:
Shahed Nasser
GitHub
@@ -2,7 +2,8 @@
|
||||
|
||||
import React, { useMemo } from "react"
|
||||
import { Card, CardList, MDXComponents, useSidebar } from "../.."
|
||||
import { SidebarItemType } from "types"
|
||||
import { InteractiveSidebarItem, SidebarItem, SidebarItemLink } from "types"
|
||||
import slugify from "slugify"
|
||||
|
||||
type ChildDocsProps = {
|
||||
onlyTopLevel?: boolean
|
||||
@@ -30,16 +31,19 @@ export const ChildDocs = ({
|
||||
: "all"
|
||||
}, [showItems, hideItems])
|
||||
|
||||
const filterCondition = (item: SidebarItemType): boolean => {
|
||||
const filterCondition = (item: SidebarItem): boolean => {
|
||||
if (item.type === "separator") {
|
||||
return false
|
||||
}
|
||||
switch (filterType) {
|
||||
case "hide":
|
||||
return (
|
||||
(!item.path || !hideItems.includes(item.path)) &&
|
||||
(item.type !== "link" || !hideItems.includes(item.path)) &&
|
||||
!hideItems.includes(item.title)
|
||||
)
|
||||
case "show":
|
||||
return (
|
||||
(item.path !== undefined && showItems!.includes(item.path)) ||
|
||||
(item.type === "link" && showItems!.includes(item.path)) ||
|
||||
showItems!.includes(item.title)
|
||||
)
|
||||
case "all":
|
||||
@@ -47,12 +51,16 @@ export const ChildDocs = ({
|
||||
}
|
||||
}
|
||||
|
||||
const filterItems = (items: SidebarItemType[]): SidebarItemType[] => {
|
||||
const filterItems = (items: SidebarItem[]): SidebarItem[] => {
|
||||
return items
|
||||
.filter(filterCondition)
|
||||
.map((item) => Object.assign({}, item))
|
||||
.map((item) => {
|
||||
if (item.children && filterType === "hide") {
|
||||
if (
|
||||
item.type !== "separator" &&
|
||||
item.children &&
|
||||
filterType === "hide"
|
||||
) {
|
||||
item.children = filterItems(item.children)
|
||||
}
|
||||
|
||||
@@ -67,8 +75,7 @@ export const ChildDocs = ({
|
||||
? Object.assign({}, currentItems)
|
||||
: undefined
|
||||
: {
|
||||
top: [...(getActiveItem()?.children || [])],
|
||||
bottom: [],
|
||||
default: [...(getActiveItem()?.children || [])],
|
||||
}
|
||||
if (filterType === "all" || !targetItems) {
|
||||
return targetItems
|
||||
@@ -76,25 +83,34 @@ export const ChildDocs = ({
|
||||
|
||||
return {
|
||||
...targetItems,
|
||||
top: filterItems(targetItems.top),
|
||||
bottom: filterItems(targetItems.bottom),
|
||||
default: filterItems(targetItems.default),
|
||||
}
|
||||
}, [currentItems, type, getActiveItem, filterItems])
|
||||
|
||||
const filterNonInteractiveItems = (
|
||||
items: SidebarItem[] | undefined
|
||||
): InteractiveSidebarItem[] => {
|
||||
return (
|
||||
(items?.filter(
|
||||
(item) => item.type !== "separator"
|
||||
) as InteractiveSidebarItem[]) || []
|
||||
)
|
||||
}
|
||||
|
||||
const getChildrenForLevel = (
|
||||
item: SidebarItemType,
|
||||
item: InteractiveSidebarItem,
|
||||
currentLevel = 1
|
||||
): SidebarItemType[] | undefined => {
|
||||
): InteractiveSidebarItem[] | undefined => {
|
||||
if (currentLevel === childLevel) {
|
||||
return item.children
|
||||
return filterNonInteractiveItems(item.children)
|
||||
}
|
||||
if (!item.children) {
|
||||
return
|
||||
}
|
||||
|
||||
const childrenResult: SidebarItemType[] = []
|
||||
const childrenResult: InteractiveSidebarItem[] = []
|
||||
|
||||
item.children.forEach((child) => {
|
||||
filterNonInteractiveItems(item.children).forEach((child) => {
|
||||
const childChildren = getChildrenForLevel(child, currentLevel + 1)
|
||||
|
||||
if (!childChildren) {
|
||||
@@ -107,20 +123,34 @@ export const ChildDocs = ({
|
||||
return childrenResult
|
||||
}
|
||||
|
||||
const getTopLevelElms = (items?: SidebarItemType[]) => (
|
||||
<CardList
|
||||
items={
|
||||
items?.map((childItem) => ({
|
||||
title: childItem.title,
|
||||
href: childItem.path,
|
||||
showLinkIcon: false,
|
||||
})) || []
|
||||
}
|
||||
/>
|
||||
)
|
||||
const getTopLevelElms = (items?: SidebarItem[]) => {
|
||||
return (
|
||||
<CardList
|
||||
items={
|
||||
filterNonInteractiveItems(items).map((childItem) => {
|
||||
const href =
|
||||
childItem.type === "link"
|
||||
? childItem.path
|
||||
: childItem.children?.length
|
||||
? (
|
||||
childItem.children.find(
|
||||
(item) => item.type === "link"
|
||||
) as SidebarItemLink
|
||||
)?.path
|
||||
: "#"
|
||||
return {
|
||||
title: childItem.title,
|
||||
href,
|
||||
showLinkIcon: false,
|
||||
}
|
||||
}) || []
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const getAllLevelsElms = (items?: SidebarItemType[]) =>
|
||||
items?.map((item, key) => {
|
||||
const getAllLevelsElms = (items?: SidebarItem[]) =>
|
||||
filterNonInteractiveItems(items).map((item, key) => {
|
||||
const itemChildren = getChildrenForLevel(item)
|
||||
const HeadingComponent = itemChildren?.length
|
||||
? MDXComponents["h2"]
|
||||
@@ -130,12 +160,16 @@ export const ChildDocs = ({
|
||||
<React.Fragment key={key}>
|
||||
{HeadingComponent && (
|
||||
<>
|
||||
{!hideTitle && <HeadingComponent>{item.title}</HeadingComponent>}
|
||||
{!hideTitle && (
|
||||
<HeadingComponent id={slugify(item.title)}>
|
||||
{item.title}
|
||||
</HeadingComponent>
|
||||
)}
|
||||
<CardList
|
||||
items={
|
||||
itemChildren?.map((childItem) => ({
|
||||
title: childItem.title,
|
||||
href: childItem.path,
|
||||
href: childItem.type === "link" ? childItem.path : "",
|
||||
showLinkIcon: false,
|
||||
})) || []
|
||||
}
|
||||
@@ -143,20 +177,19 @@ export const ChildDocs = ({
|
||||
</>
|
||||
)}
|
||||
{!HeadingComponent && (
|
||||
<Card title={item.title} href={item.path} showLinkIcon={false} />
|
||||
<Card
|
||||
title={item.title}
|
||||
href={item.type === "link" ? item.path : ""}
|
||||
showLinkIcon={false}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
)
|
||||
})
|
||||
|
||||
const getElms = (items?: SidebarItemType[]) => {
|
||||
const getElms = (items?: SidebarItem[]) => {
|
||||
return onlyTopLevel ? getTopLevelElms(items) : getAllLevelsElms(items)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{getElms(filteredItems?.top)}
|
||||
{getElms(filteredItems?.bottom)}
|
||||
</>
|
||||
)
|
||||
return <>{getElms(filteredItems?.default)}</>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user