x

apps/website/src/components/Navbar.tsx

@@ -111,22 +111,42 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
   }, [])
 
   useEffect(() => {
+    let animationFrameId: number;
+    const navElement = navRef.current;
+
     const updateNavBottom = () => {
-      if (navRef.current) {
-        const bottom = navRef.current.getBoundingClientRect().bottom
+      if (navElement) {
+        const bottom = navElement.getBoundingClientRect().bottom
         document.documentElement.style.setProperty('--navbar-bottom', `${bottom}px`)
       }
     }
 
     updateNavBottom()
+
     window.addEventListener('scroll', updateNavBottom, { passive: true })
     window.addEventListener('resize', updateNavBottom)
 
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = requestAnimationFrame(updateNavBottom);
+    });
+
+    if (navElement) {
+      observer.observe(navElement);
+      navElement.addEventListener('transitionend', updateNavBottom);
+    }
+    observer.observe(document.body);
+
     return () => {
       window.removeEventListener('scroll', updateNavBottom)
       window.removeEventListener('resize', updateNavBottom)
+      observer.disconnect()
+      if (navElement) {
+        navElement.removeEventListener('transitionend', updateNavBottom);
+      }
+      cancelAnimationFrame(animationFrameId);
     }
-  }, [])
+  }, [scrolled])
 
   useEffect(() => {
     document.body.style.overflow = (searchOpen || mobileOpen || langSheetOpen) ? 'hidden' : ''
@@ -143,7 +163,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
     }
   }
 
-  const iconButtonClass = 'rounded-full p-1.5 text-pop-black/65 transition-all hover:bg-pop-bg hover:text-pop-pink md:p-2'
+  const iconButtonClass = 'group rounded-full p-2 text-pop-black transition-all hover:bg-pop-pink/10 hover:text-pop-pink md:p-2.5'
   const activeLanguage = LANGUAGES.find((language) => lang.startsWith(language.code) || language.code.startsWith(lang)) ?? LANGUAGES[0]
   const brandName = settings?.brandName || 'HomAroma'
 
@@ -151,7 +171,8 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
     <>
       <nav
         ref={navRef}
-        className={`fixed top-0 z-50 w-full border-b border-black/5 px-4 py-3.5 transition-all duration-300 md:px-6 md:py-4 ${
+        data-scrolled={scrolled}
+        className={`global-navbar fixed top-0 z-50 w-full border-b border-black/5 px-4 py-3.5 transition-all duration-300 md:px-6 md:py-4 ${
           scrolled
             ? 'bg-white/95 shadow-lg shadow-black/5 backdrop-blur-xl'
             : 'bg-white/80 backdrop-blur-xl md:bg-[#F9F8F5] md:backdrop-blur-none'
@@ -164,7 +185,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
               onClick={() => setMobileOpen(false)}
               className="shrink-0 text-xl font-bold uppercase italic tracking-widest text-pop-black md:text-2xl"
             >
-              {brandName} <span className="hidden text-xs font-light not-italic text-pop-black/55 md:inline md:text-sm">Essential</span>
+              {brandName}
             </Link>
           </div>
 
@@ -262,7 +283,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
                   onClick={loginWithLine}
                   className="ml-2 rounded-full bg-[#00B900] px-4 py-2 text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-all duration-300 hover:bg-[#009900]"
                 >
-                  LINE Login
+                  {t('nav.login', 'เข้าสู่ระบบด้วย LINE')}
                 </button>
               )}
             </div>