Refactor layout and navigation components to remove unused motion props (#494)

- Replaced motion.header with a standard header in Layout component.
- Removed layout props from motion elements in NavigationAPI and NavigationDocs components for improved performance and clarity.
- Updated AnnouncementBannerProvider to make the banner always visible, removing scroll-based hiding logic.

src/components/Layout.jsx

@@ -178,8 +178,8 @@ export function Layout({ children, title, tableOfContents }) {
         className="relative mx-auto flex max-w-8xl sm:px-2 lg:px-8 xl:px-12 lg:ml-72 xl:ml-80"
         style={{ paddingTop: bannerHeight }}
       >
-        <motion.header
-            layoutScroll
+        <header
+            // layoutScroll
             className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
             style={{ top: bannerHeight }}
         >
@@ -192,7 +192,7 @@ export function Layout({ children, title, tableOfContents }) {
             <Header />
             {router.route.startsWith("/ipa") ? <NavigationAPI className="hidden lg:mt-10 lg:block" tableOfContents={tableOfContents} /> : <NavigationDocs className="hidden lg:mt-10 lg:block" />}
           </div>
-        </motion.header>
+        </header>
         <div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-5">
           <main className="py-16">
             <Prose as="article">{children}</Prose>

src/components/NavigationAPI.jsx

@@ -110,7 +110,7 @@ export function NavLink({ href, tag, active, isAnchorLink = false, children, lin
         {links &&
             <ul role="list">
               {links.map((link,index) => (
-                  <motion.li key={index} layout="position" className="relative">
+                  <motion.li key={index} className="relative">
                     <NavLink href={link.href} active={link.href === router.pathname} isChildren={true}>
                       {link.title}
                     </NavLink>
@@ -146,7 +146,7 @@ export function VisibleSectionHighlight() {
 
     return activeIndex >= 0 && (
         <motion.div
-            layout
+            // layout
             initial={{ opacity: 0 }}
             animate={{ opacity: 1, transition: { delay: 0.2 } }}
             exit={{ opacity: 0 }}
@@ -169,7 +169,7 @@ export function ActivePageMarker() {
 
     return activeIndex >= 0 && (
         <motion.div
-            layout
+            // layout
             className="absolute left-2 h-6 w-px bg-orange-500"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1, transition: { delay: 0.2 } }}
@@ -187,7 +187,7 @@ function NavigationGroup({ group, className, tableOfContents }) {
   return (
     <li className={clsx('relative mt-6', className)}>
       <motion.h2
-        layout="position"
+        // layout="position"
         data-nb-link={group.title}
         className="text-xs font-semibold text-zinc-900 dark:text-white"
       >
@@ -200,7 +200,7 @@ function NavigationGroup({ group, className, tableOfContents }) {
           )}
         </AnimatePresence>
         <motion.div
-          layout
+          // layout
           className="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"
         />
         <AnimatePresence initial={false}>
@@ -210,7 +210,7 @@ function NavigationGroup({ group, className, tableOfContents }) {
         </AnimatePresence>
         <ul role="list" className="border-l border-transparent">
           {group.links.map((link) => (
-            <motion.li key={link.href} layout="position" className="relative">
+            <motion.li key={link.href} className="relative">
               <NavLink href={link.href} active={link.href === router.pathname.replace("ipa", "api")}>
                 {link.title}
               </NavLink>

src/components/NavigationDocs.jsx

@@ -371,7 +371,7 @@ export const docsNavigation = [
     return (
         <li className={clsx('relative', className, hasChildren ? "" : "mt-6")}>
             <motion.h2
-                layout={"size"}
+                // layout={"size"}
                 className={clsx(
                     "flex justify-between items-center gap-2 group",
                     hasChildren ? "text-zinc-700 select-none py-1 pr-3 hover:text-zinc-900 dark:text-zinc-300 font-medium dark:hover:text-white text-sm cursor-pointer" : "text-xs font-semibold text-zinc-900 dark:text-white"
@@ -400,7 +400,7 @@ export const docsNavigation = [
                             )}
                         </AnimatePresence>
                         <motion.div
-                            layout
+                            // layout
                             className="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"
                         />
                         <AnimatePresence initial={false}>
@@ -427,7 +427,7 @@ export const docsNavigation = [
                         className="border-l border-transparent">
                             {group.links.map((link) =>  {
                                 return link.href ?
-                                    <motion.li key={link.href} layout={"position"} className="relative">
+                                    <motion.li key={link.href} className="relative">
                                         <NavLink href={link.href} active={link.href === router.pathname} links={link.links}>
                                             {link.title}
                                         </NavLink>

src/components/announcement-banner/AnnouncementBannerProvider.jsx

@@ -35,7 +35,6 @@ export function AnnouncementBannerProvider({ children }) {
     undefined
   )
   let announcementId = announcement.text
-  let [isHiddenByScroll, setIsHiddenByScroll] = useState(false)
   let [bannerHeight, setBannerHeight] = useState(0)
 
   let close = () => {
@@ -48,7 +47,7 @@ export function AnnouncementBannerProvider({ children }) {
     return closedAnnouncement !== announcementId
   }, [announcementId, closedAnnouncement, mounted])
 
-  let isVisible = isActive && !isHiddenByScroll
+  let isVisible = isActive // Always visible when active, regardless of scroll
 
   let reportHeight = useCallback((height) => {
     setBannerHeight(height)
@@ -59,19 +58,20 @@ export function AnnouncementBannerProvider({ children }) {
     return () => setMounted(false)
   }, [])
 
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return
-    }
+  // Removed scroll-based hiding to make banner always sticky
+  // useEffect(() => {
+  //   if (typeof window === 'undefined') {
+  //     return
+  //   }
 
-    function handleScroll() {
-      setIsHiddenByScroll(window.scrollY > 30)
-    }
+  //   function handleScroll() {
+  //     setIsHiddenByScroll(window.scrollY > 30)
+  //   }
 
-    handleScroll()
-    window.addEventListener('scroll', handleScroll, { passive: true })
-    return () => window.removeEventListener('scroll', handleScroll)
-  }, [])
+  //   handleScroll()
+  //   window.addEventListener('scroll', handleScroll, { passive: true })
+  //   return () => window.removeEventListener('scroll', handleScroll)
+  // }, [])
 
   useEffect(() => {
     if (!isVisible && bannerHeight !== 0) {