IMPROVED - Move theme/sound/language controls into the dock after a separator
Replace the custom radial corner menu with in-dock control tiles so the whole bar reads as one macOS dock: logo | pages | settings, each group divided by a separator. Controls reuse the existing toggle components on graphite squircle tiles matching the page icons.
This commit is contained in:
moh
@@ -1,149 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
|
|
||||||
import { Plus, ShieldCheck } from "lucide-react";
|
|
||||||
import { useLocale, useTranslations } from "next-intl";
|
|
||||||
import { useState, type ReactNode } from "react";
|
|
||||||
|
|
||||||
import { LocaleToggle } from "@/components/layout/locale-toggle";
|
|
||||||
import { SoundToggle } from "@/components/sound-toggle";
|
|
||||||
import { ThemeToggle } from "@/components/theme-toggle";
|
|
||||||
import { buildAdminUrl } from "@/lib/admin-routing";
|
|
||||||
import type { AppLocale } from "@/lib/locale";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
type FloatingControlsProps = {
|
|
||||||
locale: string;
|
|
||||||
defaultLocale: AppLocale;
|
|
||||||
isSuperAdmin?: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
const pill =
|
|
||||||
"flex h-11 w-11 items-center justify-center rounded-full border border-border/60 bg-background/85 text-foreground/80 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
|
|
||||||
|
|
||||||
/** Radius (px) of the arc the items fan out along. */
|
|
||||||
const RADIUS = 92;
|
|
||||||
|
|
||||||
export function FloatingControls({
|
|
||||||
locale,
|
|
||||||
defaultLocale,
|
|
||||||
isSuperAdmin = false,
|
|
||||||
}: FloatingControlsProps) {
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const t = useTranslations("navigation");
|
|
||||||
const activeLocale = useLocale();
|
|
||||||
const isRtl = activeLocale === "ar";
|
|
||||||
const reducedMotion = useReducedMotion();
|
|
||||||
|
|
||||||
const controls: ReactNode[] = [
|
|
||||||
<SoundToggle
|
|
||||||
key="sound"
|
|
||||||
ariaLabel={t("soundMute")}
|
|
||||||
mutedAriaLabel={t("soundUnmute")}
|
|
||||||
variant="ghost"
|
|
||||||
className={cn(pill, "border-transparent bg-transparent")}
|
|
||||||
/>,
|
|
||||||
<ThemeToggle
|
|
||||||
key="theme"
|
|
||||||
ariaLabel={t("themeToggle")}
|
|
||||||
variant="ghost"
|
|
||||||
className={cn(pill, "border-transparent bg-transparent")}
|
|
||||||
/>,
|
|
||||||
<LocaleToggle
|
|
||||||
key="locale"
|
|
||||||
locale={locale}
|
|
||||||
defaultLocale={defaultLocale}
|
|
||||||
className={cn(pill, "border-transparent bg-transparent p-0")}
|
|
||||||
/>,
|
|
||||||
];
|
|
||||||
|
|
||||||
if (isSuperAdmin) {
|
|
||||||
controls.push(
|
|
||||||
<a key="admin" href={buildAdminUrl("/")} aria-label="Open admin dashboard" className={pill}>
|
|
||||||
<ShieldCheck className="h-[1.125rem] w-[1.125rem]" />
|
|
||||||
</a>,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const count = controls.length;
|
|
||||||
// Fan the items across a quarter arc from "up" (90°) to "sideways" (180°),
|
|
||||||
// mirrored for RTL so they always spread away from the corner into the page.
|
|
||||||
const startAngle = 94;
|
|
||||||
const endAngle = 176;
|
|
||||||
const positionFor = (index: number) => {
|
|
||||||
const angle = count === 1 ? 135 : startAngle + ((endAngle - startAngle) * index) / (count - 1);
|
|
||||||
const radians = (angle * Math.PI) / 180;
|
|
||||||
return {
|
|
||||||
x: (isRtl ? -1 : 1) * Math.cos(radians) * RADIUS,
|
|
||||||
y: -Math.sin(radians) * RADIUS,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="pointer-events-none fixed bottom-0 end-0 z-50 p-4"
|
|
||||||
style={{ paddingBottom: "calc(1.1rem + env(safe-area-inset-bottom, 0px))" }}
|
|
||||||
>
|
|
||||||
<div className="pointer-events-auto relative h-12 w-12">
|
|
||||||
<AnimatePresence>
|
|
||||||
{open ? (
|
|
||||||
<>
|
|
||||||
{/* click-away scrim */}
|
|
||||||
<motion.button
|
|
||||||
key="scrim"
|
|
||||||
type="button"
|
|
||||||
aria-hidden
|
|
||||||
tabIndex={-1}
|
|
||||||
onClick={() => setOpen(false)}
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
exit={{ opacity: 0 }}
|
|
||||||
className="fixed inset-0 -z-10 cursor-default bg-transparent"
|
|
||||||
/>
|
|
||||||
{controls.map((control, index) => {
|
|
||||||
const { x, y } = positionFor(index);
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
key={index}
|
|
||||||
className="absolute bottom-0 end-0 grid h-12 w-12 place-items-center"
|
|
||||||
initial={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
|
|
||||||
animate={reducedMotion ? { opacity: 1 } : { opacity: 1, x, y, scale: 1 }}
|
|
||||||
exit={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
|
|
||||||
transition={
|
|
||||||
reducedMotion
|
|
||||||
? { duration: 0 }
|
|
||||||
: { type: "spring", stiffness: 460, damping: 26, delay: index * 0.035 }
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{control}
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</>
|
|
||||||
) : null}
|
|
||||||
</AnimatePresence>
|
|
||||||
|
|
||||||
{/* trigger */}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setOpen((value) => !value)}
|
|
||||||
aria-expanded={open}
|
|
||||||
aria-label={open ? t("closeMenu") : t("openMenu")}
|
|
||||||
className={cn(
|
|
||||||
pill,
|
|
||||||
"relative h-12 w-12",
|
|
||||||
open && "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<motion.span
|
|
||||||
animate={{ rotate: open ? 135 : 0 }}
|
|
||||||
transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 22 }}
|
|
||||||
className="flex items-center justify-center"
|
|
||||||
>
|
|
||||||
<Plus className="h-5 w-5" />
|
|
||||||
</motion.span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
+149
-86
@@ -1,12 +1,16 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { ShieldCheck } from "lucide-react";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import { useLocale, useTranslations } from "next-intl";
|
import { useLocale, useTranslations } from "next-intl";
|
||||||
|
|
||||||
import { FloatingControls } from "@/components/layout/floating-controls";
|
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 { Dock, DockIcon } from "@/components/ui/dock";
|
||||||
|
import { buildAdminUrl } from "@/lib/admin-routing";
|
||||||
import { getLocalizedPath, stripLocalePrefix, type AppLocale } from "@/lib/locale";
|
import { getLocalizedPath, stripLocalePrefix, type AppLocale } from "@/lib/locale";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
@@ -37,6 +41,13 @@ const navItems: NavItem[] = [
|
|||||||
{ key: "contact", path: "/contact" },
|
{ key: "contact", path: "/contact" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// Graphite squircle that matches the SVG page icons, used for the live control
|
||||||
|
// tiles (theme / sound / language / admin) so the whole dock reads as one set.
|
||||||
|
const controlTile =
|
||||||
|
"group relative overflow-visible rounded-[26%] bg-gradient-to-b from-[#3f4551] to-[#191d24] shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-white/10 transition-shadow duration-200 hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]";
|
||||||
|
const controlButton =
|
||||||
|
"h-full w-full rounded-[inherit] border-0 bg-transparent text-white hover:bg-white/10 hover:text-white";
|
||||||
|
|
||||||
function isNavItemActive(currentPath: string, itemPath: string) {
|
function isNavItemActive(currentPath: string, itemPath: string) {
|
||||||
if (itemPath === "/") {
|
if (itemPath === "/") {
|
||||||
return currentPath === "/";
|
return currentPath === "/";
|
||||||
@@ -53,96 +64,148 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
|
|||||||
const homeHref = getLocalizedPath(locale, "/", defaultLocale);
|
const homeHref = getLocalizedPath(locale, "/", defaultLocale);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div
|
||||||
{/* ===== Bottom dock (Magic UI) — primary navigation ===== */}
|
className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4"
|
||||||
<div
|
style={{ paddingBottom: "calc(0.9rem + env(safe-area-inset-bottom, 0px))" }}
|
||||||
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={52}
|
||||||
|
iconMagnification={90}
|
||||||
|
iconDistance={160}
|
||||||
|
className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
|
||||||
>
|
>
|
||||||
<Dock
|
{/* ── Logo (fixed src → no refresh flash) ── */}
|
||||||
direction="bottom"
|
<DockIcon className="group relative overflow-visible rounded-[26%] bg-white shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-black/10">
|
||||||
iconSize={52}
|
<Link
|
||||||
iconMagnification={90}
|
href={homeHref}
|
||||||
iconDistance={160}
|
aria-label="mohfarawati — Home"
|
||||||
className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
|
className="flex h-full w-full items-center justify-center rounded-[inherit]"
|
||||||
>
|
>
|
||||||
{/* Logo — first icon in the dock (fixed src, no theme swap → no flash) */}
|
<Image
|
||||||
<DockIcon className="group relative overflow-visible rounded-[26%] bg-white shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-black/10">
|
src="/logos/light-primary.svg"
|
||||||
<Link
|
alt="mohfarawati"
|
||||||
href={homeHref}
|
width={104}
|
||||||
aria-label="mohfarawati — Home"
|
height={104}
|
||||||
className="flex h-full w-full items-center justify-center rounded-[inherit]"
|
sizes="104px"
|
||||||
|
priority
|
||||||
|
className="h-full w-full rounded-[inherit] object-contain"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
<DockTip label="mohfarawati" />
|
||||||
|
</DockIcon>
|
||||||
|
|
||||||
|
<DockSeparator />
|
||||||
|
|
||||||
|
{/* ── Pages ── */}
|
||||||
|
{navItems.map(({ key, path, disabled }) => {
|
||||||
|
const itemPath = path || "/";
|
||||||
|
const isActive = isNavItemActive(currentPath, itemPath);
|
||||||
|
const label = t(key);
|
||||||
|
const src = `/dock/${key}${isActive ? "-active" : ""}.svg`;
|
||||||
|
|
||||||
|
const icon = (
|
||||||
|
<Image
|
||||||
|
src={src}
|
||||||
|
alt={label}
|
||||||
|
width={104}
|
||||||
|
height={104}
|
||||||
|
sizes="104px"
|
||||||
|
className={cn("h-full w-full rounded-[inherit] object-contain", disabled && "opacity-55")}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DockIcon
|
||||||
|
key={key}
|
||||||
|
className={cn(
|
||||||
|
"group relative overflow-visible rounded-[26%] transition-shadow duration-200",
|
||||||
|
isActive
|
||||||
|
? "shadow-[0_12px_26px_-8px_hsl(var(--primary)/0.65)]"
|
||||||
|
: "shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<Image
|
{disabled ? (
|
||||||
src="/logos/light-primary.svg"
|
<span
|
||||||
alt="mohfarawati"
|
aria-disabled="true"
|
||||||
width={104}
|
className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-[inherit]"
|
||||||
height={104}
|
>
|
||||||
sizes="104px"
|
{icon}
|
||||||
priority
|
</span>
|
||||||
className="h-full w-full rounded-[inherit] object-contain"
|
) : (
|
||||||
/>
|
<Link
|
||||||
</Link>
|
href={getLocalizedPath(locale, itemPath, defaultLocale)}
|
||||||
<DockTip label="mohfarawati" />
|
aria-label={label}
|
||||||
|
aria-current={isActive ? "page" : undefined}
|
||||||
|
className="flex h-full w-full items-center justify-center rounded-[inherit]"
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
<DockTip label={label} soon={disabled ? t("soon") : undefined} />
|
||||||
|
</DockIcon>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
<DockSeparator />
|
||||||
|
|
||||||
|
{/* ── Settings (live controls) ── */}
|
||||||
|
<DockIcon className={controlTile}>
|
||||||
|
<TileGloss />
|
||||||
|
<SoundToggle
|
||||||
|
ariaLabel={t("soundMute")}
|
||||||
|
mutedAriaLabel={t("soundUnmute")}
|
||||||
|
variant="ghost"
|
||||||
|
className={controlButton}
|
||||||
|
iconClassName="h-[46%] w-[46%]"
|
||||||
|
/>
|
||||||
|
<DockTip label={t("soundMute")} />
|
||||||
|
</DockIcon>
|
||||||
|
|
||||||
|
<DockIcon className={controlTile}>
|
||||||
|
<TileGloss />
|
||||||
|
<ThemeToggle ariaLabel={t("themeToggle")} variant="ghost" className={controlButton} iconClassName="h-[46%] w-[46%]" />
|
||||||
|
<DockTip label={t("themeToggle")} />
|
||||||
|
</DockIcon>
|
||||||
|
|
||||||
|
<DockIcon className={controlTile}>
|
||||||
|
<TileGloss />
|
||||||
|
<LocaleToggle
|
||||||
|
locale={locale}
|
||||||
|
defaultLocale={defaultLocale}
|
||||||
|
className={cn(controlButton, "p-0")}
|
||||||
|
/>
|
||||||
|
<DockTip label={locale.toUpperCase()} />
|
||||||
|
</DockIcon>
|
||||||
|
|
||||||
|
{isSuperAdmin ? (
|
||||||
|
<DockIcon className={controlTile}>
|
||||||
|
<TileGloss />
|
||||||
|
<a
|
||||||
|
href={buildAdminUrl("/")}
|
||||||
|
aria-label="Open admin dashboard"
|
||||||
|
className="flex h-full w-full items-center justify-center rounded-[inherit] text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<ShieldCheck className="h-[46%] w-[46%]" />
|
||||||
|
</a>
|
||||||
|
<DockTip label="Admin" />
|
||||||
</DockIcon>
|
</DockIcon>
|
||||||
|
) : null}
|
||||||
|
</Dock>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
<div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
|
function DockSeparator() {
|
||||||
|
return <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />;
|
||||||
|
}
|
||||||
|
|
||||||
{navItems.map(({ key, path, disabled }) => {
|
function TileGloss() {
|
||||||
const itemPath = path || "/";
|
return (
|
||||||
const isActive = isNavItemActive(currentPath, itemPath);
|
<span
|
||||||
const label = t(key);
|
aria-hidden
|
||||||
const src = `/dock/${key}${isActive ? "-active" : ""}.svg`;
|
className="pointer-events-none absolute inset-x-0 top-0 h-1/2 rounded-t-[26%] bg-gradient-to-b from-white/25 to-transparent"
|
||||||
|
/>
|
||||||
const icon = (
|
|
||||||
<Image
|
|
||||||
src={src}
|
|
||||||
alt={label}
|
|
||||||
width={104}
|
|
||||||
height={104}
|
|
||||||
sizes="104px"
|
|
||||||
className={cn("h-full w-full rounded-[inherit] object-contain", disabled && "opacity-55")}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DockIcon
|
|
||||||
key={key}
|
|
||||||
className={cn(
|
|
||||||
"group relative overflow-visible rounded-[26%] transition-shadow duration-200",
|
|
||||||
isActive
|
|
||||||
? "shadow-[0_12px_26px_-8px_hsl(var(--primary)/0.65)]"
|
|
||||||
: "shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{disabled ? (
|
|
||||||
<span
|
|
||||||
aria-disabled="true"
|
|
||||||
className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-[inherit]"
|
|
||||||
>
|
|
||||||
{icon}
|
|
||||||
</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]"
|
|
||||||
>
|
|
||||||
{icon}
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<DockTip label={label} soon={disabled ? t("soon") : undefined} />
|
|
||||||
</DockIcon>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Dock>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ===== Corner controls — theme / language / sound / admin ===== */}
|
|
||||||
<FloatingControls locale={locale} defaultLocale={defaultLocale} isSuperAdmin={isSuperAdmin} />
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user