docs: redesigned navigation (#9525)

Redesign navigation bar to reflect new design and allow for dropdowns

Closes DX-943

www/apps/api-reference/app/layout.tsx

@@ -34,6 +34,7 @@ export default function RootLayout({
       bodyClassName={clsx(inter.variable, robotoMono.variable)}
       showToc={false}
       showBanner={false}
+      showBreadcrumbs={false}
     >
       {children}
     </WideLayout>

www/apps/api-reference/config/index.ts

@@ -1,5 +1,4 @@
 import { DocsConfig } from "types"
-import { getMobileSidebarItems } from "docs-ui"
 
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
 
@@ -16,9 +15,10 @@ export const config: DocsConfig = {
         loaded: true,
       },
     ],
-    mobile: getMobileSidebarItems({
-      baseUrl,
-      version: "v2",
-    }),
+    mobile: [],
+  },
+  project: {
+    title: "API Reference",
+    key: "api-reference",
   },
 }

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

@@ -8,8 +8,6 @@ import {
 } 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
@@ -17,15 +15,12 @@ type MainNavProviderProps = {
 
 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(

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

@@ -3,7 +3,7 @@
 import {
   usePageLoading,
   SearchProvider as UiSearchProvider,
-  searchFiltersV2,
+  searchFilters,
   AiAssistantIcon,
   AiAssistantProvider,
 } from "docs-ui"
@@ -51,7 +51,7 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
         checkInternalPattern: new RegExp(
           `^${config.baseUrl}${basePathUrl(`/(admin|store)`)}`
         ),
-        filterOptions: searchFiltersV2,
+        filterOptions: searchFilters,
       }}
       commands={[
         {

www/apps/book/config/index.ts

@@ -7,5 +7,12 @@ export const config: DocsConfig = {
   titleSuffix: "Medusa v2 Docs",
   baseUrl,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
-  sidebar: sidebarConfig(baseUrl),
+  sidebar: sidebarConfig,
+  project: {
+    title: "Documentation",
+    key: "book",
+  },
+  breadcrumbOptions: {
+    showCategories: false,
+  },
 }

www/apps/book/config/sidebar.tsx

@@ -1,4 +1,4 @@
-import { Badge, getMobileSidebarItems } from "docs-ui"
+import { Badge } from "docs-ui"
 import type { SidebarConfig, SidebarItem } from "@/types"
 import { sidebar } from "../sidebar.mjs"
 
@@ -20,12 +20,7 @@ const normalizeSidebarItems = (items: SidebarItem[]) =>
     return item
   })
 
-export const sidebarConfig = (baseUrl: string): SidebarConfig => {
-  return {
-    default: normalizeSidebarItems(sidebar),
-    mobile: getMobileSidebarItems({
-      baseUrl,
-      version: "v2",
-    }),
-  }
+export const sidebarConfig: SidebarConfig = {
+  default: normalizeSidebarItems(sidebar),
+  mobile: [],
 }

www/apps/book/providers/main-nav.tsx

@@ -8,7 +8,6 @@ import {
 } from "docs-ui"
 import { useMemo } from "react"
 import { config } from "../config"
-import { basePathUrl } from "../utils/base-path-url"
 import { usePathname } from "next/navigation"
 import { generatedEditDates } from "../generated/edit-dates.mjs"
 
@@ -23,8 +22,6 @@ export const MainNavProvider = ({ children }: MainNavProviderProps) => {
     () =>
       getNavDropdownItems({
         basePath: config.baseUrl,
-        activePath: basePathUrl(),
-        version: "v2",
       }),
     []
   )
@@ -51,9 +48,6 @@ export const MainNavProvider = ({ children }: MainNavProviderProps) => {
       navItems={navigationDropdownItems}
       reportIssueLink={reportLink}
       editDate={editDate}
-      breadcrumbOptions={{
-        showCategories: false,
-      }}
     >
       {children}
     </UiMainNavProvider>

www/apps/book/providers/search.tsx

@@ -4,7 +4,7 @@ import {
   AiAssistantIcon,
   AiAssistantProvider,
   SearchProvider as UiSearchProvider,
-  searchFiltersV2,
+  searchFilters,
 } from "docs-ui"
 import { config } from "../config"
 
@@ -50,7 +50,7 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
         checkInternalPattern: new RegExp(
           `^${config.baseUrl}/v2/([^(resources)])*`
         ),
-        filterOptions: searchFiltersV2,
+        filterOptions: searchFilters,
       }}
       commands={[
         {

www/apps/resources/config/index.ts

@@ -1,5 +1,4 @@
 import { DocsConfig, SidebarItem } from "types"
-import { getMobileSidebarItems } from "docs-ui"
 import { generatedSidebar } from "../generated/sidebar.mjs"
 
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
@@ -10,9 +9,13 @@ export const config: DocsConfig = {
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   sidebar: {
     default: generatedSidebar as SidebarItem[],
-    mobile: getMobileSidebarItems({
-      baseUrl,
-      version: "v2",
-    }),
+    mobile: [],
+  },
+  project: {
+    title: "Development Resources",
+    key: "resources",
+  },
+  breadcrumbOptions: {
+    showCategories: true,
   },
 }

www/apps/resources/providers/main-nav.tsx

@@ -8,7 +8,6 @@ import {
 } from "docs-ui"
 import { useMemo } from "react"
 import { config } from "../config"
-import { basePathUrl } from "../utils/base-path-url"
 import { usePathname } from "next/navigation"
 import { generatedEditDates } from "../generated/edit-dates.mjs"
 
@@ -23,14 +22,8 @@ export const MainNavProvider = ({ children }: MainNavProviderProps) => {
     () =>
       getNavDropdownItems({
         basePath: config.baseUrl,
-        activePath: basePathUrl(
-          pathname.startsWith("/commerce-modules")
-            ? "/commerce-modules"
-            : undefined
-        ),
-        version: "v2",
       }),
-    [pathname]
+    []
   )
 
   const reportLink = useMemo(

www/apps/resources/providers/search.tsx

@@ -4,7 +4,7 @@ import {
   AiAssistantIcon,
   AiAssistantProvider,
   SearchProvider as UiSearchProvider,
-  searchFiltersV2,
+  searchFilters,
 } from "docs-ui"
 import { config } from "../config"
 
@@ -39,7 +39,7 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
           },
         ],
         checkInternalPattern: new RegExp(`^${config.baseUrl}/v2/resources/.*`),
-        filterOptions: searchFiltersV2,
+        filterOptions: searchFilters,
       }}
       commands={[
         {

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;
   }

www/apps/user-guide/config/index.ts

@@ -1,5 +1,4 @@
 import { DocsConfig, SidebarItem } from "types"
-import { getMobileSidebarItems } from "docs-ui"
 import { generatedSidebar as sidebar } from "@/generated/sidebar.mjs"
 
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
@@ -10,9 +9,13 @@ export const config: DocsConfig = {
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   sidebar: {
     default: sidebar as SidebarItem[],
-    mobile: getMobileSidebarItems({
-      baseUrl,
-      version: "v2",
-    }),
+    mobile: [],
+  },
+  project: {
+    title: "User Guide",
+    key: "user-guide",
+  },
+  breadcrumbOptions: {
+    showCategories: true,
   },
 }

www/apps/user-guide/providers/main-nav.tsx

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

www/apps/user-guide/providers/search.tsx

@@ -4,7 +4,7 @@ import {
   SearchProvider as UiSearchProvider,
   AiAssistantIcon,
   AiAssistantProvider,
-  searchFiltersV1,
+  searchFilters,
 } from "docs-ui"
 import { config } from "../config"
 
@@ -42,9 +42,10 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
           },
         ],
         checkInternalPattern: new RegExp(`^${config.baseUrl}/user-guide`),
-        filterOptions: searchFiltersV1,
+        filterOptions: searchFilters,
       }}
-      initialDefaultFilters={["user-guide"]}
+      // TODO change later when we have a user guide filter
+      initialDefaultFilters={["guides"]}
       commands={[
         {
           name: "ai-assistant",