docs: fix sidebar items not showing if they have same title in API reference (#11122)

www/apps/api-reference/components/Tags/Paths/index.tsx

@@ -37,6 +37,7 @@ const TagPaths = ({ tag, className, paths }: TagPathsProps) => {
         addItems(pathItems, {
           section: SidebarItemSections.DEFAULT,
           parent: {
+            type: "category",
             title: tag.name,
             path: "",
             changeLoaded: true,

www/apps/api-reference/components/Tags/Section/Schema/index.tsx

@@ -73,8 +73,9 @@ const TagSectionSchema = ({ schema, tagName }: TagSectionSchemaProps) => {
       {
         section: SidebarItemSections.DEFAULT,
         parent: {
+          type: "category",
           title: tagName,
-          path: tagSlugName,
+          path: "",
           changeLoaded: true,
         },
         indexPosition: 0,

www/apps/api-reference/providers/base-specs.tsx

@@ -1,19 +1,12 @@
 "use client"
 
 import { ExpandedDocument, SecuritySchemeObject } from "@/types/openapi"
-import {
+import { ReactNode, createContext, useContext, useEffect, useMemo } from "react"
-  ReactNode,
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-} from "react"
 import { SidebarItem, SidebarItemSections } from "types"
 import getSectionId from "../utils/get-section-id"
 import getTagChildSidebarItems from "../utils/get-tag-child-sidebar-items"
-import { usePathname, useRouter } from "next/navigation"
+import { useRouter } from "next/navigation"
-import { usePrevious, useSidebar } from "docs-ui"
+import { useSidebar } from "docs-ui"
 
 type BaseSpecsContextType = {
   baseSpecs: ExpandedDocument | undefined
@@ -29,10 +22,7 @@ type BaseSpecsProviderProps = {
 
 const BaseSpecsProvider = ({ children, baseSpecs }: BaseSpecsProviderProps) => {
   const router = useRouter()
-  const { items, activePath, addItems, setActivePath, resetItems } =
+  const { activePath, addItems, setActivePath, resetItems } = useSidebar()
-    useSidebar()
-  const pathname = usePathname()
-  const prevPathName = usePrevious(pathname)
 
   const getSecuritySchema = (
     securityName: string

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

@@ -21,6 +21,7 @@ import {
   InteractiveSidebarItem,
   SidebarItemCategory,
   SidebarItemLinkWithParent,
+  SidebarItemTypes,
 } from "types"
 import { useIsBrowser } from "../BrowserProvider"
 
@@ -70,6 +71,7 @@ export const SidebarContext = createContext<SidebarContextType | null>(null)
 export type ActionOptionsType = {
   section?: SidebarItemSections
   parent?: {
+    type: SidebarItemTypes
     path: string
     title: string
     changeLoaded?: boolean
@@ -106,17 +108,20 @@ export const isSidebarItemLink = (
 }
 
 const areItemsEqual = (itemA: SidebarItem, itemB: SidebarItem): boolean => {
-  if (itemA.type === "separator" || itemB.type === "separator") {
+  if (
+    itemA.type === "separator" ||
+    itemB.type === "separator" ||
+    itemA.type !== itemB.type
+  ) {
     return false
   }
   const hasSameTitle = itemA.title === itemB.title
   const hasSamePath =
-    isSidebarItemLink(itemA) &&
+    !isSidebarItemLink(itemA) ||
-    isSidebarItemLink(itemB) &&
+    !isSidebarItemLink(itemB) ||
-    itemA.type === itemB.type &&
     itemA.path === itemB.path
 
-  return hasSameTitle || hasSamePath
+  return hasSameTitle && hasSamePath
 }
 
 const findItem = (

www/packages/types/src/sidebar.ts

@@ -17,6 +17,8 @@ export type SidebarItemCommon = {
   description?: string
 }
 
+export type SidebarItemTypes = "category" | "sub-category" | "link" | "ref"
+
 export type SidebarItemLink = SidebarItemCommon & {
   type: "link" | "ref"
   path: string