docs: add documentation for Locking Module (#11824)

* add locking docs

* fix main navbar

* added implementation example links

* generate refs

* update architecture

* fix vale error

www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx

@@ -38,6 +38,7 @@ export const MainNavItemDropdown = ({
               className={clsx("transition-transform", isOpen && "rotate-180")}
             />
           }
+          className="!flex"
         />
       )
     }

www/packages/docs-ui/src/components/MainNav/Items/Link/index.tsx

@@ -9,19 +9,22 @@ type MainNavItemLinkProps = {
   item: NavigationItemLink
   isActive: boolean
   icon?: React.ReactNode
+  className?: string
 }
 
 export const MainNavItemLink = ({
   item,
   isActive,
   icon,
+  className,
 }: MainNavItemLinkProps) => {
   return (
     <LinkButton
       href={item.link}
       className={clsx(
         isActive && "text-medusa-fg-base",
-        !isActive && "text-medusa-fg-muted hover:text-medusa-fg-subtle"
+        !isActive && "text-medusa-fg-muted hover:text-medusa-fg-subtle",
+        className
       )}
     >
       {item.title}

www/packages/docs-ui/src/constants.tsx

@@ -30,6 +30,7 @@ export const navDropdownItems: NavigationItem[] = [
   {
     type: "dropdown",
     title: "Build",
+    project: "resources",
     children: [
       {
         type: "link",
@@ -57,6 +58,7 @@ export const navDropdownItems: NavigationItem[] = [
     type: "dropdown",
     title: "Tools",
     link: "/resources/tools",
+    project: "resources",
     children: [
       {
         type: "sub-menu",
@@ -94,6 +96,8 @@ export const navDropdownItems: NavigationItem[] = [
   {
     type: "dropdown",
     title: "Reference",
+    project: "resources",
+    link: "/resources/references-overview",
     children: [
       {
         type: "link",

www/packages/docs-ui/src/providers/MainNav/index.tsx

@@ -2,7 +2,7 @@
 
 import { usePathname } from "next/navigation"
 import React, { createContext, useContext, useMemo } from "react"
-import { NavigationItem } from "types"
+import { MenuItem, NavigationItem, NavigationItemDropdown } from "types"
 import { useSiteConfig } from "../SiteConifg"
 
 export type MainNavContext = {
@@ -28,6 +28,46 @@ export const MainNavProvider = ({
 
   const baseUrl = `${config.baseUrl}${config.basePath}`
 
+  const findActiveItem = (
+    items: NavigationItemDropdown["children"],
+    currentUrl: string
+  ) => {
+    let item: MenuItem | undefined
+    let fallbackIndex: number | undefined
+    items.some((childItem, index) => {
+      if (childItem.type !== "link" && childItem.type !== "sub-menu") {
+        return false
+      }
+
+      if (childItem.type === "sub-menu") {
+        const activeChildRes = findActiveItem(childItem.items, currentUrl)
+        item = activeChildRes.item
+        fallbackIndex = activeChildRes.fallbackIndex
+        return !!item
+      }
+
+      const isItemActive = currentUrl.startsWith(childItem.link)
+
+      if (!isItemActive) {
+        return false
+      }
+
+      if (childItem.useAsFallback && fallbackIndex === undefined) {
+        fallbackIndex = index
+        return false
+      }
+
+      item = childItem
+
+      return true
+    })
+
+    return {
+      item,
+      fallbackIndex,
+    }
+  }
+
   const activeItemIndex = useMemo(() => {
     const currentUrl = `${baseUrl}${pathname}`.replace(/\/$/, "")
 
@@ -35,24 +75,15 @@ export const MainNavProvider = ({
 
     const index = navItems.findIndex((item, index) => {
       if (item.type === "dropdown") {
-        return item.children.some((childItem) => {
-          if (childItem.type !== "link") {
-            return
-          }
+        const { item: activeChild, fallbackIndex: childFallbackIndex } =
+          findActiveItem(item.children, currentUrl)
 
-          const isItemActive = currentUrl.startsWith(childItem.link)
+        if (activeChild) {
+          fallbackIndex = childFallbackIndex
+          return true
+        }
 
-          if (
-            isItemActive &&
-            childItem.useAsFallback &&
-            fallbackIndex === undefined
-          ) {
-            fallbackIndex = index
-            return false
-          }
-
-          return isItemActive
-        })
+        return item.link && currentUrl.startsWith(item.link)
       }
 
       if (item.project && item.project !== config.project.key) {