From 85d501dae5bb2db6fa3cce7ac5d897c94362f956 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 11 Apr 2023 11:47:36 +0800
Subject: [PATCH] perf: beautify the visual performance of scroll bars caused
 by too many groups

---
 client/web/src/routes/Main/Navbar/NavItem.tsx |  2 +-
 client/web/src/routes/Main/Navbar/index.tsx   |  2 +-
 client/web/tailwind.config.js                 | 17 +++++++++++++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/web/src/routes/Main/Navbar/NavItem.tsx b/client/web/src/routes/Main/Navbar/NavItem.tsx
index c3d645ed..f5ab1582 100644
--- a/client/web/src/routes/Main/Navbar/NavItem.tsx
+++ b/client/web/src/routes/Main/Navbar/NavItem.tsx
@@ -68,7 +68,7 @@ export const NavbarNavItem: React.FC<
 
       {inner}
 
-      <div className="absolute right-0 bottom-0">
+      <div className="absolute right-2 bottom-0">
         {badge === true && <Badge status="error" {...props.badgeProps} />}
       </div>
     </div>
diff --git a/client/web/src/routes/Main/Navbar/index.tsx b/client/web/src/routes/Main/Navbar/index.tsx
index 8d3f8de4..a761d3b6 100644
--- a/client/web/src/routes/Main/Navbar/index.tsx
+++ b/client/web/src/routes/Main/Navbar/index.tsx
@@ -40,7 +40,7 @@ export const Navbar: React.FC = React.memo(() => {
         </div>
 
         {/* 如果导航栏高度不够就缩减群组列表的高度 */}
-        <div className="overflow-y-hidden hover:overflow-y-auto overflow-x-hidden thin-scrollbar">
+        <div className="overflow-y-hidden hover:overflow-y-smart scroll overflow-x-hidden thin-scrollbar">
           <GroupNav />
         </div>
 
diff --git a/client/web/tailwind.config.js b/client/web/tailwind.config.js
index d9e50c81..b3fa6a00 100644
--- a/client/web/tailwind.config.js
+++ b/client/web/tailwind.config.js
@@ -52,6 +52,23 @@ const tailchat = plugin(({ e, addUtilities }) => {
 
   addUtilities(newUtilities);
 
+  addUtilities(
+    {
+      '.overflow-smart': {
+        overflow: ['auto', 'overlay'],
+      },
+      '.overflow-x-smart': {
+        'overflow-x': ['auto', 'overlay'],
+      },
+      '.overflow-y-smart': {
+        'overflow-y': ['auto', 'overlay'],
+      },
+    },
+    {
+      variants: ['hover'],
+    }
+  );
+
   // Fork from https://github.com/ItzAfroBoy/tailwindcss-zoom/blob/master/index.js
   const percents = [
     {