fix: use existing function instead

Author: JoeChenJ

src/layouts/Docs.tsx

@@ -1,5 +1,3 @@
-import { join } from "path"
-
 import { MDXRemoteProps } from "next-mdx-remote"
 import type { HTMLAttributes } from "react"
 
@@ -36,6 +34,7 @@ import YouTube from "@/components/YouTube"
 
 import { cn } from "@/lib/utils/cn"
 import { getEditPath } from "@/lib/utils/editPath"
+import { addSlashes } from "@/lib/utils/url"
 
 const baseHeadingClasses = "font-bold scroll-mt-40 break-words"
 
@@ -122,7 +121,6 @@ export const DocsLayout = ({
 }: DocsLayoutProps) => {
   const isPageIncomplete = !!frontmatter.incomplete
   const absoluteEditPath = getEditPath(slug)
-  const slugWithSlashes = join("/", slug, "/")
 
   return (
     <div className="flex w-full flex-col border-b">
@@ -136,7 +134,7 @@ export const DocsLayout = ({
         className="flex justify-between bg-background-highlight lg:pe-8"
         dir={contentNotTranslated ? "ltr" : "unset"}
       >
-        <SideNav path={slugWithSlashes} />
+        <SideNav path={addSlashes(slug)} />
         <MainArticle className="min-w-0 flex-1 px-8 pb-8 pt-8 md:px-16 md:pb-16 md:pt-12">
           <H1 id="top">{frontmatter.title}</H1>
           <FileContributors