fix: graidents on subnav menu

docs/app/components/Header/HeaderSubnav.tsx

@@ -1,5 +1,9 @@
-import { WheelEvent } from 'react'
-import { animated, useSprings } from '@react-spring/web'
+import { useRef, WheelEvent } from 'react'
+import {
+  animated,
+  useIsomorphicLayoutEffect,
+  useSprings,
+} from '@react-spring/web'
 
 import { getFontStyles } from '~/styles/fontStyles'
 import { styled } from '~/styles/stitches.config'
@@ -12,13 +16,16 @@ interface HeaderSubnavProps {
 }
 
 export const HeaderSubnav = ({ className, subnav }: HeaderSubnavProps) => {
+  const subNavScrollRef = useRef<HTMLDivElement>(null!)
   const [springs, ref] = useSprings(2, i => ({
-    opacity: i,
+    opacity: 0,
   }))
 
   const handleScroll = (e: WheelEvent<HTMLDivElement>) => {
     const el = e.target as HTMLDivElement
 
+    console.log(el.scrollLeft)
+
     if (el.scrollLeft === el.scrollWidth - el.clientWidth) {
       ref.start(i => ({
         opacity: Number(!i),
@@ -34,10 +41,36 @@ export const HeaderSubnav = ({ className, subnav }: HeaderSubnavProps) => {
     }
   }
 
+  useIsomorphicLayoutEffect(() => {
+    const handleResize = () => {
+      const el = subNavScrollRef.current
+      if (el.scrollWidth > el.clientWidth && el.scrollLeft === 0) {
+        ref.start(i => ({
+          opacity: i,
+          immediate: true,
+        }))
+      } else if (el.scrollLeft > 0) {
+        handleScroll({ target: el } as unknown as WheelEvent<HTMLDivElement>)
+      } else {
+        ref.start(() => ({
+          opacity: 0,
+        }))
+      }
+    }
+
+    handleResize()
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
   return (
     <SubNavContainer className={className}>
       <GradientLeft style={{ ...springs[0] }} />
-      <SubNavScroller onScroll={handleScroll}>
+      <SubNavScroller ref={subNavScrollRef} onScroll={handleScroll}>
         <SubNavList>
           {subnav.map(({ href, label, id }) => (
             <SubNavListItem key={id}>