mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

IMPROVED - Make dock feel like the real macOS dock

Browse Source 
- Stronger magnification (50 to 92) with snappier spring tracking.
- macOS-style launch bounce on click; running-dot indicator for the active
  page (works with fixed app-icon images, no recolor).
- Per-item icon paths in navItems so real macOS app icons can be dropped in.
- Drop the now-unused -active icon variants.
This commit is contained in:
moh
2026-09-20 20:38:35 +02:00
parent 9fd928cce6
commit c41a2e38c9
6 changed files with 64 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/site-dock.tsx
+44 -17
View File
@@ -1,9 +1,11 @@
"use client";
import { motion, useReducedMotion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useLocale, useTranslations } from "next-intl";
import { useState } from "react";
import { FloatingControls } from "@/components/layout/floating-controls";
import { Dock, DockIcon } from "@/components/ui/dock";
@@ -26,15 +28,17 @@ type NavKey = "about" | "portfolio" | "products" | "contact";
type NavItem = {
key: NavKey;
path: string;
/** Icon file under /public. Swap these for real macOS app icons anytime. */
icon: string;
disabled?: boolean;
};
// "Home" is intentionally omitted — the logo (first dock icon) is the home link.
const navItems: NavItem[] = [
{ key: "about", path: "/about" },
{ key: "portfolio", path: "/portfolio" },
{ key: "products", path: "/products", disabled: true },
{ key: "contact", path: "/contact" },
{ key: "about", path: "/about", icon: "/dock/about.svg" },
{ key: "portfolio", path: "/portfolio", icon: "/dock/portfolio.svg" },
{ key: "products", path: "/products", icon: "/dock/products.svg", disabled: true },
{ key: "contact", path: "/contact", icon: "/dock/contact.svg" },
];
function isNavItemActive(currentPath: string, itemPath: string) {
@@ -48,23 +52,36 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
const locale = useLocale();
const pathname = usePathname();
const t = useTranslations("navigation");
const reducedMotion = useReducedMotion();
const [bouncing, setBouncing] = useState<string | null>(null);
const currentPath = stripLocalePrefix(pathname);
const homeHref = getLocalizedPath(locale, "/", defaultLocale);
// macOS-style launch hop on click.
const bounceProps = (id: string) =>
reducedMotion
? {}
: {
onClick: () => setBouncing(id),
animate: bouncing === id ? { y: [0, -18, 0, -6, 0] } : { y: 0 },
transition: { duration: 0.5, ease: "easeOut" as const },
onAnimationComplete: () => setBouncing((cur) => (cur === id ? null : cur)),
};
return (
<>
{/* ===== Bottom dock (Magic UI) — primary navigation ===== */}
{/* ===== Bottom dock — 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={52}
iconMagnification={72}
iconSize={50}
iconMagnification={92}
iconDistance={150}
className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
className="pointer-events-auto h-[66px] gap-3 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">
@@ -73,6 +90,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
aria-label="mohfarawati — Home"
className="flex h-full w-full items-center justify-center rounded-[inherit]"
>
<motion.span className="flex h-full w-full items-center justify-center rounded-[inherit]" {...bounceProps("logo")}>
<Image
src="/logos/light-primary.svg"
alt="mohfarawati"
@@ -82,6 +100,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
priority
className="h-full w-full rounded-[inherit] object-contain"
/>
</motion.span>
</Link>
<DockTip label="mohfarawati" />
</DockIcon>
@@ -89,32 +108,31 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
<div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
{/* ── Pages ── */}
{navItems.map(({ key, path, disabled }) => {
{navItems.map(({ key, path, icon: iconSrc, disabled }) => {
const itemPath = path || "/";
const isActive = isNavItemActive(currentPath, itemPath);
const label = t(key);
const src = `/dock/${key}${isActive ? "-active" : ""}.svg`;
const icon = (
<motion.span
className="flex h-full w-full items-center justify-center rounded-[inherit]"
{...(disabled ? {} : bounceProps(key))}
>
<Image
src={src}
src={iconSrc}
alt={label}
width={104}
height={104}
sizes="104px"
className={cn("h-full w-full rounded-[inherit] object-contain", disabled && "opacity-55")}
/>
</motion.span>
);
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)]",
)}
className="group relative overflow-visible rounded-[26%] shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)]"
>
{disabled ? (
<span
@@ -133,6 +151,15 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
{icon}
</Link>
)}
{/* macOS running indicator */}
{isActive ? (
<span
aria-hidden
className="pointer-events-none absolute -bottom-[7px] left-1/2 h-[5px] w-[5px] -translate-x-1/2 rounded-full bg-foreground/70"
/>
) : null}
<DockTip label={label} soon={disabled ? t("soon") : undefined} />
</DockIcon>
);
components/ui/dock.tsx
+4 -2
View File
@@ -123,10 +123,12 @@ const DockIcon = ({
[size, targetSize, size],
);
// Snappy, near-instant tracking with a touch of smoothing — closer to how the
// real macOS dock follows the cursor than a soft/bouncy spring.
const scaleSize = useSpring(sizeTransform, {
mass: 0.1,
stiffness: 150,
damping: 12,
stiffness: 280,
damping: 22,
});
return (
public/dock/about-active.svg
-12
View File
@@ -1,12 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
<circle cx="50" cy="41" r="11"/><path d="M30 72 C30 57, 70 57, 70 72"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 853 B

public/dock/contact-active.svg
-12
View File
@@ -1,12 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
<rect x="27" y="35" width="46" height="30" rx="6"/><path d="M30 40 L50 54 L70 40"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 865 B

public/dock/portfolio-active.svg
-13
View File
@@ -1,13 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
<g fill="#fff">
<rect x="32" y="32" width="15" height="15" rx="4"/><rect x="53" y="32" width="15" height="15" rx="4"/>
<rect x="32" y="53" width="15" height="15" rx="4"/><rect x="53" y="53" width="15" height="15" rx="4"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 909 B

public/dock/products-active.svg
-12
View File
@@ -1,12 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
<path d="M50 28 L71 40 L71 60 L50 72 L29 60 L29 40 Z"/><path d="M29 40 L50 52 L71 40"/><path d="M50 52 L50 72"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 894 B