docs: redesign sidebar (#8408)

* initial changes

* redesign the sidebar + nav drawer

* changes to sidebar items

* finish up sidebar redesign

* support new sidebar in resources

* general fixes

* integrate in ui

* support api reference

* refactor

* integrate in user guide

* docs: fix build errors

* fix user guide build

* more refactoring

* added banner

* added bottom logo + icon

* fix up sidebar

* fix up paddings

* fix shadow bottom

* docs: add table of content (#8445)

* add toc types

* implement toc functionality

* finished toc redesign

* redesigned table of content

* mobile fixes

* truncate text in toc

* mobile fixes

* merge fixes

* implement redesign

* add hide sidebar

* add menu action item

* finish up hide sidebar design

* implement redesign in resources

* integrate in api reference

* integrate changes in ui

* fixes to api reference scrolling

* fix build error

* fix build errors

* fixes

* fixes to sidebar

* general fixes

* fix active category not closing

* fix long titles

www/packages/docs-ui/src/components/Menu/Action/index.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import clsx from "clsx"
+import React from "react"
+import { MenuItemAction } from "types"
+
+export type MenuActionProps = {
+  item: MenuItemAction
+}
+
+export const MenuAction = ({ item }: MenuActionProps) => {
+  return (
+    <span
+      className={clsx(
+        "flex py-docs_0.25 px-docs_0.5",
+        "gap-docs_0.5 rounded-docs_xs",
+        "hover:bg-medusa-bg-component-hover",
+        "text-medusa-fg-base cursor-pointer"
+      )}
+      tabIndex={-1}
+      onClick={item.action}
+    >
+      <span className="text-medusa-fg-subtle">{item.icon}</span>
+      <span className="text-compact-small flex-1">{item.title}</span>
+      {item.shortcut && (
+        <span className="text-medusa-fg-subtle text-compact-small">
+          {item.shortcut}
+        </span>
+      )}
+    </span>
+  )
+}

www/packages/docs-ui/src/components/Menu/Divider/index.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import React from "react"
+
+export const MenuDivider = () => {
+  return <hr className="bg-medusa-border-menu-top mt-[3px] mb-[3px]" />
+}

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

@@ -0,0 +1,27 @@
+"use client"
+
+import clsx from "clsx"
+import Link from "next/link"
+import React from "react"
+import { MenuItemLink } from "types"
+
+export type MenuItemProps = {
+  item: MenuItemLink
+}
+
+export const MenuItem = ({ item }: MenuItemProps) => {
+  return (
+    <Link
+      className={clsx(
+        "flex py-docs_0.25 px-docs_0.5",
+        "gap-docs_0.5 rounded-docs_xs",
+        "hover:bg-medusa-bg-component-hover",
+        "text-medusa-fg-base"
+      )}
+      href={item.link}
+    >
+      <span className="text-medusa-fg-subtle">{item.icon}</span>
+      <span className="text-compact-small">{item.title}</span>
+    </Link>
+  )
+}

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

@@ -0,0 +1,31 @@
+import clsx from "clsx"
+import React from "react"
+import { MenuItem as MenuItemType } from "types"
+import { MenuItem } from "./Item"
+import { MenuDivider } from "./Divider"
+import { MenuAction } from "./Action"
+
+export type MenuProps = {
+  items: MenuItemType[]
+  className?: string
+}
+
+export const Menu = ({ items, className }: MenuProps) => {
+  return (
+    <div
+      className={clsx(
+        "bg-medusa-bg-component p-docs_0.25 rounded-docs_DEFAULT",
+        "shadow-elevation-flyout dark:shadow-elevation-flyout-dark",
+        className
+      )}
+    >
+      {items.map((item, index) => (
+        <React.Fragment key={index}>
+          {item.type === "link" && <MenuItem item={item} />}
+          {item.type === "action" && <MenuAction item={item} />}
+          {item.type === "divider" && <MenuDivider />}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}