IMPROVED - Collapse dock controls into one settings tile that fans out in an arc

2026-09-20 19:34:57 +02:00
parent 008cfcc515
commit a6be3c26d2
1 changed files with 176 additions and 123 deletions
@@ -1,10 +1,12 @@
 "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 Link from "next/link";
 import { usePathname } from "next/navigation";
 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";
@@ -41,12 +43,17 @@ const navItems: NavItem[] = [
  { 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.
+// Graphite squircle matching the SVG page icons, used for the settings tile.
 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";
+// Glass pill used for each control that fans out along the arc.
+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) {
  if (itemPath === "/") {
@@ -59,140 +66,186 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
  const locale = useLocale();
  const pathname = usePathname();
  const t = useTranslations("navigation");
+  const reducedMotion = useReducedMotion();
+  const [settingsOpen, setSettingsOpen] = useState(false);

  const currentPath = stripLocalePrefix(pathname);
  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 (
-    <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={52}
-        iconMagnification={90}
-        iconDistance={160}
-        className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
+    <>
+      {/* click-away scrim (below the dock, above the page) */}
+      {settingsOpen ? (
+        <button
+          type="button"
+          aria-hidden
+          tabIndex={-1}
+          onClick={() => setSettingsOpen(false)}
+          className="fixed inset-0 z-30 cursor-default bg-transparent"
+        />
+      ) : 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) ── */}
-        <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">
-          <Link
-            href={homeHref}
-            aria-label="mohfarawati — Home"
-            className="flex h-full w-full items-center justify-center rounded-[inherit]"
-          >
-            <Image
-              src="/logos/light-primary.svg"
-              alt="mohfarawati"
-              width={104}
-              height={104}
-              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)]",
-              )}
+        <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"
+        >
+          {/* ── Logo (fixed src → no refresh flash) ── */}
+          <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">
+            <Link
+              href={homeHref}
+              aria-label="mohfarawati — Home"
+              className="flex h-full w-full items-center justify-center rounded-[inherit]"
            >
-              {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>
-          );
-        })}
+              <Image
+                src="/logos/light-primary.svg"
+                alt="mohfarawati"
+                width={104}
+                height={104}
+                sizes="104px"
+                priority
+                className="h-full w-full rounded-[inherit] object-contain"
+              />
+            </Link>
+            <DockTip label="mohfarawati" />
+          </DockIcon>

-        <DockSeparator />
+          <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>
+          {/* ── 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`;

-        <DockIcon className={controlTile}>
-          <TileGloss />
-          <ThemeToggle ariaLabel={t("themeToggle")} variant="ghost" className={controlButton} iconClassName="h-[46%] w-[46%]" />
-          <DockTip label={t("themeToggle")} />
-        </DockIcon>
+            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")}
+              />
+            );

-        <DockIcon className={controlTile}>
-          <TileGloss />
-          <LocaleToggle
-            locale={locale}
-            defaultLocale={defaultLocale}
-            className={cn(controlButton, "p-0")}
-          />
-          <DockTip label={locale.toUpperCase()} />
-        </DockIcon>
+            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>
+            );
+          })}

-        {isSuperAdmin ? (
+          <DockSeparator />
+
+          {/* ── Settings — press to fan the controls out along an arc ── */}
          <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"
+
+            <AnimatePresence>
+              {settingsOpen
+                ? 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%]" />
-            </a>
-            <DockTip label="Admin" />
+              <motion.span
+                animate={{ rotate: settingsOpen ? 90 : 0 }}
+                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>
-        ) : null}
-      </Dock>
-    </div>
+        </Dock>
+      </div>
+    </>
  );
 }