feat: improved mobile navigation

Author: mvriu5

src/components/navigation/NavigationMobile.tsx

@@ -27,11 +27,13 @@ const NavigationMobile: React.FC<NavigationMobileProps> = ({ locale, items, butt
     const { trigger } = useWebHaptics()
     const menuRef = useOutsideClick<HTMLElement>(() => setIsOpen(false))
     const rootRef = useRef<HTMLDivElement>(null)
+    const menuContentRef = useRef<HTMLDivElement>(null)
     const wasOpenRef = useRef(false)
     const [isOpen, setIsOpen] = useState(false)
     const [mobileOpenKey, setMobileOpenKey] = useState<string | null>(null)
     const [isMenuClosing, setIsMenuClosing] = useState(false)
     const [shellInsetWidth, setShellInsetWidth] = useState(0)
+    const [menuHeight, setMenuHeight] = useState(0)
     const { homeHref, navbarItems, navbarButtons, logo: navigationLogo } = useNavigationViewModel(locale, items, buttons, logo)
     const menuTransition = {
         duration: 0.34,
@@ -43,7 +45,7 @@ const NavigationMobile: React.FC<NavigationMobileProps> = ({ locale, items, butt
     }
     const isShellExpanded = isOpen || isMenuClosing
     const isScrolled = useNavigationScrollState({
-        onScroll: () => setIsOpen((prevIsOpen) => (prevIsOpen ? false : prevIsOpen)),
+        onScroll: isOpen ? () => setIsOpen(false) : undefined,
     })
     const expandedHeaderPadding = 8
     const shellInset = isScrolled && !isShellExpanded ? shellInsetWidth : 0
@@ -97,6 +99,26 @@ const NavigationMobile: React.FC<NavigationMobileProps> = ({ locale, items, butt
         return () => resizeObserver.disconnect()
     }, [])
 
+    useLayoutEffect(() => {
+        const element = menuContentRef.current
+
+        if (!element || !isOpen) {
+            setMenuHeight(0)
+            return
+        }
+
+        const measure = () => {
+            setMenuHeight(element.scrollHeight)
+        }
+
+        measure()
+
+        const resizeObserver = new ResizeObserver(measure)
+        resizeObserver.observe(element)
+
+        return () => resizeObserver.disconnect()
+    }, [isOpen, navbarItems, navbarButtons])
+
     const closeMenu = () => {
         trigger("medium")
         setIsOpen(false)
@@ -113,7 +135,7 @@ const NavigationMobile: React.FC<NavigationMobileProps> = ({ locale, items, butt
                     <motion.div
                         className={cn(
                             "pointer-events-none absolute inset-0 rounded-2xl shadow-sm",
-                            (isScrolled || isShellExpanded) ? "bg-primary/50 backdrop-blur-lg" : "bg-transparent shadow-none",
+                            (isScrolled || isShellExpanded) ? "bg-primary/70 backdrop-blur-md" : "bg-transparent shadow-none",
                         )}
                         initial={false}
                         animate={{
@@ -175,15 +197,18 @@ const NavigationMobile: React.FC<NavigationMobileProps> = ({ locale, items, butt
                                 <motion.div
                                     id="mobile-navigation-menu"
                                     key="mobile-menu"
-                                    layout
                                     initial={{ opacity: 0, y: -4, height: 0 }}
-                                    animate={{ opacity: 1, y: 0, height: "auto" }}
+                                    animate={{ opacity: 1, y: 0, height: menuHeight }}
                                     exit={{ opacity: 0, y: -4, height: 0 }}
-                                    transition={menuTransition}
+                                    transition={{
+                                        height: menuTransition,
+                                        opacity: { duration: 0.18, ease: "easeOut" },
+                                        y: menuTransition,
+                                    }}
                                     style={{ overflow: "hidden" }}
                                     className="flex flex-col gap-2 px-2"
                                 >
-                                    <div className="flex flex-col gap-1">
+                                    <div ref={menuContentRef} className="flex flex-col gap-1">
                                         {navbarItems.map((item) => {
                                             const isOpenAcc = mobileOpenKey === item.title
 

src/components/navigation/NavigationMobileItem.tsx

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils"
 import { IconChevronUp } from "@tabler/icons-react"
 import { AnimatePresence, m as motion } from "motion/react"
 import Link from "next/link"
+import { useLayoutEffect, useRef, useState } from "react"
 import { NavigationSubMenu } from "./NavigationSubMenu"
 
 interface NavigationMobileItemProps {
@@ -20,9 +21,31 @@ const mobileNavItemClassName = navigationMenuTriggerStyle({
 })
 
 export function NavigationMobileItem({ item, isOpen, onToggle, onNavigate }: NavigationMobileItemProps) {
+    const submenuContentRef = useRef<HTMLDivElement>(null)
+    const [submenuHeight, setSubmenuHeight] = useState(0)
     const isAccordion = Boolean(item.subMenu?.length)
     const hasRoute = Boolean(item.href)
 
+    useLayoutEffect(() => {
+        const element = submenuContentRef.current
+
+        if (!element || !isOpen) {
+            setSubmenuHeight(0)
+            return
+        }
+
+        const measure = () => {
+            setSubmenuHeight(element.scrollHeight)
+        }
+
+        measure()
+
+        const resizeObserver = new ResizeObserver(measure)
+        resizeObserver.observe(element)
+
+        return () => resizeObserver.disconnect()
+    }, [isOpen, item.subMenu])
+
     return (
         <div className="flex flex-col">
             {isAccordion ? (
@@ -55,9 +78,8 @@ export function NavigationMobileItem({ item, isOpen, onToggle, onNavigate }: Nav
                     {isOpen && (
                         <motion.div
                             key={`${item.title}-submenu`}
-                            layout
                             initial={{ height: 0, opacity: 0 }}
-                            animate={{ height: "auto", opacity: 1 }}
+                            animate={{ height: submenuHeight, opacity: 1 }}
                             exit={{ height: 0, opacity: 0 }}
                             transition={{
                                 height: {
@@ -71,7 +93,7 @@ export function NavigationMobileItem({ item, isOpen, onToggle, onNavigate }: Nav
                             }}
                             className="overflow-hidden"
                         >
-                            <div className="mt-1 rounded-lg">
+                            <div ref={submenuContentRef} className="mt-1 rounded-lg">
                                 <NavigationSubMenu
                                     items={item.subMenu!}
                                     onSelect={onNavigate}

src/globals/navigation.ts

@@ -9,9 +9,6 @@ export const Navigation: GlobalConfig = {
     read: () => true,
     update: ({ req }) => Boolean(req.user),
   },
-  admin: {
-    group: "Navigation",
-  },
   fields: [
     {
       name: "logo",
@@ -80,7 +77,7 @@ export const Navigation: GlobalConfig = {
                 {
                   name: "icon",
                   type: "text",
-                  required: true,
+                  required: false,
                   admin: {
                     description: 'Tabler Icon Name. Unbekannte Werte fallen auf "cube" zurück.',
                   },

src/migrations/20260531_084500_navigation_globals.ts

@@ -37,7 +37,7 @@ export async function up({ db }: MigrateUpArgs): Promise<void> {
       "id" varchar PRIMARY KEY NOT NULL,
       "key" varchar NOT NULL,
       "href" varchar NOT NULL,
-      "icon" varchar NOT NULL
+      "icon" varchar
     );
 
     CREATE TABLE IF NOT EXISTS "navigation_items_items_sub_menu_locales" (
@@ -48,6 +48,9 @@ export async function up({ db }: MigrateUpArgs): Promise<void> {
       "_parent_id" varchar NOT NULL
     );
 
+    ALTER TABLE "navigation_items_items_sub_menu"
+      ALTER COLUMN "icon" DROP NOT NULL;
+
     CREATE TABLE IF NOT EXISTS "navigation_buttons_buttons" (
       "_order" integer NOT NULL,
       "_parent_id" integer NOT NULL,

src/payload-types.ts

@@ -1515,7 +1515,7 @@ export interface Navigation {
             /**
              * Tabler Icon Name. Unbekannte Werte fallen auf "cube" zurück.
              */
-            icon: string;
+            icon?: string | null;
             id?: string | null;
           }[]
         | null;