From bc196d4ba99172545bc8bebd28579cb803eef91d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 3 Nov 2023 13:35:20 +0800
Subject: [PATCH] Optimize HideScrollbar and sidebar

---
 src/assets/css/components/common/sidebar.scss |  2 +
 src/components/common/HideScrollbar.tsx       | 41 +++++++++++--------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.scss
index 3fd86f3..df3f922 100644
--- a/src/assets/css/components/common/sidebar.scss
+++ b/src/assets/css/components/common/sidebar.scss
@@ -202,6 +202,8 @@
       font-size: 1.4em;
       color: constants.$font-main-color;
       user-select: text;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       a{
         color: constants.$main-color;
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 6b2dad0..d0ffcf9 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -411,30 +411,37 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         setRefreshTime(Date.now())
     }
 
+    const reloadScrollbar = () => {
+        setVerticalScrollbarWidth(
+            (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
+        )
+        setHorizontalScrollbarWidth(
+            (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
+        )
+
+        rootRef.current &&
+            setVerticalScrollbarLength(
+                (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
+            )
+
+        rootRef.current &&
+            setHorizontalScrollbarLength(
+                (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
+            )
+
+        refreshLayout()
+    }
+
     useEffect(() => {
         const resizeObserver = new ResizeObserver(() => {
-            setVerticalScrollbarWidth(
-                (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
-            )
-            setHorizontalScrollbarWidth(
-                (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
-            )
-
-            rootRef.current &&
-                setVerticalScrollbarLength(
-                    (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
-                )
-
-            rootRef.current &&
-                setHorizontalScrollbarLength(
-                    (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
-                )
-            refreshLayout()
+            reloadScrollbar()
         })
         maskRef.current && resizeObserver.observe(maskRef.current)
+        contentRef.current && resizeObserver.observe(contentRef.current)
 
         return () => {
             maskRef.current && resizeObserver.unobserve(maskRef.current)
+            contentRef.current && resizeObserver.unobserve(contentRef.current)
         }
     }, [])