docs: preparations for preview (#7267)

* configured base paths + added development banner

* fix typelist site url

* added navbar and sidebar badges

* configure algolia filters

* remove AI assistant

* remove unused imports

* change navbar text and badge

* lint fixes

* fix build error

* add to api reference rewrites

* fix build error

* fix build errors in user-guide

* fix feedback component

* add parent title to pagination

* added breadcrumbs component

* remove user-guide links

* resolve todos

* fix details about authentication

* change documentation title

* lint content

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

@@ -11,7 +11,7 @@ export const SidebarBack = () => {
   return (
     <div
       className={clsx(
-        "my-docs_1.5 cursor-pointer",
+        "mb-docs_1.5 cursor-pointer",
         "flex items-center gap-docs_0.5 rounded-docs_sm px-docs_0.5 py-[6px] hover:no-underline",
         "border border-transparent",
         "text-medusa-fg-subtle text-medium-plus"

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

@@ -16,6 +16,8 @@ export type SidebarItemProps = {
   expandItems?: boolean
   currentLevel?: number
   isSidebarTitle?: boolean
+  sidebarHasParent?: boolean
+  isMobile?: boolean
 } & React.AllHTMLAttributes<HTMLLIElement>
 
 export const SidebarItem = ({
@@ -24,6 +26,8 @@ export const SidebarItem = ({
   expandItems = false,
   className,
   currentLevel = 1,
+  sidebarHasParent = false,
+  isMobile = false
 }: SidebarItemProps) => {
   const [showLoading, setShowLoading] = useState(false)
   const {
@@ -34,8 +38,8 @@ export const SidebarItem = ({
     sidebarRef,
   } = useSidebar()
   const active = useMemo(
-    () => isItemActive(item, nested),
-    [isItemActive, item, nested]
+    () => !isMobile && isItemActive(item, nested),
+    [isItemActive, item, nested, isMobile]
   )
   const collapsed = !expandItems && !isItemActive(item, true)
   const ref = useRef<HTMLLIElement>(null)
@@ -131,7 +135,11 @@ export const SidebarItem = ({
   return (
     <li
       className={clsx(
-        canHaveTitleStyling && !collapsed && "my-docs_1.5",
+        canHaveTitleStyling &&
+          !collapsed && [
+            !sidebarHasParent && "my-docs_1.5",
+            sidebarHasParent && "[&:not(:first-child)]:my-docs_1.5",
+          ],
         !canHaveTitleStyling &&
           !nested &&
           active &&

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

@@ -11,9 +11,9 @@ export const SidebarTitle = ({ item }: SidebarTitleProps) => {
   return (
     <Link
       className={clsx(
-        "flex items-center justify-between gap-docs_0.5 rounded-docs_sm px-docs_0.5 py-[6px] hover:no-underline",
+        "flex items-center justify-between gap-docs_0.5 rounded-docs_sm px-docs_0.5 pb-[6px] hover:no-underline",
         "border border-transparent",
-        "text-medusa-fg-subtle text-medium-plus"
+        "text-medusa-fg-subtle text-large-plus"
       )}
       href={item.isPathHref && item.path ? item.path : `#${item.path}`}
       replace={!item.isPathHref}

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

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useMemo } from "react"
+import React, { useMemo, useRef } from "react"
 import { useSidebar } from "@/providers"
 import clsx from "clsx"
 import { Loading } from "@/components"
@@ -12,11 +12,13 @@ import { CSSTransition, SwitchTransition } from "react-transition-group"
 export type SidebarProps = {
   className?: string
   expandItems?: boolean
+  banner?: React.ReactNode
 }
 
 export const Sidebar = ({
   className = "",
   expandItems = false,
+  banner,
 }: SidebarProps) => {
   const {
     items,
@@ -32,6 +34,11 @@ export const Sidebar = ({
     [items, currentItems]
   )
 
+  const sidebarHasParent = useMemo(
+    () => sidebarItems.parentItem !== undefined,
+    [sidebarItems]
+  )
+
   return (
     <aside
       className={clsx(
@@ -47,69 +54,76 @@ export const Sidebar = ({
         animationFillMode: "forwards",
       }}
     >
-      <SwitchTransition>
-        <CSSTransition
-          key={sidebarItems.parentItem?.title || "home"}
-          nodeRef={sidebarRef}
-          classNames={{
-            enter: "animate-fadeInLeft animate-fast",
-            exit: "animate-fadeOutLeft animate-fast",
-          }}
-          timeout={200}
-        >
-          <ul
-            className={clsx(
-              "sticky top-0 h-screen max-h-screen w-full list-none overflow-auto p-0",
-              "px-docs_1.5 pb-[57px] pt-docs_1.5"
-            )}
-            id="sidebar"
-            ref={sidebarRef}
+      <ul
+        className={clsx(
+          "sticky top-0 h-screen max-h-screen w-full list-none p-0",
+          "px-docs_1.5 pb-[57px] pt-docs_1.5",
+          "flex flex-col"
+        )}
+        id="sidebar"
+      >
+        {banner && <div className="mb-docs_1">{banner}</div>}
+        {sidebarItems.parentItem && (
+          <div className={clsx("mb-docs_1", !banner && "mt-docs_1.5")}>
+            <SidebarBack />
+            <SidebarTitle item={sidebarItems.parentItem} />
+          </div>
+        )}
+        <SwitchTransition>
+          <CSSTransition
+            key={sidebarItems.parentItem?.title || "home"}
+            nodeRef={sidebarRef}
+            classNames={{
+              enter: "animate-fadeInLeft animate-fast",
+              exit: "animate-fadeOutLeft animate-fast",
+            }}
+            timeout={200}
           >
-            {sidebarItems.parentItem && (
-              <>
-                <SidebarBack />
-                <SidebarTitle item={sidebarItems.parentItem} />
-              </>
-            )}
-            <div className="mb-docs_1.5 lg:hidden">
-              {!sidebarItems.mobile.length && !staticSidebarItems && (
-                <Loading className="px-0" />
-              )}
-              {sidebarItems.mobile.map((item, index) => (
-                <SidebarItem
-                  item={item}
-                  key={index}
-                  expandItems={expandItems}
-                />
-              ))}
+            <div className="overflow-auto" ref={sidebarRef}>
+              <div className={clsx("mb-docs_1.5 lg:hidden")}>
+                {!sidebarItems.mobile.length && !staticSidebarItems && (
+                  <Loading className="px-0" />
+                )}
+                {sidebarItems.mobile.map((item, index) => (
+                  <SidebarItem
+                    item={item}
+                    key={index}
+                    expandItems={expandItems}
+                    sidebarHasParent={sidebarHasParent}
+                    isMobile={true}
+                  />
+                ))}
+              </div>
+              <div className={clsx("mb-docs_1.5")}>
+                {!sidebarItems.top.length && !staticSidebarItems && (
+                  <Loading className="px-0" />
+                )}
+                {sidebarItems.top.map((item, index) => (
+                  <SidebarItem
+                    item={item}
+                    key={index}
+                    expandItems={expandItems}
+                    sidebarHasParent={sidebarHasParent}
+                  />
+                ))}
+              </div>
+              <div className="mb-docs_1.5">
+                {!sidebarItems.bottom.length && !staticSidebarItems && (
+                  <Loading className="px-0" />
+                )}
+                {sidebarItems.bottom.map((item, index) => (
+                  <SidebarItem
+                    item={item}
+                    key={index}
+                    expandItems={expandItems}
+                    sidebarHasParent={sidebarHasParent}
+                  />
+                ))}
+              </div>
             </div>
-            <div className="mb-docs_1.5">
-              {!sidebarItems.top.length && !staticSidebarItems && (
-                <Loading className="px-0" />
-              )}
-              {sidebarItems.top.map((item, index) => (
-                <SidebarItem
-                  item={item}
-                  key={index}
-                  expandItems={expandItems}
-                />
-              ))}
-            </div>
-            <div className="mb-docs_1.5">
-              {!sidebarItems.bottom.length && !staticSidebarItems && (
-                <Loading className="px-0" />
-              )}
-              {sidebarItems.bottom.map((item, index) => (
-                <SidebarItem
-                  item={item}
-                  key={index}
-                  expandItems={expandItems}
-                />
-              ))}
-            </div>
-          </ul>
-        </CSSTransition>
-      </SwitchTransition>
+          </CSSTransition>
+        </SwitchTransition>
+      </ul>
     </aside>
   )
 }