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

www/packages/docs-ui/src/utils/check-sidebar-item-visibility.ts

@@ -1,21 +1,23 @@
-const TOP_MARGIN = 57
-
 export function checkSidebarItemVisibility(
   item: HTMLElement,
-  withTransition = false
+  withTransition = false,
+  topMargin = 0
 ) {
   return withTransition
-    ? checkSidebarItemVisibilityTransition(item)
-    : checkSidebarItemVisibilityRelative(item)
+    ? checkSidebarItemVisibilityTransition(item, topMargin)
+    : checkSidebarItemVisibilityRelative(item, topMargin)
 }
 
-function checkSidebarItemVisibilityRelative(item: HTMLElement) {
+function checkSidebarItemVisibilityRelative(
+  item: HTMLElement,
+  topMargin: number
+) {
   const sidebar = document.getElementById("sidebar")
   if (!sidebar) {
     return false
   }
   const sidebarBoundingRect = sidebar.getBoundingClientRect()
-  const sidebarTop = sidebarBoundingRect.top - TOP_MARGIN
+  const sidebarTop = sidebarBoundingRect.top - topMargin
   const sidebarBottom = sidebarTop + sidebarBoundingRect.height
   const itemBoundingRect = item.getBoundingClientRect()
   const itemTop =
@@ -25,7 +27,10 @@ function checkSidebarItemVisibilityRelative(item: HTMLElement) {
   return itemTop >= sidebarTop && itemBottom <= sidebarBottom
 }
 
-function checkSidebarItemVisibilityTransition(item: HTMLElement) {
+function checkSidebarItemVisibilityTransition(
+  item: HTMLElement,
+  topMargin: number
+) {
   const sidebar = document.getElementById("sidebar")
   if (!sidebar) {
     return false
@@ -35,8 +40,8 @@ function checkSidebarItemVisibilityTransition(item: HTMLElement) {
   const activeItemBoundingRect = item.getBoundingClientRect()
 
   return (
-    activeItemBoundingRect.top >= TOP_MARGIN &&
-    activeItemBoundingRect.top - sidebarBoundingRect.height + TOP_MARGIN < 0 &&
+    activeItemBoundingRect.top >= topMargin &&
+    activeItemBoundingRect.top - sidebarBoundingRect.height + topMargin < 0 &&
     activeItemBoundingRect.bottom > 0
   )
 }

www/packages/docs-ui/src/utils/get-mobile-sidebar-items.ts

@@ -1,4 +1,4 @@
-import { SidebarItemType } from "types"
+import { SidebarItem } from "types"
 import { mobileSidebarItemsV1, mobileSidebarItemsV2 } from ".."
 
 type Options = {
@@ -9,10 +9,14 @@ type Options = {
 export function getMobileSidebarItems({
   baseUrl,
   version = "v1",
-}: Options): SidebarItemType[] {
+}: Options): SidebarItem[] {
   const mobileItems =
     version === "v2" ? mobileSidebarItemsV2 : mobileSidebarItemsV1
   return mobileItems.map((item) => {
+    if (item.type !== "link") {
+      return item
+    }
+
     return {
       ...item,
       path: `${baseUrl}${item.path}`,

www/packages/docs-ui/src/utils/get-navbar-items.ts

@@ -1,4 +1,5 @@
-import { NavbarItem, navbarItemsV1, navbarItemsV2 } from ".."
+import { NavigationDropdownItem } from "types"
+import { navDropdownItemsV1, navDropdownItemsV2 } from ".."
 
 type Options = {
   basePath: string
@@ -6,24 +7,21 @@ type Options = {
   version?: "v1" | "v2"
 }
 
-export function getNavbarItems({
+export function getNavDropdownItems({
   basePath,
   activePath,
   version = "v1",
-}: Options): NavbarItem[] {
-  const navbarItems = version === "v2" ? navbarItemsV2 : navbarItemsV1
-  return navbarItems.map((item) => {
+}: Options): NavigationDropdownItem[] {
+  const items = version === "v2" ? navDropdownItemsV2 : navDropdownItemsV1
+  return items.map((item) => {
     if (item.type === "divider") {
       return item
     }
 
     return {
       ...item,
-      props: {
-        ...item.props,
-        isActive: activePath === item.props?.href,
-        href: `${basePath}${item.props?.href}`,
-      },
+      isActive: activePath === item.path,
+      path: `${basePath}${item.path}`,
     }
   })
 }

www/packages/docs-ui/src/utils/sidebar-attach-href-common-options.ts

@@ -1,16 +1,22 @@
-import { RawSidebarItemType } from "types"
+import { RawSidebarItem } from "types"
 
-const commonOptions: Partial<RawSidebarItemType> = {
+const commonOptions: Partial<RawSidebarItem> = {
   loaded: true,
   isPathHref: true,
 }
 
 export function sidebarAttachHrefCommonOptions(
-  sidebar: RawSidebarItemType[]
-): RawSidebarItemType[] {
-  return sidebar.map((item) => ({
-    ...commonOptions,
-    ...item,
-    children: sidebarAttachHrefCommonOptions(item.children || []),
-  }))
+  sidebar: RawSidebarItem[]
+): RawSidebarItem[] {
+  return sidebar.map((item) => {
+    if (item.type === "separator") {
+      return item
+    }
+
+    return {
+      ...commonOptions,
+      ...item,
+      children: sidebarAttachHrefCommonOptions(item.children || []),
+    }
+  })
 }