fix: header icon

Signed-off-by: Innei <i@innei.in>
Innei · Jun 30, 2023 · 2c56c29 · 2c56c29
1 parent 32828d3
commit 2c56c29
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/src/components/layout/header/config.ts b/src/components/layout/header/config.ts
@@ -76,7 +76,7 @@ export const headerMenuConfig: IHeaderMenu[] = [
   {
     title: '其他',
     icon: h(FaSolidCircleNotch),
-    path: '/favorite/music',
+    path: '#',
     subMenu: [
       {
         title: '之言',

diff --git a/src/components/layout/header/internal/HeaderContent.tsx b/src/components/layout/header/internal/HeaderContent.tsx
@@ -128,23 +128,18 @@ const HeaderMenuItem = memo<{
       <AnimatedItem
         href={href}
         isActive={isActive}
-        className={clsx(
-          'transition-[padding]',
-          // '[&:hover_.icon]:-translate-x-[calc(100%+6px)] [&:hover_.icon]:opacity-100',
-          '[&.active_.icon]:-translate-x-[calc(100%+6px)] [&.active_.icon]:opacity-80',
-          '[&.active]:pl-6',
-        )}
+        className={clsx('transition-[padding]')}
       >
-        <span className="relative">
-          <span
-            className={clsxm(
-              'pointer-events-none absolute bottom-0 left-0 top-0 flex items-center opacity-0 duration-200',
-              'icon',
-            )}
-          >
-            {section.icon}
-          </span>
-          {section.title}
+        <span className="relative flex items-center">
+          {isActive && (
+            <m.span
+              layoutId="header-menu-icon"
+              className={clsxm('mr-2 flex items-center')}
+            >
+              {section.icon}
+            </m.span>
+          )}
+          <m.span layout>{section.title}</m.span>
         </span>
       </AnimatedItem>
     </MenuPopover>

diff --git a/src/providers/internal/createDataProvider.tsx b/src/providers/internal/createDataProvider.tsx
@@ -33,6 +33,8 @@ export const createDataProvider = <Model,>() => {
 
     return children
   })
+
+  CurrentDataProvider.displayName = 'CurrentDataProvider'
   const useCurrentDataSelector = <T,>(
     selector: (data: Model | null) => T,
     deps?: any[],