diff --git a/frontend/src/layouts/AppSidebar.css b/frontend/src/layouts/AppSidebar.css
index 4784572f8..074407f22 100644
--- a/frontend/src/layouts/AppSidebar.css
+++ b/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;
diff --git a/frontend/src/layouts/AppSidebar.tsx b/frontend/src/layouts/AppSidebar.tsx
index 22e747adf..887e0d4f0 100644
--- a/frontend/src/layouts/AppSidebar.tsx
+++ b/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 (
+
+
+
+ );
+}
+
function VersionBadge({ version, collapsed }: { version: string; collapsed?: boolean }) {
if (!version) return null;
const label = formatPanelVersion(version);
@@ -254,6 +271,7 @@ export default function AppSidebar() {
{!collapsed && (
+
3X-UI
+