feat: update menu

idealjs · Jul 13, 2024 · fd14ab3 · fd14ab3
1 parent d5f25da
commit fd14ab3
Show file tree

Hide file tree

Showing 21 changed files with 361 additions and 223 deletions.
diff --git a/apps/website/app/components/Menu/MenuItem.tsx b/apps/website/app/components/Menu/MenuItem.tsx
@@ -0,0 +1,14 @@
+import { button, menuItem } from "@idealjs/camphora-styled";
+import clsx from "clsx";
+import React, { PropsWithChildren } from "react";
+
+interface IProps {
+  className?: string;
+}
+
+const MenuItem = (props: PropsWithChildren<IProps>) => {
+  const { className, children } = props;
+  return <li className={clsx(className, menuItem)}>{children}</li>;
+};
+
+export default MenuItem;
diff --git a/apps/website/app/components/Menu/index.tsx b/apps/website/app/components/Menu/index.tsx
@@ -0,0 +1,20 @@
+import { menu, paper } from "@idealjs/camphora-styled";
+import clsx from "clsx";
+import React, { PropsWithChildren } from "react";
+
+interface IProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const Menu = (props: PropsWithChildren<IProps>) => {
+  const { className, children, style } = props;
+
+  return (
+    <ul className={clsx(className, menu)} style={style}>
+      {children}
+    </ul>
+  );
+};
+
+export default Menu;
diff --git a/apps/website/app/components/Menu/page.tsx b/apps/website/app/components/Menu/page.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+import Preview from "../Preview";
+import Menu from ".";
+import MenuItem from "./MenuItem";
+
+const page = () => {
+  return (
+    <div>
+      <Preview style={{ height: "300px" }}>
+        <Menu style={{ width: "124px" }}>
+          <MenuItem>
+            Trees
+            <Menu style={{ width: "124px" }}>
+              <MenuItem>🌳 Deciduous</MenuItem>
+              <MenuItem>🌲 Evergreen</MenuItem>
+              <MenuItem>🌴 Palm</MenuItem>
+            </Menu>
+          </MenuItem>
+          <MenuItem>
+            Vegetables
+            <Menu style={{ width: "124px" }}>
+              <MenuItem>🍆 Eggplant</MenuItem>
+              <MenuItem>🥔 Potato</MenuItem>
+              <MenuItem>🥕 Carrot</MenuItem>
+            </Menu>
+          </MenuItem>
+          <MenuItem>
+            Fruits
+            <Menu style={{ width: "124px" }}>
+              <MenuItem>🍇 Grapes</MenuItem>
+              <MenuItem>🍊 Tangerine</MenuItem>
+              <MenuItem>🍋 Lemon</MenuItem>
+            </Menu>
+          </MenuItem>
+        </Menu>
+      </Preview>
+    </div>
+  );
+};
+
+export default page;
diff --git a/apps/website/app/components/Preview/index.tsx b/apps/website/app/components/Preview/index.tsx
@@ -0,0 +1,19 @@
+import { preview } from "@idealjs/camphora-styled";
+import clsx from "clsx";
+import React, { CSSProperties, PropsWithChildren } from "react";
+
+interface IProps {
+  className?: string;
+  style?: CSSProperties;
+}
+
+const Preview = (props: PropsWithChildren<IProps>) => {
+  const { className, children, style } = props;
+  return (
+    <div className={clsx(preview, className)} style={style}>
+      {children}
+    </div>
+  );
+};
+
+export default Preview;
diff --git a/apps/website/components/MarkdownTabs/context.ts b/apps/website/components/MarkdownTabs/context.ts
@@ -1,7 +1,7 @@
 import serverContext, {
   getServerContext,
   setServerContext,
-} from "../utils/serverContext";
+} from "@/components/utils/serverContext";
 
 const groupNameContext = serverContext<string | null>(null);
 

diff --git a/apps/website/features/LayoutDrawer/index.tsx b/apps/website/features/LayoutDrawer/index.tsx
@@ -1,11 +1,5 @@
-import {
-  button,
-  buttonGhost,
-  input,
-  menu,
-  menuItem,
-  paper,
-} from "@idealjs/camphora-styled";
+import { menu, menuItem, paper, vars } from "@idealjs/camphora-styled";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import clsx from "clsx";
 import Link from "next/link";
 import React, { PropsWithChildren } from "react";
@@ -28,34 +22,29 @@ const LayoutDrawer = (props: PropsWithChildren<IProps>) => {
         {children}
       </DrawerContent>
       <DrawerSide drawerId="main-drawer">
-        <ul
-          className={clsx(menu, paper)}
-          style={{
-            minHeight: "100%",
-            padding: "12px 16px 0px 16px",
-          }}
-        >
-          <li>
-            <SearchInput />
-          </li>
-          <li style={{ height: "8px" }}></li>
-          <li>
-            <Link
-              href={"/tutorials/quickstart"}
-              className={clsx(menuItem, button, buttonGhost)}
-            >
-              quick start
-            </Link>
-          </li>
-          <li>
-            <Link
-              href={"/docs/components"}
-              className={clsx(menuItem, button, buttonGhost)}
-            >
-              components
-            </Link>
-          </li>
-        </ul>
+        <div className={paper} style={{ height: "100%" }}>
+          <ul
+            className={clsx(menu)}
+            style={assignInlineVars({
+              [vars.shadow.menu]: "0",
+            })}
+          >
+            <li>
+              <SearchInput />
+            </li>
+            <li style={{ height: "8px" }}></li>
+            <li>
+              <Link href={"/tutorials/quickstart"} className={clsx(menuItem)}>
+                quick start
+              </Link>
+            </li>
+            <li>
+              <Link href={"/docs/components"} className={clsx(menuItem)}>
+                components
+              </Link>
+            </li>
+          </ul>
+        </div>
       </DrawerSide>
     </Drawer>
   );

diff --git a/apps/website/features/Navbar/LanguageDropdown.tsx b/apps/website/features/Navbar/LanguageDropdown.tsx
@@ -25,22 +25,12 @@ const LanguageDropdown = () => {
       >
         language
       </button>
-      <ul
-        tabIndex={0}
-        className={clsx(
-          dropdownContent,
-          card,
-          cardXs,
-          cardSeondary,
-          cardShadow,
-          menu
-        )}
-      >
+      <ul tabIndex={0} className={clsx(dropdownContent, menu)}>
         <li>
-          <div className={clsx(menuItem, button, buttonGhost)}>english</div>
+          <div className={clsx(menuItem)}>english</div>
         </li>
         <li>
-          <div className={clsx(menuItem, button, buttonGhost)}>中文</div>
+          <div className={clsx(menuItem)}>中文</div>
         </li>
       </ul>
     </div>

diff --git a/apps/website/features/Navbar/ThemeDropdown.tsx b/apps/website/features/Navbar/ThemeDropdown.tsx
@@ -25,22 +25,12 @@ const ThemeDropdown = () => {
       >
         theme
       </button>
-      <ul
-        tabIndex={0}
-        className={clsx(
-          dropdownContent,
-          card,
-          cardXs,
-          cardSeondary,
-          cardShadow,
-          menu
-        )}
-      >
+      <ul tabIndex={0} className={clsx(dropdownContent, menu)}>
         <li>
-          <div className={clsx(menuItem, button, buttonGhost)}>dark</div>
+          <div className={clsx(menuItem)}>dark</div>
         </li>
         <li>
-          <div className={clsx(menuItem, button, buttonGhost)}>light</div>
+          <div className={clsx(menuItem)}>light</div>
         </li>
       </ul>
     </div>

diff --git a/apps/website/features/Navbar/VersionButton.tsx b/apps/website/features/Navbar/VersionButton.tsx
diff --git a/apps/website/features/Navbar/VersionDropdown.tsx b/apps/website/features/Navbar/VersionDropdown.tsx
@@ -0,0 +1,117 @@
+import {
+  button,
+  buttonGhost,
+  dropdown,
+  dropdownContent,
+  menu,
+  menuItem,
+} from "@idealjs/camphora-styled";
+import clsx from "clsx";
+import getConfig from "next/config";
+import Link from "next/link";
+import React from "react";
+
+import { selectedButtonStyle } from "./style.css";
+
+const { publicRuntimeConfig } = getConfig();
+const version = publicRuntimeConfig?.version;
+
+const VersionDropdown = () => {
+  return (
+    <div className={dropdown}>
+      <div
+        tabIndex={0}
+        className={clsx(button, buttonGhost, selectedButtonStyle)}
+      >
+        {version}
+      </div>
+      <ul tabIndex={0} className={clsx(dropdownContent, menu)}>
+        <li>
+          <Link href={"/docs/changelog"} className={clsx(menuItem)}>
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5.81836 6.72729V14H13.0911"
+                stroke="currentColor"
+                strokeWidth="4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C16.598 4 10.1351 8.02111 6.67677 13.9981"
+                stroke="currentColor"
+                strokeWidth="4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M24.005 12L24.0038 24.0088L32.4832 32.4882"
+                stroke="currentColor"
+                strokeWidth="4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+            </svg>
+            Changelog
+          </Link>
+        </li>
+        <li>
+          <Link href={"/docs/roadmap"} className={clsx(menuItem)}>
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17 12L4 6V36L17 42L31 36L44 42V12L31 6L17 12Z"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M31 6V36"
+                stroke="currentColor"
+                strokeWidth="4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M17 12V42"
+                stroke="currentColor"
+                strokeWidth="4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M10.5 9L17 12L31 6L37.5 9"
+                stroke="currentColor"
+                strokeWidth="4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+              <path
+                d="M10.5 39L17 42L31 36L37.5 39"
+                stroke="currentColor"
+                strokeWidth="4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+            </svg>
+            Roadmap
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default VersionDropdown;