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/ui/src/providers/index.tsx

@@ -11,6 +11,7 @@ import {
 import SearchProvider from "./search"
 import SidebarProvider from "./sidebar"
 import { siteConfig } from "../config/site"
+import { MainNavProvider } from "./main-nav"
 
 type ProvidersProps = {
   children: React.ReactNode
@@ -25,7 +26,9 @@ const Providers = ({ children }: ProvidersProps) => {
             <ModalProvider>
               <ScrollControllerProvider scrollableSelector="#main">
                 <SidebarProvider>
-                  <SearchProvider>{children}</SearchProvider>
+                  <MainNavProvider>
+                    <SearchProvider>{children}</SearchProvider>
+                  </MainNavProvider>
                 </SidebarProvider>
               </ScrollControllerProvider>
             </ModalProvider>

www/apps/ui/src/providers/main-nav.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import {
+  formatReportLink,
+  getNavDropdownItems,
+  MainNavProvider as UiMainNavProvider,
+  useIsBrowser,
+} from "docs-ui"
+import { useMemo } from "react"
+import { siteConfig } from "../config/site"
+import { basePathUrl } from "../lib/base-path-url"
+
+type MainNavProviderProps = {
+  children?: React.ReactNode
+}
+
+export const MainNavProvider = ({ children }: MainNavProviderProps) => {
+  const isBrowser = useIsBrowser()
+  const navigationDropdownItems = useMemo(
+    () =>
+      getNavDropdownItems({
+        basePath: siteConfig.baseUrl,
+        activePath: basePathUrl(),
+        version: "v1",
+      }),
+    []
+  )
+
+  const reportLink = useMemo(
+    () => formatReportLink("UI Docs", isBrowser ? document.title : "", "ui"),
+    [isBrowser]
+  )
+
+  return (
+    <UiMainNavProvider
+      navItems={navigationDropdownItems}
+      reportIssueLink={reportLink}
+    >
+      {children}
+    </UiMainNavProvider>
+  )
+}

www/apps/ui/src/providers/sidebar.tsx

@@ -10,6 +10,7 @@ type SidebarProviderProps = {
 
 const SidebarProvider = ({ children }: SidebarProviderProps) => {
   const { scrollableElement } = useScrollController()
+
   return (
     <UiSidebarProvider
       initialItems={docsConfig.sidebar}