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/hooks/use-scroll-utils/index.tsx

@@ -59,6 +59,10 @@ type ScrollController = {
   scrollableElement: Element | Window | undefined
   /** Retrieves the scroll top if the scrollable element */
   getScrolledTop: () => number
+  /** Scrolls to an element */
+  scrollToElement: (elm: HTMLElement) => void
+  /** Scrolls to a top value */
+  scrollToTop: (top: number, parentTop?: number) => void
 }
 
 function useScrollControllerContextValue({
@@ -83,6 +87,27 @@ function useScrollControllerContextValue({
     return scrollableElement ? getScrolledTopUtil(scrollableElement) : 0
   }
 
+  const scrollToElement = (elm: HTMLElement) => {
+    scrollToTop(elm.offsetTop)
+  }
+
+  const scrollToTop = (top: number, parentTop?: number) => {
+    const parentOffsetTop =
+      parentTop !== undefined
+        ? parentTop
+        : isElmWindow(scrollableElement)
+        ? 0
+        : scrollableElement instanceof HTMLElement
+        ? scrollableElement.offsetTop
+        : 0
+
+    scrollableElement?.scrollTo({
+      // 56 is the height of the navbar
+      // might need a better way to determine it.
+      top: top - parentOffsetTop - 56,
+    })
+  }
+
   return useMemo(
     () => ({
       scrollEventsEnabledRef,
@@ -94,6 +119,8 @@ function useScrollControllerContextValue({
       },
       scrollableElement,
       getScrolledTop,
+      scrollToElement,
+      scrollToTop,
     }),
     [scrollableElement]
   )