ADDED - Replace site header menu with macOS menu bar and Magic UI dock
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.
This commit is contained in:
moh
@@ -4,8 +4,8 @@ import { getLocale } from "next-intl/server";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { SiteAmbientBackdrop } from "@/components/layout/site-ambient-backdrop";
|
||||
import { SiteDock } from "@/components/layout/site-dock";
|
||||
import { SiteFooter } from "@/components/layout/site-footer";
|
||||
import { SiteHeader } from "@/components/layout/site-header";
|
||||
import { ScrollSmootherProvider } from "@/components/scroll-smoother-provider";
|
||||
import { isSuperAdmin } from "@/lib/admin-auth";
|
||||
import { getMaintenanceMode, getSiteSettings, getSiteSettingsMediaBindings } from "@/lib/app-config";
|
||||
@@ -44,7 +44,7 @@ export default async function SiteLayout({ children, params }: SiteLayoutProps)
|
||||
<>
|
||||
<ScrollSmootherProvider />
|
||||
<SiteAmbientBackdrop />
|
||||
<SiteHeader
|
||||
<SiteDock
|
||||
lightLogoUrl={mediaBindings.siteLogoLight?.url}
|
||||
darkLogoUrl={mediaBindings.siteLogoDark?.url}
|
||||
defaultLocale={siteSettings.defaultLocale}
|
||||
|
||||
@@ -0,0 +1,284 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
"use client";
|
||||
|
||||
import React, { useRef, type PropsWithChildren } from "react";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import {
|
||||
motion,
|
||||
useMotionValue,
|
||||
useSpring,
|
||||
useTransform,
|
||||
type MotionValue,
|
||||
type MotionProps,
|
||||
} from "framer-motion";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface DockProps extends VariantProps<typeof dockVariants> {
|
||||
className?: string;
|
||||
iconSize?: number;
|
||||
iconMagnification?: number;
|
||||
disableMagnification?: boolean;
|
||||
iconDistance?: number;
|
||||
direction?: "top" | "middle" | "bottom";
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const DEFAULT_SIZE = 40;
|
||||
const DEFAULT_MAGNIFICATION = 60;
|
||||
const DEFAULT_DISTANCE = 140;
|
||||
const DEFAULT_DISABLEMAGNIFICATION = false;
|
||||
|
||||
const dockVariants = cva(
|
||||
"supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto flex w-max items-center justify-center gap-2 rounded-2xl border p-2 backdrop-blur-md",
|
||||
);
|
||||
|
||||
const Dock = React.forwardRef<HTMLDivElement, DockProps>(
|
||||
(
|
||||
{
|
||||
className,
|
||||
children,
|
||||
iconSize = DEFAULT_SIZE,
|
||||
iconMagnification = DEFAULT_MAGNIFICATION,
|
||||
disableMagnification = DEFAULT_DISABLEMAGNIFICATION,
|
||||
iconDistance = DEFAULT_DISTANCE,
|
||||
direction = "bottom",
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const mouseX = useMotionValue(Infinity);
|
||||
|
||||
const renderChildren = () => {
|
||||
return React.Children.map(children, (child) => {
|
||||
if (React.isValidElement<DockIconProps>(child) && child.type === DockIcon) {
|
||||
return React.cloneElement(child, {
|
||||
...child.props,
|
||||
mouseX: mouseX,
|
||||
size: iconSize,
|
||||
magnification: iconMagnification,
|
||||
disableMagnification: disableMagnification,
|
||||
distance: iconDistance,
|
||||
});
|
||||
}
|
||||
return child;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
onMouseMove={(e) => mouseX.set(e.pageX)}
|
||||
onMouseLeave={() => mouseX.set(Infinity)}
|
||||
{...props}
|
||||
className={cn(dockVariants({ className }), {
|
||||
"items-start": direction === "top",
|
||||
"items-center": direction === "middle",
|
||||
"items-end": direction === "bottom",
|
||||
})}
|
||||
>
|
||||
{renderChildren()}
|
||||
</motion.div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
Dock.displayName = "Dock";
|
||||
|
||||
export interface DockIconProps
|
||||
extends Omit<MotionProps & React.HTMLAttributes<HTMLDivElement>, "children"> {
|
||||
size?: number;
|
||||
magnification?: number;
|
||||
disableMagnification?: boolean;
|
||||
distance?: number;
|
||||
mouseX?: MotionValue<number>;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
props?: PropsWithChildren;
|
||||
}
|
||||
|
||||
const DockIcon = ({
|
||||
size = DEFAULT_SIZE,
|
||||
magnification = DEFAULT_MAGNIFICATION,
|
||||
disableMagnification,
|
||||
distance = DEFAULT_DISTANCE,
|
||||
mouseX,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: DockIconProps) => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const padding = Math.max(6, size * 0.2);
|
||||
const defaultMouseX = useMotionValue(Infinity);
|
||||
|
||||
const distanceCalc = useTransform(mouseX ?? defaultMouseX, (val: number) => {
|
||||
const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
|
||||
return val - bounds.x - bounds.width / 2;
|
||||
});
|
||||
|
||||
const targetSize = disableMagnification ? size : magnification;
|
||||
|
||||
const sizeTransform = useTransform(
|
||||
distanceCalc,
|
||||
[-distance, 0, distance],
|
||||
[size, targetSize, size],
|
||||
);
|
||||
|
||||
const scaleSize = useSpring(sizeTransform, {
|
||||
mass: 0.1,
|
||||
stiffness: 150,
|
||||
damping: 12,
|
||||
});
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
style={{ width: scaleSize, height: scaleSize, padding }}
|
||||
className={cn(
|
||||
"flex aspect-square cursor-pointer items-center justify-center rounded-full",
|
||||
disableMagnification && "hover:bg-muted-foreground transition-colors",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
DockIcon.displayName = "DockIcon";
|
||||
|
||||
export { Dock, DockIcon, dockVariants };
|
||||
Reference in New Issue
Block a user