Chore: pass pathname as prop into navigation group to avoid layout shift on initial render (#754)

This pr improves the initial navigation sub groups expanded state, by
passing in the pathname as a prop instead of hooking it in and
determining the state in an effect. This avoid layout shifts when doing
initial page renders, while inside a navigation subgroup item

Author: ben-fornefeld

apps/web/src/components/Navigation/NavigationSubgroup.tsx

@@ -1,23 +1,22 @@
 import clsx from 'clsx'
 import { ChevronDown, ChevronRight } from 'lucide-react'
-import { usePathname } from 'next/navigation'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
 import { NavigationLink } from './NavigationLink'
 import { NavSubgroup } from './routes'
 
-export function NavigationSubgroup({ subgroup }: { subgroup: NavSubgroup }) {
-  const [isExpanded, setIsExpanded] = useState(false)
-  const pathname = usePathname()
+interface NavigationSubgroupProps {
+  subgroup: NavSubgroup
+  pathname: string
+}
 
+export function NavigationSubgroup({
+  subgroup,
+  pathname,
+}: NavigationSubgroupProps) {
   const isActive = subgroup.links.some((link) => link.href === pathname)
 
-  // Automatically expand the subgroup if it's active
-  useEffect(() => {
-    if (isActive) {
-      setIsExpanded(true)
-    }
-  }, [isActive])
+  const [isExpanded, setIsExpanded] = useState(isActive)
 
   const toggleExpand = () => {
     setIsExpanded(!isExpanded)

apps/web/src/components/Navigation/index.tsx

@@ -63,7 +63,10 @@ function NavigationGroup({
             {group.items?.map((item) => (
               <React.Fragment key={item.title}>
                 {(item as any).links ? (
-                  <NavigationSubgroup subgroup={item as NavSubgroup} />
+                  <NavigationSubgroup
+                    subgroup={item as NavSubgroup}
+                    pathname={initialPathname}
+                  />
                 ) : (
                   <NavigationLink
                     link={item as NavLink}
@@ -139,7 +142,10 @@ function VersionedNavigationGroup({
             {group.versionedItems[curVersion]?.map((item) => (
               <React.Fragment key={item.title}>
                 {(item as any).links ? (
-                  <NavigationSubgroup subgroup={item as NavSubgroup} />
+                  <NavigationSubgroup
+                    subgroup={item as NavSubgroup}
+                    pathname={initialPathname}
+                  />
                 ) : (
                   <NavigationLink
                     link={item as NavLink}