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/BorderedIcon/index.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-import { Bordered } from "@/components/Bordered"
 import clsx from "clsx"
 import { IconProps } from "@medusajs/icons/dist/types"
 
@@ -15,37 +14,35 @@ export type BorderedIconProps = {
 export const BorderedIcon = ({
   icon = "",
   IconComponent = null,
-  wrapperClassName,
   iconWrapperClassName,
   iconClassName,
   iconColorClassName = "",
 }: BorderedIconProps) => {
   return (
-    <Bordered wrapperClassName={wrapperClassName}>
-      <span
-        className={clsx(
-          "rounded-docs_xs p-docs_0.125 bg-medusa-bg-component inline-flex items-center justify-center",
-          iconWrapperClassName
-        )}
-      >
-        {!IconComponent && (
-          <img
-            src={icon || ""}
-            className={clsx(iconClassName, "bordered-icon")}
-            alt=""
-          />
-        )}
-        {IconComponent && (
-          <IconComponent
-            className={clsx(
-              "text-medusa-fg-subtle",
-              iconClassName,
-              "bordered-icon",
-              iconColorClassName
-            )}
-          />
-        )}
-      </span>
-    </Bordered>
+    <span
+      className={clsx(
+        "rounded-docs_sm p-docs_0.125 bg-medusa-bg-base inline-flex items-center justify-center",
+        "shadow-border-base dark:shadow-border-base-dark",
+        iconWrapperClassName
+      )}
+    >
+      {!IconComponent && (
+        <img
+          src={icon || ""}
+          className={clsx(iconClassName, "bordered-icon")}
+          alt=""
+        />
+      )}
+      {IconComponent && (
+        <IconComponent
+          className={clsx(
+            "text-medusa-fg-subtle rounded-docs_sm",
+            iconClassName,
+            "bordered-icon",
+            iconColorClassName
+          )}
+        />
+      )}
+    </span>
   )
 }