docs: redesigned navigation (#9525)

Redesign navigation bar to reflect new design and allow for dropdowns

Closes DX-943

www/apps/ui/src/config/docs.tsx

@@ -1,6 +1,4 @@
-import { getMobileSidebarItems } from "docs-ui"
 import { SidebarSectionItems } from "types"
-import { siteConfig } from "./site"
 
 type DocsConfig = {
   sidebar: SidebarSectionItems
@@ -359,9 +357,6 @@ export const docsConfig: DocsConfig = {
         ],
       },
     ],
-    mobile: getMobileSidebarItems({
-      baseUrl: siteConfig.baseUrl,
-      version: "v1",
-    }),
+    mobile: [],
   },
 }

www/apps/ui/src/config/site.ts

@@ -19,4 +19,11 @@ export const siteConfig: SiteConfig = {
     default: [],
     mobile: [],
   },
+  project: {
+    title: "Medusa UI",
+    key: "ui",
+  },
+  breadcrumbOptions: {
+    showCategories: true,
+  },
 }

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

@@ -8,7 +8,6 @@ import {
 } from "docs-ui"
 import { useMemo } from "react"
 import { siteConfig } from "../config/site"
-import { basePathUrl } from "../lib/base-path-url"
 
 type MainNavProviderProps = {
   children?: React.ReactNode
@@ -20,8 +19,6 @@ export const MainNavProvider = ({ children }: MainNavProviderProps) => {
     () =>
       getNavDropdownItems({
         basePath: siteConfig.baseUrl,
-        activePath: basePathUrl(),
-        version: "v1",
       }),
     []
   )

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

@@ -4,7 +4,7 @@ import {
   AiAssistantIcon,
   AiAssistantProvider,
   SearchProvider as UiSearchProvider,
-  searchFiltersV1,
+  searchFilters,
 } from "docs-ui"
 import { absoluteUrl } from "../lib/absolute-url"
 
@@ -34,7 +34,7 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
           },
         ],
         checkInternalPattern: new RegExp(`^${absoluteUrl()}/ui`),
-        filterOptions: searchFiltersV1,
+        filterOptions: searchFilters,
       }}
       initialDefaultFilters={["ui"]}
       commands={[

www/apps/ui/src/styles/globals.css

@@ -30,6 +30,12 @@
     @apply text-ui-fg-subtle;
   }
 
+  /* Hack to hide navbar / toc when some components like prompt are opened. */
+  body[data-scroll-locked] .z-20,
+  body[data-scroll-locked] .z-10 {
+    z-index: 0 !important;
+  }
+
   body[data-modal="opened"] {
     @apply !overflow-hidden text-ui-fg-base;
   }