style: adjust active slider bar collection item active style (#3458)

Co-authored-by: Alex Yang <himself65@outlook.com>

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}

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,13 +34,8 @@ 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': {
+    '&[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',