@@ -85,7 +77,7 @@ export function BlogPageClient({
nextPage?: number | null
}
- setPosts((current) => sortBlogPosts([...current, ...(data.posts ?? [])]))
+ setPosts((current) => [...current, ...(data.posts ?? [])])
setHasNextPage(Boolean(data.hasNextPage))
setNextPage(data.nextPage ?? null)
})
diff --git a/src/components/blog/BlogPost.tsx b/src/components/blog/BlogPost.tsx
index 1fb0e58f..cf0ba528 100644
--- a/src/components/blog/BlogPost.tsx
+++ b/src/components/blog/BlogPost.tsx
@@ -113,7 +113,7 @@ export async function BlogPost({ slug, locale }: BlogPostProps) {
{locale === "de" ? "Zurück" : "Back"}
diff --git a/src/components/blog/MarkdownContent.tsx b/src/components/blog/MarkdownContent.tsx
index c9f73450..ce066949 100644
--- a/src/components/blog/MarkdownContent.tsx
+++ b/src/components/blog/MarkdownContent.tsx
@@ -31,19 +31,20 @@ const CUSTOM_TAG_COMPONENTS = {
} as const
const htmlClassName = [
- "[&_h1]:mb-5 [&_h1]:mt-12 [&_h1]:text-4xl [&_h1]:font-semibold [&_h1]:leading-tight [&_h1:first-child]:mt-0",
- "[&_h2]:mb-4 [&_h2]:mt-10 [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:leading-tight [&_h2:first-child]:mt-0",
- "[&_h3]:mb-3 [&_h3]:mt-8 [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:leading-snug [&_h3:first-child]:mt-0",
- "[&_h4]:mb-3 [&_h4]:mt-7 [&_h4]:text-lg [&_h4]:font-semibold [&_h4]:leading-snug [&_h4:first-child]:mt-0",
- "[&_p]:mb-5 [&_p]:text-white/75 [&_p]:leading-7",
- "[&_ul]:mb-6 [&_ul]:mt-2 [&_ul]:list-disc [&_ul]:pl-6",
- "[&_ol]:mb-6 [&_ol]:mt-2 [&_ol]:list-decimal [&_ol]:pl-6",
+ "[&_h1]:mb-4 [&_h1]:mt-12 [&_h1]:text-4xl [&_h1]:font-semibold [&_h1]:leading-tight [&_h1:first-child]:mt-0 [&_h1]:tracking-normal",
+ "[&_h2]:mb-3 [&_h2]:mt-10 [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:leading-tight [&_h2:first-child]:mt-0 [&_h2]:tracking-normal",
+ "[&_h3]:mb-2 [&_h3]:mt-8 [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:leading-snug [&_h3:first-child]:mt-0 [&_h3]:tracking-normal",
+ "[&_h4]:mb-2 [&_h4]:mt-7 [&_h4]:text-lg [&_h4]:font-semibold [&_h4]:leading-snug [&_h4:first-child]:mt-0 [&_h4]:tracking-normal",
+ "[&_p]:mb-4 [&_p]:text-white/75 [&_p]:leading-6",
+ "[&_strong]:tracking-wide [&_strong]:text-white",
+ "[&_ul]:mb-4 [&_ul]:mt-2 [&_ul]:list-disc [&_ul]:pl-6",
+ "[&_ol]:mb-4 [&_ol]:mt-2 [&_ol]:list-decimal [&_ol]:pl-6",
"[&_li]:text-white/75 [&_li]:mb-2",
"[&_li::marker]:text-white/50",
"[&_pre]:my-8 [&_pre]:overflow-x-auto [&_pre]:rounded-2xl [&_pre]:border [&_pre]:border-white/10 [&_pre]:bg-black/30 [&_pre]:p-4",
"[&_code]:font-mono [&_code]:text-sm [&_code]:text-white/90",
"[&_img]:my-8 [&_img]:rounded-2xl [&_img]:border [&_img]:border-white/5 [&_img]:shadow-md",
- "[&_a]:text-brand! [&_a]:hover:underline [&_a]:underline-offset-4 [&_a]:decoration-brand/45 hover:[&_a]:decoration-brand",
+ "[&_a]:relative [&_a]:inline-block [&_a]:text-brand! [&_a]:no-underline [&_a]:transition-colors [&_a]:after:pointer-events-none [&_a]:after:absolute [&_a]:after:bottom-0 [&_a]:after:left-0 [&_a]:after:h-px [&_a]:after:w-full [&_a]:after:origin-left [&_a]:after:scale-x-0 [&_a]:after:bg-current [&_a]:after:transition-transform [&_a]:after:duration-300 [&_a]:after:ease-out [&_a:hover]:after:scale-x-100",
].join(" ")
const decodeHtmlEntities = (value: string) =>
diff --git a/src/components/cards/NodeCard.tsx b/src/components/cards/NodeCard.tsx
index 7b91d17a..284e66dd 100644
--- a/src/components/cards/NodeCard.tsx
+++ b/src/components/cards/NodeCard.tsx
@@ -18,7 +18,7 @@ export async function NodeCard({ locale, animationDelay = 0 }: NodeTabsCardProps
tone="pink"
animationDelay={animationDelay}
>
-
+
void
-}
-
-const NavSubMenu: React.FC
= ({ items, onSelect }) => {
- return (
-
- {items.map((subItem, index) => (
-
- onSelect?.(subItem)}
- className="group flex h-14 items-center gap-2 rounded-lg p-2 hover:bg-white/10 cursor-pointer">
-
- {subItem.icon}
-
-
-
{subItem.title}
-
{subItem.description}
-
- ))}
-
-
+
-
+
)
diff --git a/src/components/navigation/NavigationCursor.tsx b/src/components/navigation/NavigationCursor.tsx
new file mode 100644
index 00000000..37d5ca3a
--- /dev/null
+++ b/src/components/navigation/NavigationCursor.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import { m as motion, useMotionValue, useSpring } from "motion/react"
+import React, { forwardRef, useImperativeHandle } from "react"
+
+export interface NavigationCursorHandle {
+ moveTo: (element: HTMLElement, container: HTMLElement) => void
+ hide: () => void
+}
+
+const NavigationCursor = forwardRef((_, ref) => {
+ const x = useSpring(useMotionValue(0), { stiffness: 260, damping: 30, mass: 0.9 })
+ const opacity = useSpring(useMotionValue(0), { stiffness: 260, damping: 30, mass: 0.9 })
+ const width = useSpring(useMotionValue(0), { stiffness: 260, damping: 30, mass: 0.9 })
+
+ useImperativeHandle(ref, () => ({
+ moveTo: (element, container) => {
+ const elementRect = element.getBoundingClientRect()
+ const containerRect = container.getBoundingClientRect()
+
+ x.set(elementRect.left - containerRect.left)
+ width.set(elementRect.width)
+ opacity.set(1)
+ },
+ hide: () => {
+ opacity.set(0)
+ },
+ }), [opacity, width, x])
+
+ return (
+
+ )
+})
+
+NavigationCursor.displayName = "NavigationCursor"
+
+export { NavigationCursor }
diff --git a/src/components/navigation/NavigationDesktop.tsx b/src/components/navigation/NavigationDesktop.tsx
index ce24419c..8a399dd3 100644
--- a/src/components/navigation/NavigationDesktop.tsx
+++ b/src/components/navigation/NavigationDesktop.tsx
@@ -1,98 +1,75 @@
"use client"
import { cn } from "@/lib/utils"
-import { useOutsideClick } from "@/hooks/useOutsideClick"
+import { useNavigationScrollState } from "@/hooks/useNavigationScrollState"
+import { useNavigationViewModel } from "@/hooks/useNavigationViewModel"
import { type AppLocale } from "@/lib/i18n"
-import type { Footer, NavbarItem } from "@/payload-types"
-import { Button, Container } from "@code0-tech/pictor"
-import { SiDiscord, SiGithub } from "@icons-pack/react-simple-icons"
-import { AnimatePresence, m as motion, useMotionValue, useSpring } from "motion/react"
+import type { NavbarButtonData } from "@/lib/navigation"
+import type { NavbarItem } from "@/payload-types"
+import {
+ NavigationMenu,
+ NavigationMenuContent,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+ NavigationMenuTrigger,
+} from "@/components/ui/NavigationMenu"
+import { Container } from "@code0-tech/pictor"
+import { AnimatePresence, m as motion } from "motion/react"
import Image from "next/image"
import Link from "next/link"
-import React, { useLayoutEffect, useMemo, useRef, useState } from "react"
-import { NavSubMenu } from "./NavSubMenu"
-import { NavTab } from "./NavTab"
-import { fadeInUp, mapNavbarItems, type SubNavItem } from "@/lib/navigation"
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react"
+import { NavigationCursor, type NavigationCursorHandle } from "./NavigationCursor"
+import { NavigationLink } from "./NavigationLink"
+import { NavigationSubMenu } from "./NavigationSubMenu"
type NavigationDesktopProps = {
locale: AppLocale
items: NavbarItem[]
- footer: Footer | null
+ buttons: NavbarButtonData[]
}
-const NavigationDesktop: React.FC = ({ locale, items, footer }) => {
+const NavigationDesktop: React.FC = ({ locale, items, buttons }) => {
const rootRef = useRef(null)
- const submenuContentRef = useRef(null)
const navTabsRef = useRef(null)
- const subMenuRef = useOutsideClick(() => setActiveSubMenu(null))
- const [isScrolled, setIsScrolled] = useState(false)
- const [activeSubMenu, setActiveSubMenu] = useState(null)
- const [hoveredSubMenu, setHoveredSubMenu] = useState(null)
+ const submenuContentRef = useRef(null)
+ const cursorRef = useRef(null)
+ const suppressMenuOpenRef = useRef(false)
+ const [activeMenuValue, setActiveMenuValue] = useState(null)
+ const [shellInsetWidth, setShellInsetWidth] = useState(0)
const [submenuHeight, setSubmenuHeight] = useState(0)
- const [overlayOffsetLeft, setOverlayOffsetLeft] = useState(0)
- const [overlayPosition, setOverlayPosition] = useState({ left: 0, width: 0, opacity: 0 })
- const cursorX = useSpring(useMotionValue(0), { stiffness: 260, damping: 30, mass: 0.9 })
- const cursorOpacity = useSpring(useMotionValue(0), { stiffness: 260, damping: 30, mass: 0.9 })
- const cursorWidth = useSpring(useMotionValue(0), { stiffness: 260, damping: 30, mass: 0.9 })
- const homeHref = `/${locale}`
- const navbarItems = useMemo(() => mapNavbarItems(items, locale), [items, locale])
- const githubHref = footer?.socialLinks?.find((socialLink) => socialLink.platform === "github")?.url || "/"
- const discordHref = footer?.socialLinks?.find((socialLink) => socialLink.platform === "discord")?.url || "/"
-
- const updateIndicatorPosition = (nextPosition: { left: number; width: number; opacity: number }) => {
- cursorX.set(nextPosition.left)
- cursorWidth.set(nextPosition.width)
- cursorOpacity.set(nextPosition.opacity)
- setOverlayPosition(nextPosition)
- }
-
- useLayoutEffect(() => {
- let frame = 0
- const scrollOpenThreshold = 8
- const scrollCloseThreshold = 3
-
- const handleScroll = () => {
- if (frame) return
-
- frame = window.requestAnimationFrame(() => {
- frame = 0
+ const { homeHref, navbarItems, navbarButtons } = useNavigationViewModel(locale, items, buttons)
+ const isScrolled = useNavigationScrollState({
+ onScroll: () => {
+ suppressMenuOpenRef.current = true
+ setActiveMenuValue(null)
+ cursorRef.current?.hide()
+ },
+ })
- setIsScrolled((prevIsScrolled) => {
- const nextIsScrolled = prevIsScrolled
- ? window.scrollY > scrollCloseThreshold
- : window.scrollY > scrollOpenThreshold
+ const navItemClassName = "relative z-50 flex cursor-pointer items-center gap-2 rounded-xl px-4 py-1 font-medium"
+ const navTriggerClassName = cn(navItemClassName, "h-auto pr-1 bg-transparent text-base text-white hover:bg-transparent focus:bg-transparent data-popup-open:bg-transparent data-open:bg-transparent")
+ const activeMenuItem = navbarItems.find((item) => item.title === activeMenuValue)
+ const activeSubMenu = activeMenuItem?.subMenu?.length ? activeMenuItem.subMenu : null
+ const scrolledRightInsetOffset = 6
+ const shellTransition = {
+ duration: 0.5,
+ ease: [0.16, 1, 0.3, 1],
+ } as const
+ const shellInset = isScrolled ? shellInsetWidth : 0
+ const shellRightInset = isScrolled ? shellInsetWidth + scrolledRightInsetOffset : 0
- if (prevIsScrolled !== nextIsScrolled && nextIsScrolled) {
- setActiveSubMenu(null)
- }
+ useEffect(() => {
+ if (!isScrolled) return
- return prevIsScrolled === nextIsScrolled ? prevIsScrolled : nextIsScrolled
- })
- })
- }
-
- if (window.scrollY > scrollOpenThreshold) {
- setIsScrolled(true)
- }
- window.addEventListener("scroll", handleScroll)
-
- return () => {
- if (frame) {
- window.cancelAnimationFrame(frame)
- }
- window.removeEventListener("scroll", handleScroll)
- }
- }, [])
-
- useLayoutEffect(() => {
- if (hoveredSubMenu) {
- setActiveSubMenu(hoveredSubMenu)
- }
- }, [hoveredSubMenu, isScrolled])
+ setActiveMenuValue(null)
+ cursorRef.current?.hide()
+ }, [isScrolled])
useLayoutEffect(() => {
const element = submenuContentRef.current
- if (!element) {
+
+ if (!element || !activeSubMenu || !isScrolled) {
setSubmenuHeight(0)
return
}
@@ -107,196 +84,212 @@ const NavigationDesktop: React.FC = ({ locale, items, fo
resizeObserver.observe(element)
return () => resizeObserver.disconnect()
- }, [activeSubMenu])
+ }, [activeSubMenu, isScrolled])
useLayoutEffect(() => {
- const rootElement = rootRef.current
- const navTabsElement = navTabsRef.current
- if (!rootElement || !navTabsElement) {
- setOverlayOffsetLeft(0)
+ const element = rootRef.current
+
+ if (!element) {
+ setShellInsetWidth(0)
return
}
const measure = () => {
- const rootRect = rootElement.getBoundingClientRect()
- const navTabsRect = navTabsElement.getBoundingClientRect()
- setOverlayOffsetLeft(navTabsRect.left - rootRect.left)
+ setShellInsetWidth(element.clientWidth * 0.1)
}
measure()
const resizeObserver = new ResizeObserver(measure)
- resizeObserver.observe(rootElement)
- resizeObserver.observe(navTabsElement)
+ resizeObserver.observe(element)
return () => resizeObserver.disconnect()
- }, [isScrolled])
+ }, [])
+
+ const updateIndicatorFromElement = (element: HTMLElement) => {
+ if (!navTabsRef.current) return
+ cursorRef.current?.moveTo(element, navTabsRef.current)
+ }
return (
-
+
{
+ suppressMenuOpenRef.current = false
+ }}
onMouseLeave={() => {
- cursorOpacity.set(0)
- setOverlayPosition((prev) => ({ ...prev, opacity: 0 }))
- setActiveSubMenu(null)
- setHoveredSubMenu(null)
+ cursorRef.current?.hide()
+ setActiveMenuValue(null)
}}
>
-
-
-
-
-
+
+
+
+
-
+
-
+
-
-
- {navbarItems.map((item) => (
- {
- setActiveSubMenu(item.subMenu || null)
- setHoveredSubMenu(item.subMenu || null)
- }}
- />
- ))}
-
-
+
{
+ const nextFocusedElement = event.relatedTarget
+
+ if (!(nextFocusedElement instanceof Node) || !event.currentTarget.contains(nextFocusedElement)) {
+ cursorRef.current?.hide()
+ }
+ }}
+ >
+
{
+ if (value && suppressMenuOpenRef.current) return
+ if (isScrolled && !value) return
+
+ setActiveMenuValue(value)
+ }}
+ delay={40}
+ closeDelay={80}
+ align="start"
+ className="hidden md:flex max-w-none flex-none"
+ >
+
+ {navbarItems.map((item) => {
+ const itemValue = item.title
+ const hasSubMenu = Boolean(item.subMenu?.length)
+
+ return (
+
+ {hasSubMenu ? (
+ <>
+ {
+ updateIndicatorFromElement(event.currentTarget)
+
+ if (isScrolled && !suppressMenuOpenRef.current) {
+ setActiveMenuValue(itemValue)
+ }
+ }}
+ onFocusCapture={(event) => {
+ updateIndicatorFromElement(event.currentTarget)
+
+ if (isScrolled) {
+ setActiveMenuValue(itemValue)
+ }
+ }}
+ >
+
+ {item.title}
+
+
+ {!isScrolled && (
+
+ setActiveMenuValue(null)}
+ />
+
+ )}
+
+ ) : item.href ? (
+ {
+ updateIndicatorFromElement(event.currentTarget)
+ setActiveMenuValue(null)
+ }}
+ onFocusCapture={(event) => {
+ updateIndicatorFromElement(event.currentTarget)
+ setActiveMenuValue(null)
+ }}
+ >
+ }
+ className={cn(navItemClassName, "text-base text-white hover:bg-transparent focus:bg-transparent")}
+ >
+ {item.title}
+
+
+ ) : null}
+
+ )
+ })}
+
+
+
-
-
-
-
-
-
+ {navbarButtons.map((button) => (
+
+ ))}
-
+ {
- setActiveSubMenu(null)
- setHoveredSubMenu(null)
- }}
+ onSelect={() => setActiveMenuValue(null)}
/>
-
- {activeSubMenu && !isScrolled && (
-
-
- {
- setActiveSubMenu(null)
- setHoveredSubMenu(null)
- }}
- />
-
-
)
}
-const Cursor: React.FC<{
- x: ReturnType
- width: ReturnType
- opacity: ReturnType
-}> = ({ x, width, opacity }) => {
- return (
-
- )
-}
-
export { NavigationDesktop }
diff --git a/src/components/navigation/NavigationLink.tsx b/src/components/navigation/NavigationLink.tsx
new file mode 100644
index 00000000..dee5c49d
--- /dev/null
+++ b/src/components/navigation/NavigationLink.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import type { NavButton } from "@/lib/navigation"
+import { cn } from "@/lib/utils"
+import { Button } from "@code0-tech/pictor"
+import Link from "next/link"
+import type { MouseEventHandler } from "react"
+
+interface NavigationLinkProps {
+ button: NavButton
+ className?: string
+ onClick?: MouseEventHandler
+}
+
+export function NavigationLink({ button, className, onClick }: NavigationLinkProps) {
+ return (
+
+
+
+ )
+}
diff --git a/src/components/navigation/NavigationMobile.tsx b/src/components/navigation/NavigationMobile.tsx
index c7129232..761a962f 100644
--- a/src/components/navigation/NavigationMobile.tsx
+++ b/src/components/navigation/NavigationMobile.tsx
@@ -1,82 +1,62 @@
"use client"
import { cn } from "@/lib/utils"
+import { useNavigationScrollState } from "@/hooks/useNavigationScrollState"
+import { useNavigationViewModel } from "@/hooks/useNavigationViewModel"
import { useOutsideClick } from "@/hooks/useOutsideClick"
import { type AppLocale } from "@/lib/i18n"
-import type { Footer, NavbarItem } from "@/payload-types"
-import { Button, Container } from "@code0-tech/pictor"
-import { SiGithub } from '@icons-pack/react-simple-icons'
-import { IconChevronUp, IconMenu2, IconX } from "@tabler/icons-react"
+import type { NavbarButtonData } from "@/lib/navigation"
+import type { NavbarItem } from "@/payload-types"
+import { Container } from "@code0-tech/pictor"
+import { IconMenu2, IconX } from "@tabler/icons-react"
import { AnimatePresence, m as motion } from "motion/react"
import Image from "next/image"
import Link from "next/link"
-import React, { useEffect, useMemo, useRef, useState } from "react"
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react"
import { useWebHaptics } from "web-haptics/react"
-import { fadeInUp, mapNavbarItems } from "@/lib/navigation"
+import { NavigationLink } from "./NavigationLink"
+import { NavigationMobileItem } from "./NavigationMobileItem"
type NavigationMobileProps = {
locale: AppLocale
items: NavbarItem[]
- footer: Footer | null
+ buttons: NavbarButtonData[]
}
-const NavigationMobile: React.FC = ({ locale, items, footer }) => {
+const NavigationMobile: React.FC = ({ locale, items, buttons }) => {
const { trigger } = useWebHaptics()
const menuRef = useOutsideClick(() => setIsOpen(false))
+ const rootRef = useRef(null)
const wasOpenRef = useRef(false)
- const [isScrolled, setIsScrolled] = useState(false)
const [isOpen, setIsOpen] = useState(false)
const [mobileOpenKey, setMobileOpenKey] = useState(null)
const [isMenuClosing, setIsMenuClosing] = useState(false)
- const homeHref = `/${locale}`
- const navbarItems = useMemo(() => mapNavbarItems(items, locale), [items, locale])
- const githubHref = footer?.socialLinks?.find((socialLink) => socialLink.platform === "github")?.url || "/"
- const discordHref = footer?.socialLinks?.find((socialLink) => socialLink.platform === "discord")?.url || "/"
- const shellTransition = {
+ const [shellInsetWidth, setShellInsetWidth] = useState(0)
+ const { homeHref, navbarItems, navbarButtons } = useNavigationViewModel(locale, items, buttons)
+ const menuTransition = {
duration: 0.34,
- ease: [0.22, 1, 0.36, 1] as const,
+ ease: [0.16, 1, 0.3, 1] as const,
}
- const menuTransition = {
- duration: 0.24,
- ease: [0.22, 1, 0.36, 1] as const,
+ const shellTransition = {
+ duration: 0.46,
+ ease: [0.16, 1, 0.3, 1] as const,
}
const isShellExpanded = isOpen || isMenuClosing
-
- useEffect(() => {
- let frame = 0
- const scrollOpenThreshold = 8
- const scrollCloseThreshold = 3
-
- const handleScroll = () => {
- if (frame) return
-
- frame = window.requestAnimationFrame(() => {
- frame = 0
-
- setIsScrolled((prevIsScrolled) => {
- const nextIsScrolled = prevIsScrolled
- ? window.scrollY > scrollCloseThreshold
- : window.scrollY > scrollOpenThreshold
-
- return prevIsScrolled === nextIsScrolled ? prevIsScrolled : nextIsScrolled
- })
-
- setIsOpen((prevIsOpen) => (prevIsOpen ? false : prevIsOpen))
- })
- }
-
- if (window.scrollY > scrollOpenThreshold) {
- setIsScrolled(true)
- }
- window.addEventListener("scroll", handleScroll)
-
- return () => {
- if (frame) {
- window.cancelAnimationFrame(frame)
- }
- window.removeEventListener("scroll", handleScroll)
- }
- }, [])
+ const isScrolled = useNavigationScrollState({
+ onScroll: () => setIsOpen((prevIsOpen) => (prevIsOpen ? false : prevIsOpen)),
+ })
+ const expandedHeaderPadding = 8
+ const shellInset = isScrolled && !isShellExpanded ? shellInsetWidth : 0
+ const headerInlinePadding = isShellExpanded
+ ? expandedHeaderPadding
+ : isScrolled
+ ? shellInsetWidth
+ : 0
+ const headerRightPadding = isShellExpanded
+ ? expandedHeaderPadding
+ : isScrolled
+ ? shellInsetWidth + expandedHeaderPadding
+ : 0
useEffect(() => {
let timeoutId: ReturnType | undefined
@@ -85,7 +65,7 @@ const NavigationMobile: React.FC = ({ locale, items, foot
setIsMenuClosing(false)
} else if (wasOpenRef.current) {
setIsMenuClosing(true)
- timeoutId = setTimeout(() => setIsMenuClosing(false), 320)
+ timeoutId = setTimeout(() => setIsMenuClosing(false), 460)
}
wasOpenRef.current = isOpen
@@ -97,13 +77,39 @@ const NavigationMobile: React.FC = ({ locale, items, foot
}
}, [isOpen])
+ useLayoutEffect(() => {
+ const element = rootRef.current
+
+ if (!element) {
+ setShellInsetWidth(0)
+ return
+ }
+
+ const measure = () => {
+ setShellInsetWidth(element.clientWidth * 0.1)
+ }
+
+ measure()
+
+ const resizeObserver = new ResizeObserver(measure)
+ resizeObserver.observe(element)
+
+ return () => resizeObserver.disconnect()
+ }, [])
+
+ const closeMenu = () => {
+ trigger("medium")
+ setIsOpen(false)
+ setMobileOpenKey(null)
+ }
+
return (
-
+
= ({ locale, items, foot
)}
initial={false}
animate={{
- clipPath: isScrolled && !isShellExpanded
- ? "inset(0% 10% 0% 10% round 1rem)"
- : "inset(0% 0% 0% 0% round 1rem)",
+ left: shellInset,
+ right: shellInset,
}}
transition={shellTransition}
/>
@@ -121,8 +126,8 @@ const NavigationMobile: React.FC = ({ locale, items, foot
className="pointer-events-none absolute inset-0 z-10 rounded-2xl border border-white/5"
initial={false}
animate={{
- left: isScrolled && !isShellExpanded ? "10%" : "0%",
- right: isScrolled && !isShellExpanded ? "10%" : "0%",
+ left: shellInset,
+ right: shellInset,
opacity: isScrolled || isShellExpanded ? 1 : 0,
}}
transition={shellTransition}
@@ -131,23 +136,15 @@ const NavigationMobile: React.FC = ({ locale, items, foot
className="relative z-10 flex flex-col overflow-hidden rounded-2xl p-1.5"
initial={false}
>
-
+
{
@@ -155,237 +152,68 @@ const NavigationMobile: React.FC = ({ locale, items, foot
setIsOpen(false)
}}
>
-
-
-
-
-
+
+
+
+