From e73046e7d540da82eebb703919408225e129bbaa Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 25 Nov 2023 17:24:05 +0800
Subject: [PATCH] feat: add custom sidebar item

---
 .../routes/Main/Content/CustomSidebarItem.tsx | 31 +++++++++++++++++++
 .../routes/Main/Content/Personal/Sidebar.tsx  |  8 ++---
 .../src/routes/Main/Navbar/CustomNavItem.tsx  |  4 ++-
 3 files changed, 36 insertions(+), 7 deletions(-)
 create mode 100644 client/web/src/routes/Main/Content/CustomSidebarItem.tsx

diff --git a/client/web/src/routes/Main/Content/CustomSidebarItem.tsx b/client/web/src/routes/Main/Content/CustomSidebarItem.tsx
new file mode 100644
index 00000000..a49dedb4
--- /dev/null
+++ b/client/web/src/routes/Main/Content/CustomSidebarItem.tsx
@@ -0,0 +1,31 @@
+import type { PluginCustomPanel } from '@/plugin/common';
+import React, { useMemo } from 'react';
+import { Icon } from 'tailchat-design';
+import { SidebarItem } from './SidebarItem';
+
+const defaultUseIsShow = () => true;
+
+/**
+ * 导航栏自定义选项
+ * 用于插件
+ */
+export const CustomSidebarItem: React.FC<{
+  panelInfo: PluginCustomPanel;
+}> = React.memo(({ panelInfo }) => {
+  const useIsShow = useMemo(() => panelInfo.useIsShow ?? defaultUseIsShow, []);
+  const isShow = useIsShow();
+
+  if (!isShow) {
+    return null;
+  }
+
+  return (
+    <SidebarItem
+      key={panelInfo.name}
+      name={panelInfo.label}
+      icon={<Icon icon={panelInfo.icon} />}
+      to={`/main/personal/custom/${panelInfo.name}`}
+    />
+  );
+});
+CustomSidebarItem.displayName = 'CustomSidebarItem';
diff --git a/client/web/src/routes/Main/Content/Personal/Sidebar.tsx b/client/web/src/routes/Main/Content/Personal/Sidebar.tsx
index 4ee0551c..c5278cb6 100644
--- a/client/web/src/routes/Main/Content/Personal/Sidebar.tsx
+++ b/client/web/src/routes/Main/Content/Personal/Sidebar.tsx
@@ -14,6 +14,7 @@ import { CreateDMConverse } from '@/components/modals/CreateDMConverse';
 import { SectionHeader } from '@/components/SectionHeader';
 import { CommonSidebarWrapper } from '@/components/CommonSidebarWrapper';
 import { pluginCustomPanel } from '@/plugin/common';
+import { CustomSidebarItem } from '../CustomSidebarItem';
 
 const SidebarSection: React.FC<
   PropsWithChildren<{
@@ -73,12 +74,7 @@ export const PersonalSidebar: React.FC = React.memo(() => {
         {pluginCustomPanel
           .filter((p) => p.position === 'personal')
           .map((p) => (
-            <SidebarItem
-              key={p.name}
-              name={p.label}
-              icon={<Icon icon={p.icon} />}
-              to={`/main/personal/custom/${p.name}`}
-            />
+            <CustomSidebarItem key={p.name} panelInfo={p} />
           ))}
 
         <SidebarSection
diff --git a/client/web/src/routes/Main/Navbar/CustomNavItem.tsx b/client/web/src/routes/Main/Navbar/CustomNavItem.tsx
index faece8b5..d8759375 100644
--- a/client/web/src/routes/Main/Navbar/CustomNavItem.tsx
+++ b/client/web/src/routes/Main/Navbar/CustomNavItem.tsx
@@ -12,10 +12,12 @@ const defaultUseIsShow = () => true;
  */
 export const NavbarCustomNavItem: React.FC<{
   panelInfo: PluginCustomPanel;
+  /**
+   * 是否包含背景
+   */
   withBg: boolean;
 }> = React.memo(({ panelInfo, withBg }) => {
   const useIsShow = useMemo(() => panelInfo.useIsShow ?? defaultUseIsShow, []);
-
   const isShow = useIsShow();
 
   if (!isShow) {