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/apps/book/utils/number-sidebar-items.mjs

@@ -1,14 +1,34 @@
 /**
  *
- * @param {import("@/types").SidebarItemType[]} sidebarItems - The items to add numbers to their titles
+ * @param {import("@/types").SidebarItem[]} sidebarItems - The items to add numbers to their titles
  * @param {number[]} numbering - The current numbering level
- * @returns {import("@/types").SidebarItemType[]} The modified sidebar items
+ * @returns {import("@/types").SidebarItem[]} The modified sidebar items
  */
 export default function numberSidebarItems(sidebarItems, numbering = [1]) {
+  // TODO generate chapter titles
   if (!numbering.length) {
     numbering.push(1)
   }
+  const isTopItems = numbering.length === 1
+  /** @type {import("@/types").SidebarItem[]} */
+  const numberedItems = []
+  /** @type {import("@/types").SidebarItem | undefined} */
+  let parentItem
   sidebarItems.forEach((item) => {
+    if (item.type === "separator") {
+      ;(parentItem?.children || numberedItems).push(item)
+    }
+    if (isTopItems) {
+      // Add chapter category
+      numberedItems.push({
+        type: "category",
+        title: `Chapter ${padNumber(numbering[0])}`,
+        children: [],
+        loaded: true,
+      })
+
+      parentItem = numberedItems[numberedItems.length - 1]
+    }
     // append current number to the item's title
     item.number = `${numbering.join(".")}.`
     item.title = `${item.number} ${item.title.trim()}`
@@ -17,8 +37,19 @@ export default function numberSidebarItems(sidebarItems, numbering = [1]) {
       item.children = numberSidebarItems(item.children, [...numbering, 1])
     }
 
+    ;(parentItem?.children || numberedItems).push(item)
+
     numbering[numbering.length - 1]++
   })
 
-  return sidebarItems
+  return numberedItems
+}
+
+function padNumber(number) {
+  number = number.toString()
+  if (number.length < 2) {
+    number = `0` + number
+  }
+
+  return number
 }

www/apps/book/utils/sidebar-attach-common-options.mjs

@@ -1,4 +1,4 @@
-/** @type {Partial<import("../providers").SidebarItemType>} */
+/** @type {Partial<import("@/types").SidebarItem[]>} */
 const commonOptions = {
   loaded: true,
   isPathHref: true,
@@ -6,13 +6,26 @@ const commonOptions = {
 
 /**
  *
- * @param {import("../providers").SidebarItemType[]} sidebar
- * @returns {import("../providers").SidebarItemType[]}
+ * @param {import("@/types").SidebarItem[]} sidebar
+ * @param {boolean} nested
+ * @returns {import("@/types").SidebarItem[]}
  */
-export function sidebarAttachHrefCommonOptions(sidebar) {
-  return sidebar.map((item) => ({
-    ...commonOptions,
-    ...item,
-    children: sidebarAttachHrefCommonOptions(item.children || []),
-  }))
+export function sidebarAttachHrefCommonOptions(sidebar, nested = false) {
+  return sidebar.map((item) => {
+    if (item.type === "separator") {
+      return item
+    }
+
+    const updatedItem = {
+      ...commonOptions,
+      ...item,
+      children: sidebarAttachHrefCommonOptions(item.children || [], true),
+    }
+
+    if (updatedItem.type !== "category" && !nested) {
+      updatedItem.childrenSameLevel = true
+    }
+
+    return updatedItem
+  })
 }