fix: optimize

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/layout/header/internal/HeaderContent.tsx

@@ -13,6 +13,7 @@ import { usePathname } from 'next/navigation'
 import type { IHeaderMenu } from '../config'
 
 import { RootPortal } from '~/components/ui/portal'
+import useDebounceValue from '~/hooks/common/use-debounce-value'
 import { clsxm } from '~/lib/helper'
 import { useScollIsUpAndPageIsOver } from '~/providers/root/page-scroll-info-provider'
 
@@ -34,7 +35,10 @@ export const HeaderContent = () => {
 const AccessibleMenu: Component = () => {
   const hasMetaInfo = useHeaderHasMetaInfo()
 
-  const showShow = useScollIsUpAndPageIsOver(600) && hasMetaInfo
+  const showShow = useDebounceValue(
+    useScollIsUpAndPageIsOver(600) && hasMetaInfo,
+    120,
+  )
   return (
     <RootPortal>
       <AnimatePresence>

src/components/layout/header/internal/HeaderDrawerButton.tsx

@@ -36,7 +36,7 @@ export const HeaderDrawerButton = () => {
 
                 <Dialog.Content>
                   <m.dialog
-                    className="fixed left-0 right-0 top-0 z-[12] block overflow-auto rounded-xl bg-base-100/90"
+                    className="fixed left-0 right-0 top-0 z-[12] block overflow-auto rounded-xl bg-base-100/90 backdrop-blur-sm"
                     initial={{ opacity: 0.8 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}

src/components/widgets/shared/ReadIndicator.tsx

@@ -39,7 +39,7 @@ export const ReadIndicatorForMobile: Component<{}> = () => {
         )}
       >
         <div
-          className="absolute top-0 w-full bg-accent/80"
+          className="absolute top-0 w-full bg-accent/80 duration-75 ease-linear"
           style={{
             height: `${readPercent}%`,
           }}