From c10a719438164112e68d5bcf725955acde29b9f9 Mon Sep 17 00:00:00 2001
From: JSR <pandajsr72@gmail.com>
Date: Wed, 18 Mar 2026 22:06:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=AB=96=E5=B1=8F=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E5=B1=95=E5=BC=80=E6=A0=B7=E5=BC=8F=E4=B8=8E=E5=B7=A6?=
 =?UTF-8?q?=E4=B8=8A=E8=A7=92=E6=94=B6=E8=B5=B7=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ContentArea.tsx | 15 ++++--
 src/components/Sidebar.tsx     | 97 ++++++++++++++++++----------------
 2 files changed, 62 insertions(+), 50 deletions(-)

diff --git a/src/components/ContentArea.tsx b/src/components/ContentArea.tsx
index 9cbda15..ee0bcd9 100644
--- a/src/components/ContentArea.tsx
+++ b/src/components/ContentArea.tsx
@@ -100,6 +100,7 @@ export function ContentArea({
           : t("permissions.view")}
     </Tag>
   )
+  const useFloatingSidebarToggle = floatingExpand && sidebarCollapsed
 
   return (
     <Layout
@@ -128,14 +129,20 @@ export function ContentArea({
         <div
           style={
             {
-              paddingLeft: "8px",
+              paddingLeft: useFloatingSidebarToggle ? 0 : "8px",
               display: "flex",
               alignItems: "center",
-              height: "100%",
+              height: useFloatingSidebarToggle ? "auto" : "100%",
               WebkitAppRegion: "no-drag",
               flexShrink: 0,
-              position: "relative",
-              zIndex: floatingExpand && sidebarCollapsed && floatingExpanded ? 1301 : 1,
+              position: useFloatingSidebarToggle ? "fixed" : "relative",
+              left: useFloatingSidebarToggle ? "8px" : undefined,
+              top: useFloatingSidebarToggle ? "4px" : undefined,
+              zIndex: useFloatingSidebarToggle
+                ? 1402
+                : floatingExpand && sidebarCollapsed && floatingExpanded
+                  ? 1301
+                  : 1,
             } as React.CSSProperties
           }
         >
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 9693460..022ace7 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -194,51 +194,53 @@ export function Sidebar({
 
   const renderSidebarBody = (isCollapsedView: boolean, hideMenu = false) => (
     <>
-      <div
-        data-tauri-drag-region
-        style={
-          {
-            padding: isCollapsedView ? "20px 8px 12px" : "24px 24px 16px",
-            textAlign: "center",
-            WebkitAppRegion: "drag",
-            userSelect: "none",
-            flexShrink: 0,
-          } as React.CSSProperties
-        }
-      >
-        <img
-          src={appLogo}
-          style={{
-            width: isCollapsedView ? "40px" : "48px",
-            height: isCollapsedView ? "40px" : "48px",
-            marginBottom: isCollapsedView ? "0" : "12px",
-          }}
-          alt="logo"
-        />
-        {!isCollapsedView && (
-          <>
-            <h2
-              style={{
-                color: "var(--ss-sidebar-text, var(--ss-text-main))",
-                margin: 0,
-                fontSize: "20px",
-              }}
-            >
-              SecScore
-            </h2>
-            <div
-              style={{
-                fontSize: "12px",
-                color: "var(--ss-sidebar-text, var(--ss-text-main))",
-                opacity: 0.8,
-                marginTop: "4px",
-              }}
-            >
-              {t("settings.about.appName")}
-            </div>
-          </>
-        )}
-      </div>
+      {!(isCollapsedView && floatingExpand && collapsed) && (
+        <div
+          data-tauri-drag-region
+          style={
+            {
+              padding: isCollapsedView ? "20px 8px 12px" : "24px 24px 16px",
+              textAlign: "center",
+              WebkitAppRegion: "drag",
+              userSelect: "none",
+              flexShrink: 0,
+            } as React.CSSProperties
+          }
+        >
+          <img
+            src={appLogo}
+            style={{
+              width: isCollapsedView ? "40px" : "48px",
+              height: isCollapsedView ? "40px" : "48px",
+              marginBottom: isCollapsedView ? "0" : "12px",
+            }}
+            alt="logo"
+          />
+          {!isCollapsedView && (
+            <>
+              <h2
+                style={{
+                  color: "var(--ss-sidebar-text, var(--ss-text-main))",
+                  margin: 0,
+                  fontSize: "20px",
+                }}
+              >
+                SecScore
+              </h2>
+              <div
+                style={{
+                  fontSize: "12px",
+                  color: "var(--ss-sidebar-text, var(--ss-text-main))",
+                  opacity: 0.8,
+                  marginTop: "4px",
+                }}
+              >
+                {t("settings.about.appName")}
+              </div>
+            </>
+          )}
+        </div>
+      )}
 
       {!hideMenu && (
         <div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column" }}>
@@ -352,7 +354,10 @@ export function Sidebar({
             top: 0,
             bottom: 0,
             width: "200px",
-            background: "var(--ss-sidebar-bg)",
+            background:
+              "linear-gradient(0deg, rgba(250, 250, 250, 0.72), rgba(250, 250, 250, 0.72)), var(--ss-sidebar-bg)",
+            backdropFilter: "blur(14px)",
+            WebkitBackdropFilter: "blur(14px)",
             borderRight: "1px solid var(--ss-border-color)",
             boxShadow: "6px 0 18px rgba(0, 0, 0, 0.12)",
             zIndex: 1200,