docs: redesign footer (#8651)

www/packages/docs-ui/src/components/Sidebar/Item/index.tsx

@@ -5,7 +5,7 @@ import { SidebarItem as SidebarItemType } from "types"
 import { SidebarItemCategory } from "./Category"
 import { SidebarItemLink } from "./Link"
 import { SidebarItemSubCategory } from "./SubCategory"
-import { SidebarSeparator } from "../Separator"
+import { DottedSeparator } from "../.."
 
 export type SidebarItemProps = {
   item: SidebarItemType
@@ -24,7 +24,7 @@ export const SidebarItem = ({
       return (
         <>
           <SidebarItemCategory item={item} {...props} />
-          {hasNextItems && <SidebarSeparator />}
+          {hasNextItems && <DottedSeparator />}
         </>
       )
     case "sub-category":
@@ -32,6 +32,6 @@ export const SidebarItem = ({
     case "link":
       return <SidebarItemLink item={item} {...props} />
     case "separator":
-      return <SidebarSeparator />
+      return <DottedSeparator />
   }
 }

www/packages/docs-ui/src/components/Sidebar/Separator/index.tsx

@@ -1,22 +0,0 @@
-"use client"
-
-import clsx from "clsx"
-import React from "react"
-
-export type SidebarSeparatorProps = {
-  className?: string
-}
-
-export const SidebarSeparator = ({ className }: SidebarSeparatorProps) => {
-  return (
-    <div className="px-docs_0.75">
-      <span
-        className={clsx(
-          "block w-full h-px relative my-docs_0.75 bg-border-dotted",
-          "bg-[length:4px_1px] bg-repeat-x bg-bottom",
-          className
-        )}
-      ></span>
-    </div>
-  )
-}

www/packages/docs-ui/src/components/Sidebar/Top/index.tsx

@@ -3,9 +3,9 @@
 import React from "react"
 import { SidebarChild } from "../Child"
 import { InteractiveSidebarItem } from "types"
-import { SidebarSeparator } from "../Separator"
 import { SidebarTopMobileClose } from "./MobileClose"
 import { SidebarTopMedusaMenu } from "./MedusaMenu"
+import { DottedSeparator } from "../../.."
 
 export type SidebarTopProps = {
   parentItem?: InteractiveSidebarItem
@@ -20,11 +20,11 @@ export const SidebarTop = React.forwardRef<HTMLDivElement, SidebarTopProps>(
           <SidebarTopMedusaMenu />
           {parentItem && (
             <>
-              <SidebarSeparator />
+              <DottedSeparator />
               <SidebarChild item={parentItem} />
             </>
           )}
-          <SidebarSeparator className="!my-0" />
+          <DottedSeparator className="!my-0" />
         </div>
       </div>
     )

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

@@ -3,12 +3,11 @@
 import React, { useMemo, useRef } from "react"
 import { useSidebar } from "@/providers"
 import clsx from "clsx"
-import { Loading } from "@/components"
+import { DottedSeparator, Loading } from "@/components"
 import { SidebarItem } from "./Item"
 import { CSSTransition, SwitchTransition } from "react-transition-group"
 import { SidebarTop, SidebarTopProps } from "./Top"
 import useResizeObserver from "@react-hook/resize-observer"
-import { SidebarSeparator } from "./Separator"
 import { useClickOutside, useKeyboardShortcut } from "@/hooks"
 
 export type SidebarProps = {
@@ -131,7 +130,7 @@ export const Sidebar = ({
                       hasNextItems={index !== sidebarItems.default.length - 1}
                     />
                   ))}
-                  <SidebarSeparator />
+                  <DottedSeparator />
                 </div>
                 {/* DESKTOP SIDEBAR */}
                 <div className="mt-docs_0.75 lg:mt-0">