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

REPLACED - Swap dock SVG icons with Apple-style PNGs for light/dark themes
CI / quality (push) Canceled after 0s
Details

Browse Source 
Replace placeholder SVG dock icons with high-quality Apple-style PNG icons
(Contacts, Photos, App Store, Messages) with light and dark variants that
switch based on the active theme via next-themes.
This commit is contained in:
MOH
2026-09-20 21:28:13 +02:00
parent 0b513551ca
commit d5e50b84a8
13 changed files with 13 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/site-dock.tsx
+13 -10
View File
@@ -5,6 +5,7 @@ import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useLocale, useTranslations } from "next-intl";
import { useTheme } from "next-themes";
import { useState } from "react";
import { FloatingControls } from "@/components/layout/floating-controls";
@@ -28,17 +29,15 @@ 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", 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" },
{ key: "about", path: "/about" },
{ key: "portfolio", path: "/portfolio" },
{ key: "products", path: "/products", disabled: true },
{ key: "contact", path: "/contact" },
];
function isNavItemActive(currentPath: string, itemPath: string) {
@@ -54,6 +53,8 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
const t = useTranslations("navigation");
const reducedMotion = useReducedMotion();
const [bouncing, setBouncing] = useState<string | null>(null);
const { theme, resolvedTheme } = useTheme();
const activeTheme = theme === "system" ? resolvedTheme : theme;
const currentPath = stripLocalePrefix(pathname);
const homeHref = getLocalizedPath(locale, "/", defaultLocale);
@@ -111,23 +112,25 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
<div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
{/* ── Pages (icon art carries its own squircle shape) ── */}
{navItems.map(({ key, path, icon: iconSrc, disabled }) => {
{navItems.map(({ key, path, disabled }) => {
const itemPath = path || "/";
const isActive = isNavItemActive(currentPath, itemPath);
const label = t(key);
const variant = activeTheme === "dark" ? "dark" : "light";
const src = `/dock/${key}-${variant}.png`;
const icon = (
<motion.span
className="flex h-full w-full items-center justify-center"
className="flex h-full w-full items-center justify-center overflow-hidden rounded-[22%]"
{...(disabled ? {} : bounceProps(key))}
>
<Image
src={iconSrc}
src={src}
alt={label}
width={104}
height={104}
sizes="104px"
className={cn("h-full w-full object-contain", disabled && "opacity-55")}
className={cn("h-[110%] w-[110%] object-cover", disabled && "opacity-55")}
/>
</motion.span>
);
public/dock/about-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

public/dock/about-light.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

public/dock/about.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="#454b57"/><stop offset="1" stop-color="#1c2027"/></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="22" fill="url(#bg)"/>
<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.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-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

public/dock/contact-light.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

public/dock/contact.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="#454b57"/><stop offset="1" stop-color="#1c2027"/></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="22" fill="url(#bg)"/>
<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.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-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

public/dock/portfolio-light.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

public/dock/portfolio.svg
-18
View File
@@ -1,18 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#4aa8ff"/><stop offset="1" stop-color="#7b5cff"/></linearGradient>
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity="0.30"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
<clipPath id="card"><rect x="27" y="31" width="46" height="38" rx="7"/></clipPath>
</defs>
<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.25" fill="none" stroke="#fff" stroke-opacity="0.18" stroke-width="1.5"/>
<rect x="27" y="31" width="46" height="38" rx="7" fill="#ffffff"/>
<g clip-path="url(#card)">
<circle cx="40" cy="44" r="5.5" fill="#ffc23d"/>
<path d="M27 69 L43 52 L53 61 L61 51 L73 69 Z" fill="#37b877"/>
<path d="M55 69 L66 57 L73 64 L73 69 Z" fill="#2c9c86"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

public/dock/products-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

public/dock/products-light.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

public/dock/products.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="#454b57"/><stop offset="1" stop-color="#1c2027"/></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="22" fill="url(#bg)"/>
<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.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