Refine localized header branding
This commit is contained in:
MOH
@@ -1,11 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
|
||||
import { LayoutDashboard, Menu, X } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { Container } from "@/components/layout/container";
|
||||
import { LocaleToggle } from "@/components/layout/locale-toggle";
|
||||
@@ -127,10 +127,15 @@ export function SiteHeader({
|
||||
darkLogoUrl,
|
||||
}: SiteHeaderProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const pathname = usePathname();
|
||||
const locale = useLocale();
|
||||
const t = useTranslations("navigation");
|
||||
const reducedMotion = useReducedMotion();
|
||||
const isArabic = locale === "ar";
|
||||
const brandSubtitle = isArabic
|
||||
? "مــــــطـــــــــــــور ويــــــــــب | فــــــــــــريــــــلانــــــســــــر"
|
||||
: "Webdesigner Bremen | Freelancer";
|
||||
const desktopControlRailClassName =
|
||||
"inline-flex items-center gap-1 rounded-pill border border-border/70 bg-background/80 p-1 shadow-panel backdrop-blur-chrome";
|
||||
const desktopControlButtonClassName =
|
||||
@@ -138,19 +143,40 @@ export function SiteHeader({
|
||||
const mobileControlButtonClassName =
|
||||
"h-10 w-10 rounded-pill border border-border/70 bg-background text-foreground/80 shadow-xs hover:bg-accent hover:text-foreground";
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 24);
|
||||
};
|
||||
|
||||
handleScroll();
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className="fixed inset-x-0 top-3 z-40 bg-transparent">
|
||||
<Container className="max-w-[88rem]">
|
||||
<div className="relative grid min-h-[4.5rem] grid-cols-[auto_1fr_auto] items-center gap-3 lg:min-h-[5rem]">
|
||||
<div className="col-start-1 flex items-center justify-self-start">
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={isScrolled ? { opacity: 0, x: -28 } : { opacity: 1, x: 0 }}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
|
||||
className={cn(
|
||||
"col-start-1 flex items-center justify-self-start",
|
||||
isScrolled ? "lg:pointer-events-none lg:invisible" : "",
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href={getLocalizedPath(locale)}
|
||||
className="inline-flex items-center gap-2.5 rounded-pill px-1 py-1 sm:gap-3 lg:py-2"
|
||||
>
|
||||
<motion.span
|
||||
initial={{ opacity: 0, x: -18, scale: 0.82, rotate: -14, filter: "blur(10px)" }}
|
||||
initial={reducedMotion ? false : isArabic ? { opacity: 0, x: 18, scale: 0.82, rotate: 14, filter: "blur(10px)" } : { opacity: 0, x: -18, scale: 0.82, rotate: -14, filter: "blur(10px)" }}
|
||||
animate={{ opacity: 1, x: 0, scale: 1, rotate: 0, filter: "blur(0px)" }}
|
||||
transition={{ type: "spring", stiffness: 240, damping: 20, mass: 0.9 }}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.32, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="relative inline-flex items-center justify-center [transform-style:preserve-3d]"
|
||||
>
|
||||
<SiteLogo
|
||||
@@ -162,45 +188,68 @@ export function SiteHeader({
|
||||
/>
|
||||
</motion.span>
|
||||
<motion.span
|
||||
initial="hidden"
|
||||
initial={isArabic ? false : "hidden"}
|
||||
animate="visible"
|
||||
variants={brandShellVariants}
|
||||
variants={reducedMotion || isArabic ? undefined : brandShellVariants}
|
||||
className="flex flex-col justify-center"
|
||||
>
|
||||
<span className="flex flex-wrap items-center text-[1.28rem] font-black leading-[1.2]">
|
||||
{brandTitleCharacters.map(({ character, tone }, index) => (
|
||||
<motion.span
|
||||
key={`${character}-${index}`}
|
||||
variants={brandCharacterVariants}
|
||||
className={cn(
|
||||
character === " " ? "mr-[0.11em] w-[0.11em]" : "mr-[0.005em] inline-block",
|
||||
tone === "base" ? "text-[hsl(var(--hero-ink))] dark:text-foreground" : "",
|
||||
tone === "accent" ? "text-primary" : "",
|
||||
)}
|
||||
>
|
||||
{character === " " ? "\u00A0" : character}
|
||||
</motion.span>
|
||||
))}
|
||||
</span>
|
||||
{isArabic ? (
|
||||
<motion.span
|
||||
initial={reducedMotion ? false : { opacity: 0, x: 16, filter: "blur(8px)" }}
|
||||
animate={{ opacity: 1, x: 0, filter: "blur(0px)" }}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.42, delay: 0.12, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="flex flex-col text-[1.28rem] font-black leading-[1.2]"
|
||||
dir="rtl"
|
||||
>
|
||||
<span className="text-[hsl(var(--hero-ink))] dark:text-foreground">مــــحـــمــد</span>
|
||||
<span className="text-primary">فــــرواتـــي</span>
|
||||
</motion.span>
|
||||
) : (
|
||||
<span className="flex flex-wrap items-center text-[1.28rem] font-black leading-[1.2]">
|
||||
{brandTitleCharacters.map(({ character, tone }, index) => (
|
||||
<motion.span
|
||||
key={`${character}-${index}`}
|
||||
variants={reducedMotion ? undefined : brandCharacterVariants}
|
||||
className={cn(
|
||||
character === " " ? "mr-[0.11em] w-[0.11em]" : "mr-[0.005em] inline-block",
|
||||
tone === "base" ? "text-[hsl(var(--hero-ink))] dark:text-foreground" : "",
|
||||
tone === "accent" ? "text-primary" : "",
|
||||
)}
|
||||
>
|
||||
{character === " " ? "\u00A0" : character}
|
||||
</motion.span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 20, clipPath: "inset(0 0 100% 0)", filter: "blur(10px)" }}
|
||||
animate={{ opacity: 1, y: 0, clipPath: "inset(0 0 0% 0)", filter: "blur(0px)" }}
|
||||
transition={{ duration: 0.7, delay: 0.34, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="-mt-0.5 text-[0.65rem] font-light leading-[1.2] tracking-[0.008em] text-foreground/78"
|
||||
initial={
|
||||
reducedMotion
|
||||
? false
|
||||
: isArabic
|
||||
? { opacity: 0, x: -16, clipPath: "inset(0 0 0 100%)", filter: "blur(10px)" }
|
||||
: { opacity: 0, x: 16, clipPath: "inset(0 100% 0 0)", filter: "blur(10px)" }
|
||||
}
|
||||
animate={{ opacity: 1, x: 0, y: 0, clipPath: "inset(0 0 0% 0)", filter: "blur(0px)" }}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.7, delay: 0.34, ease: [0.22, 1, 0.36, 1] }}
|
||||
className={cn(
|
||||
"-mt-0.5 text-[0.65rem] font-light leading-[1.2] tracking-[0.008em] text-foreground/78",
|
||||
isArabic ? "text-right" : "",
|
||||
)}
|
||||
dir={isArabic ? "rtl" : undefined}
|
||||
>
|
||||
Webdesigner Bremen | Freelancer
|
||||
{brandSubtitle}
|
||||
</motion.span>
|
||||
</motion.span>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="pointer-events-none absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 lg:flex">
|
||||
<div className="col-start-2 hidden justify-center lg:flex">
|
||||
<motion.nav
|
||||
initial={{ opacity: 0, y: -8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.28, ease: "easeOut" }}
|
||||
initial={false}
|
||||
animate={isScrolled ? { y: -1, scale: 0.985 } : { y: 0, scale: 1 }}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
|
||||
className={cn(
|
||||
"pointer-events-auto inline-flex items-center gap-1 rounded-pill border border-border/70 bg-background/80 p-1.5 shadow-panel backdrop-blur-chrome",
|
||||
"inline-flex items-center gap-1 rounded-pill border border-border/70 bg-background/80 p-1.5 shadow-panel backdrop-blur-chrome",
|
||||
isArabic ? "w-auto max-w-none" : "min-w-[27rem] max-w-[42rem]",
|
||||
)}
|
||||
>
|
||||
@@ -208,13 +257,16 @@ export function SiteHeader({
|
||||
</motion.nav>
|
||||
</div>
|
||||
|
||||
<div className="hidden items-center justify-end lg:flex">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.28, ease: "easeOut", delay: 0.03 }}
|
||||
className={desktopControlRailClassName}
|
||||
>
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={isScrolled ? { opacity: 0, x: 28 } : { opacity: 1, x: 0 }}
|
||||
transition={reducedMotion ? { duration: 0 } : { duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
|
||||
className={cn(
|
||||
"col-start-3 hidden items-center justify-end lg:flex",
|
||||
isScrolled ? "pointer-events-none invisible" : "",
|
||||
)}
|
||||
>
|
||||
<div className={desktopControlRailClassName}>
|
||||
<LocaleToggle
|
||||
locale={locale}
|
||||
className={desktopControlButtonClassName}
|
||||
@@ -237,8 +289,8 @@ export function SiteHeader({
|
||||
</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user