feat(core): mobile renderer for explorer (#7942)

packages/frontend/core/src/components/app-sidebar/category-divider/index.css.ts

@@ -64,3 +64,30 @@ export const collapseIcon = style({
     },
   },
 });
+
+//  ------------- mobile -------------
+export const mobileRoot = style([
+  root,
+  {
+    height: 25,
+    padding: '0 16px',
+    selectors: {
+      '&[data-collapsible="true"]:hover': {
+        backgroundColor: 'transparent',
+      },
+      '&[data-collapsible="true"]:active': {
+        backgroundColor: cssVarV2('layer/background/hoverOverlay'),
+      },
+    },
+  },
+]);
+export const mobileLabel = style([
+  label,
+  {
+    color: cssVarV2('text/primary'),
+    fontSize: 20,
+    lineHeight: '25px',
+    letterSpacing: -0.45,
+    fontWeight: 400,
+  },
+]);

packages/frontend/core/src/components/app-sidebar/category-divider/index.tsx

@@ -9,6 +9,7 @@ export type CategoryDividerProps = PropsWithChildren<
     label: string;
     className?: string;
     collapsed?: boolean;
+    mobile?: boolean;
     setCollapsed?: (collapsed: boolean) => void;
   } & {
     [key: `data-${string}`]: unknown;
@@ -22,6 +23,7 @@ export const CategoryDivider = forwardRef(
       children,
       className,
       collapsed,
+      mobile,
       setCollapsed,
       ...otherProps
     }: CategoryDividerProps,
@@ -31,14 +33,15 @@ export const CategoryDivider = forwardRef(
 
     return (
       <div
-        className={clsx([styles.root, className])}
+        className={clsx(mobile ? styles.mobileRoot : styles.root, className)}
         ref={ref}
         onClick={() => setCollapsed?.(!collapsed)}
+        data-mobile={mobile}
         data-collapsed={collapsed}
         data-collapsible={collapsible}
         {...otherProps}
       >
-        <div className={styles.label}>
+        <div className={mobile ? styles.mobileLabel : styles.label}>
           {label}
           {collapsible ? (
             <ToggleCollapseIcon