Ver código fonte

feat(sidebar): add documentation link button

Add a Docs button next to the donate button in the sidebar and mobile drawer linking to https://docs.sanaei.dev/, with menu.docs translations across all 13 languages.
MHSanaei 21 horas atrás
pai
commit
451263f1db

+ 27 - 0
frontend/src/layouts/AppSidebar.css

@@ -75,6 +75,33 @@
   font-size: 16px;
 }
 
+.sidebar-docs {
+  background: transparent;
+  border: none;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ant-color-text-secondary);
+  text-decoration: none;
+  flex-shrink: 0;
+  transition: background-color 0.2s, transform 0.15s, color 0.2s;
+}
+
+.sidebar-docs:hover,
+.sidebar-docs:focus-visible {
+  background-color: color-mix(in srgb, var(--ant-color-primary) 12%, transparent);
+  color: var(--ant-color-primary);
+  transform: scale(1.08);
+  outline: none;
+}
+
+.sidebar-docs .anticon {
+  font-size: 16px;
+}
+
 .sidebar-theme-cycle {
   background: transparent;
   border: none;

+ 19 - 0
frontend/src/layouts/AppSidebar.tsx

@@ -23,6 +23,7 @@ import {
   MessageOutlined,
   MoonFilled,
   MoonOutlined,
+  ReadOutlined,
   SafetyOutlined,
   SettingOutlined,
   SunOutlined,
@@ -40,6 +41,7 @@ import './AppSidebar.css';
 
 const SIDEBAR_COLLAPSED_KEY = 'isSidebarCollapsed';
 const DONATE_URL = 'https://donate.sanaei.dev/';
+const DOCS_URL = 'https://docs.sanaei.dev/';
 const REPO_URL = 'https://github.com/MHSanaei/3x-ui';
 const LOGOUT_KEY = '__logout__';
 
@@ -83,6 +85,21 @@ function DonateButton({ ariaLabel }: { ariaLabel: string }) {
   );
 }
 
+function DocsButton({ ariaLabel }: { ariaLabel: string }) {
+  return (
+    <a
+      href={DOCS_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="sidebar-docs"
+      aria-label={ariaLabel}
+      title={ariaLabel}
+    >
+      <ReadOutlined />
+    </a>
+  );
+}
+
 function VersionBadge({ version, collapsed }: { version: string; collapsed?: boolean }) {
   if (!version) return null;
   const label = formatPanelVersion(version);
@@ -254,6 +271,7 @@ export default function AppSidebar() {
           </div>
           {!collapsed && (
             <div className="brand-actions">
+              <DocsButton ariaLabel={t('menu.docs') || 'Documentation'} />
               <DonateButton ariaLabel={t('menu.donate') || 'Donate'} />
               <ThemeCycleButton
                 id="theme-cycle"
@@ -306,6 +324,7 @@ export default function AppSidebar() {
             <span className="drawer-brand">3X-UI</span>
           </div>
           <div className="drawer-header-actions">
+            <DocsButton ariaLabel={t('menu.docs') || 'Documentation'} />
             <DonateButton ariaLabel={t('menu.donate') || 'Donate'} />
             <ThemeCycleButton
               id="theme-cycle-drawer"

+ 2 - 1
internal/web/translation/ar-EG.json

@@ -117,7 +117,8 @@
     "logout": "تسجيل خروج",
     "link": "إدارة",
     "donate": "تبرع",
-    "hosts": "المضيفات"
+    "hosts": "المضيفات",
+    "docs": "التوثيق"
   },
   "pages": {
     "login": {

+ 2 - 1
internal/web/translation/en-US.json

@@ -117,7 +117,8 @@
     "apiDocs": "API Docs",
     "logout": "Log Out",
     "link": "Manage",
-    "donate": "Donate"
+    "donate": "Donate",
+    "docs": "Documentation"
   },
   "pages": {
     "login": {

+ 2 - 1
internal/web/translation/es-ES.json

@@ -117,7 +117,8 @@
     "logout": "Cerrar Sesión",
     "link": "Gestionar",
     "donate": "Donar",
-    "hosts": "Hosts"
+    "hosts": "Hosts",
+    "docs": "Documentación"
   },
   "pages": {
     "login": {

+ 2 - 1
internal/web/translation/fa-IR.json

@@ -117,7 +117,8 @@
     "logout": "خروج",
     "link": "مدیریت",
     "donate": "حمایت مالی",
-    "hosts": "میزبان‌ها"
+    "hosts": "میزبان‌ها",
+    "docs": "مستندات"
   },
   "pages": {
     "login": {

+ 2 - 1
internal/web/translation/id-ID.json

@@ -117,7 +117,8 @@
     "logout": "Keluar",
     "link": "Kelola",
     "donate": "Donasi",
-    "hosts": "Host"
+    "hosts": "Host",
+    "docs": "Dokumentasi"
   },
   "pages": {
     "login": {

+ 2 - 1
internal/web/translation/ja-JP.json

@@ -117,7 +117,8 @@
     "logout": "ログアウト",
     "link": "リンク管理",
     "donate": "寄付",
-    "hosts": "ホスト"
+    "hosts": "ホスト",
+    "docs": "ドキュメント"
   },
   "pages": {
     "login": {

+ 2 - 1
internal/web/translation/pt-BR.json

@@ -117,7 +117,8 @@
     "logout": "Sair",
     "link": "Gerenciar",
     "donate": "Doar",
-    "hosts": "Hosts"
+    "hosts": "Hosts",
+    "docs": "Documentação"
   },
   "pages": {
     "login": {

+ 2 - 1
internal/web/translation/ru-RU.json

@@ -117,7 +117,8 @@
     "logout": "Выход",
     "link": "Управление",
     "donate": "Поддержать",
-    "hosts": "Хосты"
+    "hosts": "Хосты",
+    "docs": "Документация"
   },
   "pages": {
     "login": {

+ 2 - 1
internal/web/translation/tr-TR.json

@@ -117,7 +117,8 @@
     "logout": "Çıkış Yap",
     "link": "Yönet",
     "donate": "Bağış Yap",
-    "hosts": "Host'lar"
+    "hosts": "Host'lar",
+    "docs": "Belgeler"
   },
   "pages": {
     "login": {

+ 2 - 1
internal/web/translation/uk-UA.json

@@ -117,7 +117,8 @@
     "logout": "Вийти",
     "link": "Керувати",
     "donate": "Підтримати",
-    "hosts": "Хости"
+    "hosts": "Хости",
+    "docs": "Документація"
   },
   "pages": {
     "login": {

+ 2 - 1
internal/web/translation/vi-VN.json

@@ -117,7 +117,8 @@
     "logout": "Đăng xuất",
     "link": "Quản lý",
     "donate": "Quyên góp",
-    "hosts": "Hosts"
+    "hosts": "Hosts",
+    "docs": "Tài liệu"
   },
   "pages": {
     "login": {

+ 2 - 1
internal/web/translation/zh-CN.json

@@ -117,7 +117,8 @@
     "logout": "退出登录",
     "link": "管理",
     "donate": "捐赠",
-    "hosts": "主机"
+    "hosts": "主机",
+    "docs": "文档"
   },
   "pages": {
     "login": {

+ 2 - 1
internal/web/translation/zh-TW.json

@@ -117,7 +117,8 @@
     "logout": "退出登入",
     "link": "管理",
     "donate": "捐贈",
-    "hosts": "Hosts"
+    "hosts": "Hosts",
+    "docs": "文件"
   },
   "pages": {
     "login": {