feat(web): update links on sidebar [VIZ-2201] (#1788)

wilfredmulenga · web-flow · commit 1cfdd5d8bc24 · 2025-08-28T10:45:03.000+09:00
diff --git a/web/src/app/features/Dashboard/index.tsx b/web/src/app/features/Dashboard/index.tsx
@@ -1,6 +1,5 @@
-import Tooltip from "@reearth/app/lib/reearth-ui/components/Tooltip";
 import { DEFAULT_SIDEBAR_WIDTH } from "@reearth/app/ui/components/Sidebar";
-import { useT } from "@reearth/services/i18n";
+import { useLang, useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import { FC, useMemo } from "react";
 
@@ -18,6 +17,8 @@ export type DashboardProps = {
 
 const Dashboard: FC<DashboardProps> = ({ workspaceId }) => {
   const t = useT();
+  const lang = useLang();
+
   const topTabItems: Omit<TabItems[], "active"> = useMemo(
     () => [
       { id: "projects", text: t("Projects"), icon: "grid" },
@@ -33,29 +34,31 @@ const Dashboard: FC<DashboardProps> = ({ workspaceId }) => {
         id: "plugin",
         text: t("Plugin Playground"),
         icon: "puzzlePiece",
-        tileComponent: <Tooltip type="experimental" />,
         path: "/plugin-playground"
       },
       {
         id: "documentation",
         text: t("Documentation"),
         icon: "book",
-        disabled: true
+        path:
+          lang === "ja"
+            ? "https://eukarya.notion.site/Visualizer-1a816e0fb16580bda8b2c2699f80399c"
+            : "https://eukarya.notion.site/Visualizer-User-manual-1a816e0fb16580e3a26ac6e35f23a166"
       },
       {
-        id: "community",
-        text: t("Community"),
-        icon: "usersFour",
-        disabled: true
+        id: "discord",
+        text: t("Discord"),
+        icon: "discord",
+        path: "https://discord.com/invite/XJhYkQQDAu"
       },
       {
-        id: "help",
-        text: t("Help & Support"),
+        id: "faq",
+        text: t("FAQ"),
         icon: "question",
-        disabled: true
+        path: "https://eukarya.notion.site/FAQ-19616e0fb16580f190aace7a918bfdd2"
       }
     ],
-    [t]
+    [t, lang]
   );
 
   const {
diff --git a/web/src/app/lib/reearth-ui/components/Icon/Icons/Discord.svg b/web/src/app/lib/reearth-ui/components/Icon/Icons/Discord.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9.75C6.41421 9.75 6.75 9.41421 6.75 9C6.75 8.58579 6.41421 8.25 6 8.25C5.58579 8.25 5.25 8.58579 5.25 9C5.25 9.41421 5.58579 9.75 6 9.75Z" fill="#6F6F6F"/>
+<path d="M10 9.75C10.4142 9.75 10.75 9.41421 10.75 9C10.75 8.58579 10.4142 8.25 10 8.25C9.58579 8.25 9.25 8.58579 9.25 9C9.25 9.41421 9.58579 9.75 10 9.75Z" fill="#6F6F6F"/>
+<path d="M4.65039 5.00027C5.73436 4.66099 6.86449 4.49231 8.00028 4.50027C9.13606 4.49231 10.2662 4.66099 11.3501 5.00025" stroke="#6F6F6F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.3501 11C10.2661 11.3393 9.13601 11.5079 8.00024 11.5C6.86446 11.5079 5.73435 11.3393 4.65039 11" stroke="#6F6F6F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.69044 11.38L10.442 12.8832C10.4921 12.9841 10.5749 13.0651 10.677 13.1129C10.7791 13.1607 10.8943 13.1724 11.004 13.1462C12.5376 12.7713 13.8598 12.1175 14.8227 11.2805C14.8963 11.2173 14.95 11.1342 14.9774 11.0412C15.0048 10.9482 15.0047 10.8492 14.9772 10.7562L12.8539 3.6783C12.8324 3.60693 12.7953 3.54124 12.7453 3.486C12.6953 3.43076 12.6336 3.38737 12.5647 3.35898C11.9648 3.11338 11.3444 2.92132 10.7107 2.78505C10.5899 2.75859 10.4637 2.77769 10.3561 2.83868C10.2486 2.89967 10.1675 2.99824 10.1282 3.11545L9.62988 4.61043" stroke="#6F6F6F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.3094 11.38L5.55782 12.8832C5.50774 12.9841 5.4249 13.0651 5.32282 13.1129C5.22075 13.1607 5.10549 13.1724 4.99587 13.1462C3.46221 12.7713 2.14007 12.1175 1.17712 11.2806C1.10358 11.2173 1.04988 11.1342 1.02247 11.0412C0.995062 10.9482 0.995115 10.8492 1.02262 10.7562L3.14598 3.6783C3.16742 3.60693 3.2045 3.54123 3.25452 3.486C3.30454 3.43076 3.36624 3.38737 3.43514 3.35898C4.03502 3.11337 4.65545 2.92132 5.28917 2.78505C5.40991 2.75859 5.53617 2.77769 5.64368 2.83868C5.7512 2.89967 5.83238 2.99824 5.87162 3.11545L6.36995 4.61043" stroke="#6F6F6F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/src/app/lib/reearth-ui/components/Icon/icons.ts b/web/src/app/lib/reearth-ui/components/Icon/icons.ts
@@ -48,6 +48,7 @@ import Dashboard from "./Icons/Dashboard.svg?react";
 import Data from "./Icons/Data.svg?react";
 import Desktop from "./Icons/Desktop.svg?react";
 import DeviceMobile from "./Icons/DeviceMobile.svg?react";
+import Discord from "./Icons/Discord.svg?react";
 import DotsSixVertical from "./Icons/DotsSixVertical.svg?react";
 import DotsThreeVertical from "./Icons/DotsThreeVertical.svg?react";
 import DownloadSimple from "./Icons/DownloadSimple.svg?react";
@@ -224,6 +225,7 @@ export default {
   data: Data,
   desktop: Desktop,
   deviceMobile: DeviceMobile,
+  discord: Discord,
   dotsSixVertical: DotsSixVertical,
   dotsThreeVertical: DotsThreeVertical,
   downloadSimple: DownloadSimple,
diff --git a/web/src/app/ui/components/Sidebar/index.tsx b/web/src/app/ui/components/Sidebar/index.tsx
@@ -113,7 +113,32 @@ export const SidebarMenuItem: FC<
   );
 };
 
-const StyledLinkButton = styled(Link)<{ disabled?: boolean }>(
+const StyledLinkButton = styled(
+  ({
+    disabled,
+    to,
+    children,
+    ...props
+  }: {
+    disabled?: boolean;
+    to: string;
+    children?: React.ReactNode;
+  }) => {
+    const isExternal = /^https?:\/\//.test(to);
+    if (isExternal) {
+      return (
+        <a href={to} target="_blank" rel="noopener noreferrer" {...props}>
+          {children}
+        </a>
+      );
+    }
+    return (
+      <Link to={to} {...props}>
+        {children}
+      </Link>
+    );
+  }
+)<{ disabled?: boolean; to: string; children?: React.ReactNode }>(
   ({ disabled }) => ({
     pointerEvents: disabled ? "none" : "auto",
     textDecoration: "none"
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
@@ -112,8 +112,8 @@ Members: ''
 Recycle bin: ''
 Plugin Playground: ''
 Documentation: ''
-Community: ''
-Help & Support: ''
+Discord: ''
+FAQ: ''
 Switch workspace: ''
 Personal: ''
 Team Workspace: ''
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
@@ -114,8 +114,8 @@ Members: メンバー
 Recycle bin: ゴミ箱
 Plugin Playground: プラグインプレイグラウンド
 Documentation: ドキュメント
-Community: コミュニティ
-Help & Support: ヘルプ＆サポート
+Discord: ''
+FAQ: ''
 Switch workspace: ワークスペース切り替え
 Personal: 個人
 Team Workspace: チームワークスペース
