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
2024-08-15 12:13:13 +03:00
parent 4cb28531e5
commit b4f3b8a79d
157 changed files with 5080 additions and 2010 deletions
@@ -1,15 +1,65 @@
-import React from "react"
-import { Card, Link } from "../.."
+"use client"
+
+import React, { useEffect, useState } from "react"
+import { Button, useIsBrowser } from "../.."
+import { ExclamationCircleSolid, XMark } from "@medusajs/icons"
+import clsx from "clsx"
+
+const LOCAL_STORAGE_KEY = "banner-v2"
+
+export type Bannerv2Props = {
+  className?: string
+}
+
+export const Bannerv2 = ({ className }: Bannerv2Props) => {
+  const [show, setShow] = useState(false)
+  const isBrowser = useIsBrowser()
+
+  useEffect(() => {
+    if (!isBrowser) {
+      return
+    }
+
+    const localStorageValue = localStorage.getItem(LOCAL_STORAGE_KEY)
+    if (!localStorageValue) {
+      setShow(true)
+    }
+  }, [isBrowser])
+
+  const handleClose = () => {
+    setShow(false)
+    localStorage.setItem(LOCAL_STORAGE_KEY, "true")
+  }

-export const Bannerv2 = () => {
  return (
-    <Card>
-      This documentation is for Medusa v2, which isn&apos;t ready for
-      production.
-      <br />
-      <br />
-      For production-use, refer to{" "}
-      <Link href="https://docs.medusajs.com">this documentation</Link> instead.
-    </Card>
+    <div
+      className={clsx(
+        "bg-medusa-bg-base hidden gap-docs_0.5 z-20",
+        "justify-between items-start rounded-docs_DEFAULT",
+        "p-docs_0.75 shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+        show && "lg:flex",
+        className
+      )}
+    >
+      <span className="p-[2.5px]">
+        <ExclamationCircleSolid className="text-medusa-tag-orange-icon" />
+      </span>
+      <div className="flex flex-col gap-docs_0.125 flex-1">
+        <span className="text-compact-small-plus text-medusa-fg-base">
+          Medusa v2 and Docs under development
+        </span>
+        <span className="text-compact-small text-medusa-fg-subtle">
+          We are actively working on building and improving. Some sections may
+          be incomplete or subject to change. Thank you for your patience.
+        </span>
+      </div>
+      <Button
+        variant="transparent-clear"
+        className="text-medusa-fg-muted"
+        onClick={handleClose}
+      >
+        <XMark />
+      </Button>
+    </div>
  )
 }