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
+149
-86
@@ -1,12 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import { 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 { 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 { buildAdminUrl } from "@/lib/admin-routing";
|
||||
import { getLocalizedPath, stripLocalePrefix, type AppLocale } from "@/lib/locale";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
@@ -37,6 +41,13 @@ 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.
|
||||
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) {
|
||||
if (itemPath === "/") {
|
||||
return currentPath === "/";
|
||||
@@ -53,96 +64,148 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
|
||||
const homeHref = getLocalizedPath(locale, "/", defaultLocale);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ===== 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))" }}
|
||||
<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"
|
||||
>
|
||||
<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 — first icon in the dock (fixed src, no theme swap → no 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]"
|
||||
{/* ── 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)]",
|
||||
)}
|
||||
>
|
||||
<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" />
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
|
||||
<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>
|
||||
) : 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 }) => {
|
||||
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 ? (
|
||||
<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} />
|
||||
</>
|
||||
function TileGloss() {
|
||||
return (
|
||||
<span
|
||||
aria-hidden
|
||||
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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user