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.
This commit is contained in:
MHSanaei
2026-06-26 18:55:32 +02:00
parent 8e4c368200
commit 451263f1db
15 changed files with 72 additions and 13 deletions
+27
View File
@@ -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
View File
@@ -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
View File
@@ -117,7 +117,8 @@
"logout": "تسجيل خروج",
"link": "إدارة",
"donate": "تبرع",
"hosts": "المضيفات"
"hosts": "المضيفات",
"docs": "التوثيق"
},
"pages": {
"login": {
+2 -1
View File
@@ -117,7 +117,8 @@
"apiDocs": "API Docs",
"logout": "Log Out",
"link": "Manage",
"donate": "Donate"
"donate": "Donate",
"docs": "Documentation"
},
"pages": {
"login": {
+2 -1
View File
@@ -117,7 +117,8 @@
"logout": "Cerrar Sesión",
"link": "Gestionar",
"donate": "Donar",
"hosts": "Hosts"
"hosts": "Hosts",
"docs": "Documentación"
},
"pages": {
"login": {
+2 -1
View File
@@ -117,7 +117,8 @@
"logout": "خروج",
"link": "مدیریت",
"donate": "حمایت مالی",
"hosts": "میزبان‌ها"
"hosts": "میزبان‌ها",
"docs": "مستندات"
},
"pages": {
"login": {
+2 -1
View File
@@ -117,7 +117,8 @@
"logout": "Keluar",
"link": "Kelola",
"donate": "Donasi",
"hosts": "Host"
"hosts": "Host",
"docs": "Dokumentasi"
},
"pages": {
"login": {
+2 -1
View File
@@ -117,7 +117,8 @@
"logout": "ログアウト",
"link": "リンク管理",
"donate": "寄付",
"hosts": "ホスト"
"hosts": "ホスト",
"docs": "ドキュメント"
},
"pages": {
"login": {
+2 -1
View File
@@ -117,7 +117,8 @@
"logout": "Sair",
"link": "Gerenciar",
"donate": "Doar",
"hosts": "Hosts"
"hosts": "Hosts",
"docs": "Documentação"
},
"pages": {
"login": {
+2 -1
View File
@@ -117,7 +117,8 @@
"logout": "Выход",
"link": "Управление",
"donate": "Поддержать",
"hosts": "Хосты"
"hosts": "Хосты",
"docs": "Документация"
},
"pages": {
"login": {
+2 -1
View File
@@ -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
View File
@@ -117,7 +117,8 @@
"logout": "Вийти",
"link": "Керувати",
"donate": "Підтримати",
"hosts": "Хости"
"hosts": "Хости",
"docs": "Документація"
},
"pages": {
"login": {
+2 -1
View File
@@ -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
View File
@@ -117,7 +117,8 @@
"logout": "退出登录",
"link": "管理",
"donate": "捐赠",
"hosts": "主机"
"hosts": "主机",
"docs": "文档"
},
"pages": {
"login": {
+2 -1
View File
@@ -117,7 +117,8 @@
"logout": "退出登入",
"link": "管理",
"donate": "捐贈",
"hosts": "Hosts"
"hosts": "Hosts",
"docs": "文件"
},
"pages": {
"login": {