IMPROVED - Collapse dock controls into one settings tile that fans out in an arc
This commit is contained in:
moh
+176
-123
@@ -1,10 +1,12 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { ShieldCheck } from "lucide-react";
|
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
|
||||||
|
import { Settings, 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 { useState, type ReactNode } from "react";
|
||||||
|
|
||||||
import { LocaleToggle } from "@/components/layout/locale-toggle";
|
import { LocaleToggle } from "@/components/layout/locale-toggle";
|
||||||
import { SoundToggle } from "@/components/sound-toggle";
|
import { SoundToggle } from "@/components/sound-toggle";
|
||||||
@@ -41,12 +43,17 @@ const navItems: NavItem[] = [
|
|||||||
{ key: "contact", path: "/contact" },
|
{ key: "contact", path: "/contact" },
|
||||||
];
|
];
|
||||||
|
|
||||||
// Graphite squircle that matches the SVG page icons, used for the live control
|
// Graphite squircle matching the SVG page icons, used for the settings tile.
|
||||||
// tiles (theme / sound / language / admin) so the whole dock reads as one set.
|
|
||||||
const controlTile =
|
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)]";
|
"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 =
|
// Glass pill used for each control that fans out along the arc.
|
||||||
"h-full w-full rounded-[inherit] border-0 bg-transparent text-white hover:bg-white/10 hover:text-white";
|
const fanPill =
|
||||||
|
"flex h-11 w-11 items-center justify-center rounded-full border border-transparent bg-background/90 text-foreground/85 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
|
||||||
|
|
||||||
|
// Radius (px) and opening angles of the arc the controls fan out along.
|
||||||
|
const ARC_RADIUS = 74;
|
||||||
|
const ARC_START = 46;
|
||||||
|
const ARC_END = 134;
|
||||||
|
|
||||||
function isNavItemActive(currentPath: string, itemPath: string) {
|
function isNavItemActive(currentPath: string, itemPath: string) {
|
||||||
if (itemPath === "/") {
|
if (itemPath === "/") {
|
||||||
@@ -59,140 +66,186 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
|
|||||||
const locale = useLocale();
|
const locale = useLocale();
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const t = useTranslations("navigation");
|
const t = useTranslations("navigation");
|
||||||
|
const reducedMotion = useReducedMotion();
|
||||||
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||||
|
|
||||||
const currentPath = stripLocalePrefix(pathname);
|
const currentPath = stripLocalePrefix(pathname);
|
||||||
const homeHref = getLocalizedPath(locale, "/", defaultLocale);
|
const homeHref = getLocalizedPath(locale, "/", defaultLocale);
|
||||||
|
|
||||||
|
const fanItems: ReactNode[] = [
|
||||||
|
<SoundToggle
|
||||||
|
key="sound"
|
||||||
|
ariaLabel={t("soundMute")}
|
||||||
|
mutedAriaLabel={t("soundUnmute")}
|
||||||
|
variant="ghost"
|
||||||
|
className={fanPill}
|
||||||
|
/>,
|
||||||
|
<ThemeToggle key="theme" ariaLabel={t("themeToggle")} variant="ghost" className={fanPill} />,
|
||||||
|
<LocaleToggle key="locale" locale={locale} defaultLocale={defaultLocale} className={cn(fanPill, "p-0")} />,
|
||||||
|
];
|
||||||
|
|
||||||
|
if (isSuperAdmin) {
|
||||||
|
fanItems.push(
|
||||||
|
<a key="admin" href={buildAdminUrl("/")} aria-label="Open admin dashboard" className={fanPill}>
|
||||||
|
<ShieldCheck className="h-[1.125rem] w-[1.125rem]" />
|
||||||
|
</a>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const arcPosition = (index: number) => {
|
||||||
|
const count = fanItems.length;
|
||||||
|
const angle = count === 1 ? 90 : ARC_START + ((ARC_END - ARC_START) * index) / (count - 1);
|
||||||
|
const radians = (angle * Math.PI) / 180;
|
||||||
|
return { x: Math.cos(radians) * ARC_RADIUS, y: -Math.sin(radians) * ARC_RADIUS };
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<>
|
||||||
className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4"
|
{/* click-away scrim (below the dock, above the page) */}
|
||||||
style={{ paddingBottom: "calc(0.9rem + env(safe-area-inset-bottom, 0px))" }}
|
{settingsOpen ? (
|
||||||
>
|
<button
|
||||||
<Dock
|
type="button"
|
||||||
direction="bottom"
|
aria-hidden
|
||||||
iconSize={52}
|
tabIndex={-1}
|
||||||
iconMagnification={90}
|
onClick={() => setSettingsOpen(false)}
|
||||||
iconDistance={160}
|
className="fixed inset-0 z-30 cursor-default bg-transparent"
|
||||||
className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<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))" }}
|
||||||
>
|
>
|
||||||
{/* ── Logo (fixed src → no refresh flash) ── */}
|
<Dock
|
||||||
<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">
|
direction="bottom"
|
||||||
<Link
|
iconSize={52}
|
||||||
href={homeHref}
|
iconMagnification={90}
|
||||||
aria-label="mohfarawati — Home"
|
iconDistance={160}
|
||||||
className="flex h-full w-full items-center justify-center rounded-[inherit]"
|
className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
|
||||||
>
|
>
|
||||||
<Image
|
{/* ── Logo (fixed src → no refresh flash) ── */}
|
||||||
src="/logos/light-primary.svg"
|
<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">
|
||||||
alt="mohfarawati"
|
<Link
|
||||||
width={104}
|
href={homeHref}
|
||||||
height={104}
|
aria-label="mohfarawati — Home"
|
||||||
sizes="104px"
|
className="flex h-full w-full items-center justify-center rounded-[inherit]"
|
||||||
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)]",
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
{disabled ? (
|
<Image
|
||||||
<span
|
src="/logos/light-primary.svg"
|
||||||
aria-disabled="true"
|
alt="mohfarawati"
|
||||||
className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-[inherit]"
|
width={104}
|
||||||
>
|
height={104}
|
||||||
{icon}
|
sizes="104px"
|
||||||
</span>
|
priority
|
||||||
) : (
|
className="h-full w-full rounded-[inherit] object-contain"
|
||||||
<Link
|
/>
|
||||||
href={getLocalizedPath(locale, itemPath, defaultLocale)}
|
</Link>
|
||||||
aria-label={label}
|
<DockTip label="mohfarawati" />
|
||||||
aria-current={isActive ? "page" : undefined}
|
</DockIcon>
|
||||||
className="flex h-full w-full items-center justify-center rounded-[inherit]"
|
|
||||||
>
|
|
||||||
{icon}
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
<DockTip label={label} soon={disabled ? t("soon") : undefined} />
|
|
||||||
</DockIcon>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
<DockSeparator />
|
<DockSeparator />
|
||||||
|
|
||||||
{/* ── Settings (live controls) ── */}
|
{/* ── Pages ── */}
|
||||||
<DockIcon className={controlTile}>
|
{navItems.map(({ key, path, disabled }) => {
|
||||||
<TileGloss />
|
const itemPath = path || "/";
|
||||||
<SoundToggle
|
const isActive = isNavItemActive(currentPath, itemPath);
|
||||||
ariaLabel={t("soundMute")}
|
const label = t(key);
|
||||||
mutedAriaLabel={t("soundUnmute")}
|
const src = `/dock/${key}${isActive ? "-active" : ""}.svg`;
|
||||||
variant="ghost"
|
|
||||||
className={controlButton}
|
|
||||||
iconClassName="h-[46%] w-[46%]"
|
|
||||||
/>
|
|
||||||
<DockTip label={t("soundMute")} />
|
|
||||||
</DockIcon>
|
|
||||||
|
|
||||||
<DockIcon className={controlTile}>
|
const icon = (
|
||||||
<TileGloss />
|
<Image
|
||||||
<ThemeToggle ariaLabel={t("themeToggle")} variant="ghost" className={controlButton} iconClassName="h-[46%] w-[46%]" />
|
src={src}
|
||||||
<DockTip label={t("themeToggle")} />
|
alt={label}
|
||||||
</DockIcon>
|
width={104}
|
||||||
|
height={104}
|
||||||
|
sizes="104px"
|
||||||
|
className={cn("h-full w-full rounded-[inherit] object-contain", disabled && "opacity-55")}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
<DockIcon className={controlTile}>
|
return (
|
||||||
<TileGloss />
|
<DockIcon
|
||||||
<LocaleToggle
|
key={key}
|
||||||
locale={locale}
|
className={cn(
|
||||||
defaultLocale={defaultLocale}
|
"group relative overflow-visible rounded-[26%] transition-shadow duration-200",
|
||||||
className={cn(controlButton, "p-0")}
|
isActive
|
||||||
/>
|
? "shadow-[0_12px_26px_-8px_hsl(var(--primary)/0.65)]"
|
||||||
<DockTip label={locale.toUpperCase()} />
|
: "shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]",
|
||||||
</DockIcon>
|
)}
|
||||||
|
>
|
||||||
|
{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>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
{isSuperAdmin ? (
|
<DockSeparator />
|
||||||
|
|
||||||
|
{/* ── Settings — press to fan the controls out along an arc ── */}
|
||||||
<DockIcon className={controlTile}>
|
<DockIcon className={controlTile}>
|
||||||
<TileGloss />
|
<TileGloss />
|
||||||
<a
|
|
||||||
href={buildAdminUrl("/")}
|
<AnimatePresence>
|
||||||
aria-label="Open admin dashboard"
|
{settingsOpen
|
||||||
className="flex h-full w-full items-center justify-center rounded-[inherit] text-white hover:bg-white/10"
|
? fanItems.map((node, index) => {
|
||||||
|
const { x, y } = arcPosition(index);
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className="absolute inset-0 z-10 flex items-center justify-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: 480, damping: 26, delay: index * 0.035 }
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{node}
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
: null}
|
||||||
|
</AnimatePresence>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setSettingsOpen((value) => !value)}
|
||||||
|
aria-expanded={settingsOpen}
|
||||||
|
aria-label={settingsOpen ? t("closeMenu") : t("openMenu")}
|
||||||
|
className="relative z-20 flex h-full w-full items-center justify-center rounded-[inherit] text-white hover:bg-white/10"
|
||||||
>
|
>
|
||||||
<ShieldCheck className="h-[46%] w-[46%]" />
|
<motion.span
|
||||||
</a>
|
animate={{ rotate: settingsOpen ? 90 : 0 }}
|
||||||
<DockTip label="Admin" />
|
transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 22 }}
|
||||||
|
className="flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<Settings className="h-[46%] w-[46%]" />
|
||||||
|
</motion.span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{settingsOpen ? null : <DockTip label={t("themeToggle")} />}
|
||||||
</DockIcon>
|
</DockIcon>
|
||||||
) : null}
|
</Dock>
|
||||||
</Dock>
|
</div>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user