moh
6c213699a2
Swap the pill navigation for a macOS-style dock as the primary nav and a slim top menu bar for utilities: - components/ui/dock.tsx: Magic UI Dock/DockIcon (magnification via useSpring/useTransform), ported to the project's framer-motion. - components/layout/site-dock.tsx: bottom dock with the logo as the first icon, each item a real next/link (SEO preserved, active state from the pathname), monochrome squircle tiles, hover tooltips and a "soon" badge for Products; top menu bar keeps locale/sound/theme/admin + a live clock. - (site)/layout.tsx: render SiteDock instead of SiteHeader. Home bento grid and all page content are unchanged.
285 lines
10 KiB
TypeScript
285 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { FolderKanban, Home, Mail, Package, ShieldCheck, User } from "lucide-react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useTheme } from "next-themes";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import { useEffect, useState, type ComponentType } from "react";
|
|
|
|
import { LocaleToggle } from "@/components/layout/locale-toggle";
|
|
import { SoundToggle } from "@/components/sound-toggle";
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
import { Dock, DockIcon } from "@/components/ui/dock";
|
|
import { buildAdminUrl } from "@/lib/admin-routing";
|
|
import { getLocalizedPath, stripLocalePrefix, type AppLocale } from "@/lib/locale";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type SiteDockProps = {
|
|
lightLogoUrl?: string | null;
|
|
darkLogoUrl?: string | null;
|
|
defaultLocale: AppLocale;
|
|
/**
|
|
* Server-computed via `isSuperAdmin()` in the parent layout. This client
|
|
* component only decides whether to *render* the Admin shortcut — it performs
|
|
* no auth check and grants no access; the real guard lives server-side on
|
|
* each admin page/action.
|
|
*/
|
|
isSuperAdmin?: boolean;
|
|
};
|
|
|
|
type NavItem = {
|
|
key: "home" | "about" | "portfolio" | "products" | "contact";
|
|
path: string;
|
|
Icon: ComponentType<{ className?: string }>;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
const navItems: NavItem[] = [
|
|
{ key: "home", path: "", Icon: Home },
|
|
{ key: "about", path: "/about", Icon: User },
|
|
{ key: "portfolio", path: "/portfolio", Icon: FolderKanban },
|
|
{ key: "products", path: "/products", Icon: Package, disabled: true },
|
|
{ key: "contact", path: "/contact", Icon: Mail },
|
|
];
|
|
|
|
function isNavItemActive(currentPath: string, itemPath: string) {
|
|
if (itemPath === "/") {
|
|
return currentPath === "/";
|
|
}
|
|
return currentPath === itemPath || currentPath.startsWith(`${itemPath}/`);
|
|
}
|
|
|
|
function MenuClock({ locale }: { locale: string }) {
|
|
const [time, setTime] = useState("");
|
|
|
|
useEffect(() => {
|
|
const format = () =>
|
|
setTime(
|
|
new Date().toLocaleTimeString(locale === "ar" ? "ar" : locale, {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
}),
|
|
);
|
|
format();
|
|
const id = setInterval(format, 20_000);
|
|
return () => clearInterval(id);
|
|
}, [locale]);
|
|
|
|
return (
|
|
<span
|
|
suppressHydrationWarning
|
|
className="hidden select-none px-1 text-xs font-semibold tabular-nums text-foreground/65 sm:inline"
|
|
>
|
|
{time || "--:--"}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function SiteDock({
|
|
lightLogoUrl,
|
|
darkLogoUrl,
|
|
defaultLocale,
|
|
isSuperAdmin = false,
|
|
}: SiteDockProps) {
|
|
const locale = useLocale();
|
|
const pathname = usePathname();
|
|
const t = useTranslations("navigation");
|
|
const { theme, resolvedTheme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
const isArabic = locale === "ar";
|
|
const currentPath = stripLocalePrefix(pathname);
|
|
const homeHref = getLocalizedPath(locale, "/", defaultLocale);
|
|
const adminHref = buildAdminUrl("/");
|
|
|
|
const activeTheme = theme === "system" ? resolvedTheme : theme;
|
|
const isDark = mounted && activeTheme === "dark";
|
|
const logoSrc = isDark
|
|
? darkLogoUrl || lightLogoUrl || "/logos/dark-primary.svg"
|
|
: lightLogoUrl || darkLogoUrl || "/logos/light-primary.svg";
|
|
|
|
const brandSubtitle = isArabic
|
|
? "مطوّر ويب · فريلانسر"
|
|
: "Webdesigner Bremen · Freelancer";
|
|
|
|
const controlButtonClassName =
|
|
"h-8 w-8 rounded-full border border-transparent text-foreground/70 hover:bg-accent hover:text-foreground";
|
|
|
|
return (
|
|
<>
|
|
{/* ===== Top menu bar (macOS-style utility strip) ===== */}
|
|
<header
|
|
className="fixed inset-x-0 top-0 z-40 border-b border-border/60 bg-background/70 backdrop-blur-chrome"
|
|
style={{ paddingTop: "env(safe-area-inset-top, 0px)" }}
|
|
>
|
|
<div className="mx-auto flex h-12 max-w-[100rem] items-center gap-3 px-4 sm:px-6">
|
|
<Link
|
|
href={homeHref}
|
|
className="flex items-center gap-2 rounded-full px-1 py-1 font-black tracking-tight"
|
|
aria-label="mohfarawati"
|
|
>
|
|
<span className="h-2 w-2 rounded-full bg-primary shadow-[0_0_10px_hsl(var(--primary))]" />
|
|
<span className="text-sm" dir={isArabic ? "rtl" : undefined}>
|
|
{isArabic ? (
|
|
<>
|
|
<span className="text-[hsl(var(--hero-ink))] dark:text-foreground">محمد</span>{" "}
|
|
<span className="text-primary">فرواتي</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="text-[hsl(var(--hero-ink))] dark:text-foreground">MOH</span>
|
|
<span className="text-primary">FARAWATI</span>
|
|
</>
|
|
)}
|
|
</span>
|
|
</Link>
|
|
|
|
<span
|
|
className="hidden border-s border-border/60 ps-3 text-xs font-medium text-foreground/60 md:inline"
|
|
dir={isArabic ? "rtl" : undefined}
|
|
>
|
|
{brandSubtitle}
|
|
</span>
|
|
|
|
<div className="ms-auto flex items-center gap-1">
|
|
<MenuClock locale={locale} />
|
|
<LocaleToggle
|
|
locale={locale}
|
|
defaultLocale={defaultLocale}
|
|
className={controlButtonClassName}
|
|
/>
|
|
<SoundToggle
|
|
ariaLabel={t("soundMute")}
|
|
mutedAriaLabel={t("soundUnmute")}
|
|
variant="ghost"
|
|
className={controlButtonClassName}
|
|
/>
|
|
<ThemeToggle
|
|
ariaLabel={t("themeToggle")}
|
|
variant="ghost"
|
|
className={controlButtonClassName}
|
|
/>
|
|
{isSuperAdmin ? (
|
|
<a
|
|
href={adminHref}
|
|
aria-label="Open admin dashboard"
|
|
className="ms-1 inline-flex h-8 items-center gap-1.5 rounded-full border border-border/60 bg-background/60 px-3 text-xs font-semibold text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
|
|
>
|
|
<ShieldCheck className="h-4 w-4" />
|
|
<span className="hidden lg:inline">Admin</span>
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* ===== Bottom dock (Magic UI) — primary navigation ===== */}
|
|
<div
|
|
className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4"
|
|
style={{ paddingBottom: "calc(0.9rem + env(safe-area-inset-bottom, 0px))" }}
|
|
>
|
|
<Dock
|
|
direction="bottom"
|
|
iconSize={44}
|
|
iconMagnification={74}
|
|
iconDistance={150}
|
|
className="pointer-events-auto border-border/60 bg-background/70 shadow-panel"
|
|
>
|
|
{/* Logo — first icon in the dock */}
|
|
<DockIcon className="group relative overflow-visible rounded-[30%] border border-border/60 bg-foreground/[0.04]">
|
|
<Link
|
|
href={homeHref}
|
|
aria-label="mohfarawati — Home"
|
|
className="flex h-full w-full items-center justify-center rounded-[inherit]"
|
|
>
|
|
<Image
|
|
src={logoSrc}
|
|
alt="mohfarawati"
|
|
width={80}
|
|
height={80}
|
|
sizes="80px"
|
|
priority
|
|
className={cn(
|
|
"h-full w-full rounded-full object-contain transition-opacity duration-300",
|
|
mounted ? "opacity-100" : "opacity-0",
|
|
)}
|
|
/>
|
|
</Link>
|
|
<DockTip label="mohfarawati" />
|
|
</DockIcon>
|
|
|
|
<div className="mx-1 h-8 w-px self-center bg-border/70" aria-hidden />
|
|
|
|
{navItems.map(({ key, path, Icon, disabled }) => {
|
|
const itemPath = path || "/";
|
|
const isActive = isNavItemActive(currentPath, itemPath);
|
|
const label = t(key);
|
|
|
|
const inner = (
|
|
<span className="flex h-full w-full items-center justify-center rounded-[inherit]">
|
|
<Icon className="h-[55%] w-[55%]" />
|
|
</span>
|
|
);
|
|
|
|
return (
|
|
<DockIcon
|
|
key={key}
|
|
className={cn(
|
|
"group relative overflow-visible rounded-[30%] border transition-colors",
|
|
isActive
|
|
? "border-primary/60 bg-primary/10 text-primary"
|
|
: disabled
|
|
? "border-border/50 bg-foreground/[0.03] text-foreground/35"
|
|
: "border-border/60 bg-foreground/[0.04] text-foreground/80 hover:text-foreground",
|
|
)}
|
|
>
|
|
{disabled ? (
|
|
<span aria-disabled="true" className="flex h-full w-full cursor-not-allowed items-center justify-center">
|
|
{inner}
|
|
</span>
|
|
) : (
|
|
<Link
|
|
href={getLocalizedPath(locale, itemPath, defaultLocale)}
|
|
aria-label={label}
|
|
aria-current={isActive ? "page" : undefined}
|
|
className="flex h-full w-full items-center justify-center rounded-[inherit]"
|
|
>
|
|
{inner}
|
|
</Link>
|
|
)}
|
|
|
|
<DockTip label={label} soon={disabled ? t("soon") : undefined} />
|
|
|
|
{isActive ? (
|
|
<span
|
|
aria-hidden
|
|
className="absolute -bottom-1.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-primary"
|
|
/>
|
|
) : null}
|
|
</DockIcon>
|
|
);
|
|
})}
|
|
</Dock>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function DockTip({ label, soon }: { label: string; soon?: string }) {
|
|
return (
|
|
<span
|
|
role="tooltip"
|
|
className="pointer-events-none absolute bottom-[calc(100%+0.75rem)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap rounded-lg border border-border/60 bg-background/90 px-2.5 py-1 text-xs font-semibold text-foreground opacity-0 shadow-md backdrop-blur-chrome transition-all duration-150 group-hover:translate-y-0 group-hover:opacity-100"
|
|
>
|
|
{label}
|
|
{soon ? <span className="ms-1.5 text-[0.625rem] tracking-wide text-primary">{soon}</span> : null}
|
|
</span>
|
|
);
|
|
}
|