refactor: nav to server component; add loading states

src/components/LanguagePicker/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { useParams } from "next/navigation"
 
 import { cn } from "@/lib/utils/cn"

src/components/Nav/Client/index.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import { useRef } from "react"
+import dynamic from "next/dynamic"
+import { useLocale } from "next-intl"
+import { BsTranslate } from "react-icons/bs"
+
+import SearchButton from "@/components/Search/SearchButton"
+import SearchInputButton from "@/components/Search/SearchInputButton"
+import { Button } from "@/components/ui/buttons/Button"
+import { Skeleton } from "@/components/ui/skeleton"
+
+import { DESKTOP_LANGUAGE_BUTTON_NAME } from "@/lib/constants"
+
+import { useNavigation } from "../useNavigation"
+import { useThemeToggle } from "../useThemeToggle"
+
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+import { useTranslation } from "@/hooks/useTranslation"
+
+const Menu = dynamic(() => import("../Menu"), {
+  ssr: false,
+  loading: () => (
+    <div className="me-8 flex w-full items-center gap-10 px-6 max-md:hidden">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <Skeleton key={i} className="h-6 w-12 py-2" />
+      ))}
+    </div>
+  ),
+})
+
+const MobileMenuLoading = () => (
+  <Skeleton data-label="mobile-menu" className="ms-2 size-6" />
+)
+
+const MobileNavMenu = dynamic(() => import("../Mobile"), {
+  ssr: false,
+  loading: MobileMenuLoading,
+})
+
+const SearchProvider = dynamic(() => import("../../Search"), {
+  ssr: false,
+  loading: () => (
+    <>
+      <div className="flex items-center gap-6 px-2 max-md:hidden xl:px-3">
+        <Skeleton
+          data-label="search-xl"
+          className="hidden h-6 w-[169px] xl:flex"
+        />
+        <Skeleton data-label="search" className="size-6 xl:hidden" />
+      </div>
+      <div className="flex items-center md:hidden">
+        <Skeleton data-label="search" className="mx-2 size-6" />
+        <MobileMenuLoading />
+      </div>
+    </>
+  ),
+})
+
+const LanguagePicker = dynamic(() => import("../../LanguagePicker"), {
+  ssr: false,
+  loading: () => (
+    // LG skeleton width approximates English "[icon] Languages EN" text width
+    <Skeleton className="h-6 max-md:hidden md:mx-2 md:w-[54px] lg:mx-3 lg:w-[8.875rem]" />
+  ),
+})
+
+const ClientSideNav = () => {
+  const { t } = useTranslation("common")
+  const locale = useLocale()
+
+  const { linkSections } = useNavigation()
+  const { toggleColorMode, ThemeIcon, themeIconAriaLabel } = useThemeToggle()
+
+  const languagePickerRef = useRef<HTMLButtonElement>(null)
+
+  // avoid rendering/adding desktop Menu version to DOM on mobile
+  const desktopScreen = useBreakpointValue({ base: false, md: true })
+
+  return (
+    <>
+      {desktopScreen && (
+        <Menu
+          className="animate-fade-in max-md:hidden"
+          sections={linkSections}
+        />
+      )}
+
+      <div className="flex items-center">
+        <SearchProvider>
+          {({ onOpen }) => {
+            return (
+              <>
+                <SearchInputButton
+                  className="animate-fade-in max-xl:hidden"
+                  onClick={onOpen}
+                />
+                <SearchButton
+                  className="animate-fade-in xl:hidden"
+                  onClick={onOpen}
+                />
+
+                {!desktopScreen && (
+                  <MobileNavMenu
+                    toggleColorMode={toggleColorMode}
+                    linkSections={linkSections}
+                    toggleSearch={onOpen}
+                    className="flex animate-fade-in md:hidden"
+                  />
+                )}
+              </>
+            )
+          }}
+        </SearchProvider>
+
+        {desktopScreen && (
+          <Button
+            aria-label={themeIconAriaLabel}
+            variant="ghost"
+            isSecondary
+            className="group animate-fade-in px-2 max-md:hidden xl:px-3 [&>svg]:transition-transform [&>svg]:duration-500 [&>svg]:hover:rotate-12 [&>svg]:hover:text-primary-hover"
+            onClick={toggleColorMode}
+          >
+            <ThemeIcon className="transform-transform duration-500 group-hover:rotate-12 group-hover:transition-transform group-hover:duration-500" />
+          </Button>
+        )}
+
+        {desktopScreen && (
+          <LanguagePicker className="max-md:hidden">
+            <Button
+              name={DESKTOP_LANGUAGE_BUTTON_NAME}
+              ref={languagePickerRef}
+              variant="ghost"
+              className="animate-fade-in gap-0 px-2 text-body transition-transform duration-500 active:bg-primary-low-contrast active:text-primary-hover data-[state='open']:bg-primary-low-contrast data-[state='open']:text-primary-hover max-md:hidden xl:px-3 [&_svg]:transition-transform [&_svg]:duration-500 [&_svg]:hover:rotate-12"
+            >
+              <BsTranslate className="me-2 align-middle text-2xl" />
+              <span className="max-lg:hidden">{t("languages")}&nbsp;</span>
+              {locale!.toUpperCase()}
+            </Button>
+          </LanguagePicker>
+        )}
+      </div>
+    </>
+  )
+}
+
+ClientSideNav.displayName = "ClientSideNav"
+
+export default ClientSideNav

src/components/Nav/Menu/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { BaseHTMLAttributes } from "react"
 import { motion } from "framer-motion"
 import {

src/components/Nav/Mobile/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import {
   Sheet,
   SheetContent,
@@ -6,6 +8,8 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet"
 
+import { cn } from "@/lib/utils/cn"
+
 import { ButtonProps } from "../../ui/buttons/Button"
 import type { NavSections } from "../types"
 
@@ -26,39 +30,42 @@ const MobileNavMenu = ({
   toggleColorMode,
   toggleSearch,
   linkSections,
+  className,
   ...props
 }: MobileNavMenuProps) => {
   const { isOpen, onToggle } = useDisclosure()
 
+  // DRAWER MENU
   return (
-    <>
-      {/* DRAWER MENU */}
-      <Sheet open={isOpen} onOpenChange={onToggle}>
-        <SheetTrigger asChild>
-          <HamburgerButton className="-me-2" isMenuOpen={isOpen} {...props} />
-        </SheetTrigger>
-        <SheetContent side="left" className="flex flex-col" aria-describedby="">
-          {/* HEADER ELEMENTS: SITE NAME, CLOSE BUTTON */}
-          <SheetHeader>
-            <MenuHeader />
-          </SheetHeader>
+    <Sheet open={isOpen} onOpenChange={onToggle}>
+      <SheetTrigger asChild>
+        <HamburgerButton
+          className={cn("-me-2", className)}
+          isMenuOpen={isOpen}
+          {...props}
+        />
+      </SheetTrigger>
+      <SheetContent side="left" className="flex flex-col" aria-describedby="">
+        {/* HEADER ELEMENTS: SITE NAME, CLOSE BUTTON */}
+        <SheetHeader>
+          <MenuHeader />
+        </SheetHeader>
 
-          {/* MAIN NAV ACCORDION CONTENTS OF MOBILE MENU */}
-          <div className="flex-1 overflow-auto">
-            <MenuBody linkSections={linkSections} onToggle={onToggle} />
-          </div>
+        {/* MAIN NAV ACCORDION CONTENTS OF MOBILE MENU */}
+        <div className="flex-1 overflow-auto">
+          <MenuBody linkSections={linkSections} onToggle={onToggle} />
+        </div>
 
-          {/* FOOTER ELEMENTS: SEARCH, LIGHT/DARK, LANGUAGES */}
-          <SheetFooter className="h-[108px] justify-center border-t border-body-light px-4 py-0">
-            <MenuFooter
-              onToggle={onToggle}
-              toggleSearch={toggleSearch}
-              toggleColorMode={toggleColorMode}
-            />
-          </SheetFooter>
-        </SheetContent>
-      </Sheet>
-    </>
+        {/* FOOTER ELEMENTS: SEARCH, LIGHT/DARK, LANGUAGES */}
+        <SheetFooter className="h-[108px] justify-center border-t border-body-light px-4 py-0">
+          <MenuFooter
+            onToggle={onToggle}
+            toggleSearch={toggleSearch}
+            toggleColorMode={toggleColorMode}
+          />
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
   )
 }