docs: redesigned navigation (#9525)

Redesign navigation bar to reflect new design and allow for dropdowns

Closes DX-943

www/packages/docs-ui/src/layouts/main-content.tsx

@@ -50,7 +50,8 @@ export const MainContentLayout = ({
           "flex-col items-center",
           "h-full w-full",
           "overflow-y-scroll overflow-x-hidden",
-          "md:rounded-t-docs_DEFAULT shadow-elevation-card-rest",
+          "md:rounded-t-docs_DEFAULT",
+          "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
           mainWrapperClasses
         )}
         id="main"

www/packages/docs-ui/src/layouts/root.tsx

@@ -1,7 +1,6 @@
 import React from "react"
 import clsx from "clsx"
 import { RootProviders, Sidebar, SidebarProps } from "@/components"
-import { MobileNavigation } from "../components/MobileNavigation"
 import { Toc } from "../components/Toc"
 import { MainContentLayout, MainContentLayoutProps } from "./main-content"
 
@@ -14,6 +13,7 @@ export type RootLayoutProps = {
   showPagination?: boolean
   feedbackComponent?: React.ReactNode
   editComponent?: React.ReactNode
+  showBreadcrumbs?: boolean
 } & MainContentLayoutProps
 
 export const RootLayout = ({
@@ -38,7 +38,6 @@ export const RootLayout = ({
       >
         <RootProviders>
           <ProvidersComponent>
-            <MobileNavigation />
             <Sidebar {...sidebarProps} />
             <div className={clsx("relative", "h-screen", "flex")}>
               <MainContentLayout {...mainProps} />

www/packages/docs-ui/src/layouts/tight.tsx

@@ -1,13 +1,14 @@
 import React from "react"
 import { RootLayout, RootLayoutProps } from "./root"
 import clsx from "clsx"
-import { Pagination } from ".."
+import { Breadcrumbs, Pagination } from ".."
 
 export const TightLayout = ({
   children,
   showPagination,
   feedbackComponent,
   editComponent,
+  showBreadcrumbs = true,
   ...props
 }: RootLayoutProps) => {
   return (
@@ -21,6 +22,7 @@ export const TightLayout = ({
           "px-docs_1 md:px-docs_4 lg:px-0"
         )}
       >
+        {showBreadcrumbs && <Breadcrumbs />}
         {children}
         {feedbackComponent}
         {showPagination && <Pagination />}

www/packages/docs-ui/src/layouts/wide.tsx

@@ -1,13 +1,14 @@
 import React from "react"
 import { RootLayout, RootLayoutProps } from "./root"
 import clsx from "clsx"
-import { Pagination } from ".."
+import { Breadcrumbs, Pagination } from ".."
 
 export const WideLayout = ({
   children,
   showPagination,
   feedbackComponent,
   editComponent,
+  showBreadcrumbs = true,
   ...props
 }: RootLayoutProps) => {
   return (
@@ -22,6 +23,7 @@ export const WideLayout = ({
           "lg:max-w-lg-wide-content xl:max-w-xl-wide-content relative mt-4 w-full flex-1 lg:mt-7"
         )}
       >
+        {showBreadcrumbs && <Breadcrumbs />}
         {children}
         {feedbackComponent}
         {showPagination && <Pagination />}