From 6388a798c9d960359c7800f660df0348a6dd688e Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Sat, 29 Jul 2023 23:22:21 +0800
Subject: [PATCH] style: adjust active slider bar collection item active style
 (#3458)

Co-authored-by: Alex Yang <himself65@outlook.com>
---
 .../workspace-slider-bar/collections/page.tsx |  1 +
 .../app-sidebar/menu-item/index.css.ts        | 20 +++++++------------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx b/apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx
index bbce0b15e7..6dd42d1f9d 100644
--- a/apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx
@@ -150,6 +150,7 @@ export const Page = ({
     <Collapsible.Root open={!collapsed}>
       <MenuItem
         data-testid="collection-page"
+        data-type="collection-list-item"
         icon={icon}
         onClick={clickPage}
         className={styles.title}
diff --git a/packages/component/src/components/app-sidebar/menu-item/index.css.ts b/packages/component/src/components/app-sidebar/menu-item/index.css.ts
index 66b6216355..ef93f4171d 100644
--- a/packages/component/src/components/app-sidebar/menu-item/index.css.ts
+++ b/packages/component/src/components/app-sidebar/menu-item/index.css.ts
@@ -1,5 +1,4 @@
 import { style } from '@vanilla-extract/css';
-
 export const root = style({
   display: 'inline-flex',
   alignItems: 'center',
@@ -35,18 +34,13 @@ export const root = style({
       paddingLeft: '4px',
       paddingRight: '12px',
     },
-    '&[data-type="collection-list-item"][data-collapsible="false"]:hover': {
-      width: 'calc(100% + 8px)',
-      transform: 'translateX(-8px)',
-      paddingLeft: '20px',
-      paddingRight: '12px',
-    },
-    '&[data-type="favorite-list-item"][data-collapsible="false"]:hover': {
-      width: 'calc(100% + 8px)',
-      transform: 'translateX(-8px)',
-      paddingLeft: '20px',
-      paddingRight: '12px',
-    },
+    '&[data-type="collection-list-item"][data-collapsible="false"][data-active="true"],&[data-type="favorite-list-item"][data-collapsible="false"][data-active="true"], &[data-type="favorite-list-item"][data-collapsible="false"]:hover, &[data-type="collection-list-item"][data-collapsible="false"]:hover':
+      {
+        width: 'calc(100% + 8px)',
+        transform: 'translateX(-8px)',
+        paddingLeft: '20px',
+        paddingRight: '12px',
+      },
   },
 });