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/api-reference/providers/index.tsx

@@ -13,6 +13,7 @@ import BaseSpecsProvider from "./base-specs"
 import SidebarProvider from "./sidebar"
 import SearchProvider from "./search"
 import { config } from "../config"
+import { MainNavProvider } from "./main-nav"
 
 type ProvidersProps = {
   children?: React.ReactNode
@@ -28,9 +29,11 @@ const Providers = ({ children }: ProvidersProps) => {
               <BaseSpecsProvider>
                 <ScrollControllerProvider scrollableSelector="#main">
                   <SidebarProvider>
-                    <SearchProvider>
-                      <MobileProvider>{children}</MobileProvider>
-                    </SearchProvider>
+                    <MainNavProvider>
+                      <SearchProvider>
+                        <MobileProvider>{children}</MobileProvider>
+                      </SearchProvider>
+                    </MainNavProvider>
                   </SidebarProvider>
                 </ScrollControllerProvider>
               </BaseSpecsProvider>

www/apps/api-reference/providers/main-nav.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import {
+  formatReportLink,
+  getNavDropdownItems,
+  MainNavProvider as UiMainNavProvider,
+  useIsBrowser,
+} from "docs-ui"
+import { useMemo } from "react"
+import { config } from "../config"
+import { usePathname } from "next/navigation"
+import basePathUrl from "../utils/base-path-url"
+
+type MainNavProviderProps = {
+  children?: React.ReactNode
+}
+
+export const MainNavProvider = ({ children }: MainNavProviderProps) => {
+  const isBrowser = useIsBrowser()
+  const pathname = usePathname()
+  const navigationDropdownItems = useMemo(
+    () =>
+      getNavDropdownItems({
+        basePath: config.baseUrl,
+        activePath: basePathUrl(pathname),
+        version: "v2",
+      }),
+    [pathname]
+  )
+
+  const reportLink = useMemo(
+    () =>
+      formatReportLink(
+        config.titleSuffix || "",
+        isBrowser ? document.title : ""
+      ),
+    [isBrowser]
+  )
+
+  return (
+    <UiMainNavProvider
+      navItems={navigationDropdownItems}
+      reportIssueLink={reportLink}
+    >
+      {children}
+    </UiMainNavProvider>
+  )
+}

www/apps/api-reference/providers/page-title.tsx

@@ -3,6 +3,7 @@
 import { createContext, useEffect } from "react"
 import { capitalize, useSidebar } from "docs-ui"
 import { useArea } from "./area"
+import { SidebarItemLink } from "types"
 
 const PageTitleContext = createContext(null)
 
@@ -25,7 +26,9 @@ const PageTitleProvider = ({ children }: PageTitleProviderProps) => {
         document.title = `${activeItem?.title} - ${titleSuffix}`
       } else {
         // find the child that matches the active path
-        const item = activeItem?.children?.find((i) => i.path === activePath)
+        const item = activeItem?.children?.find(
+          (i) => i.type === "link" && i.path === activePath
+        ) as SidebarItemLink
         if (item) {
           document.title = `${item.title} - ${titleSuffix}`
         }

www/apps/api-reference/providers/sidebar.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 import {
   SidebarProvider as UiSidebarProvider,
   usePageLoading,
@@ -6,8 +7,8 @@ import {
   useScrollController,
 } from "docs-ui"
 import { config } from "../config"
-import { usePathname } from "next/navigation"
 import { useCallback } from "react"
+import { usePathname } from "next/navigation"
 
 type SidebarProviderProps = {
   children?: React.ReactNode
@@ -17,11 +18,11 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => {
   const { isLoading, setIsLoading } = usePageLoading()
   const { scrollableElement } = useScrollController()
   const pathname = usePathname()
-  const prevPathname = usePrevious(pathname)
+  const prevPathName = usePrevious(pathname)
 
   const resetOnCondition = useCallback(
-    () => prevPathname !== undefined && prevPathname !== pathname,
-    [pathname, prevPathname]
+    () => prevPathName !== undefined && pathname !== prevPathName,
+    [pathname, prevPathName]
   )
 
   return (