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

IMPROVED - Use swappable image icons and move controls to a corner dock

Browse Source 
- Dock icons are now real SVG files under public/dock/ (macOS squircle
  look, active variants), so they can be replaced with custom art later.
- Full-bleed icons (DockIcon padding 0), fixed logo src to stop the
  refresh flash.
- Remove the top menu bar entirely; relocate theme/language/sound (+admin)
  into a corner control dock that expands on click.
This commit is contained in:
moh
2026-09-20 19:12:44 +02:00
parent 6e7cc4dbc6
commit ac8746a287
15 changed files with 267 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/(site)/layout.tsx
+3 -9
View File
@@ -8,7 +8,7 @@ import { SiteDock } from "@/components/layout/site-dock";
import { SiteFooter } from "@/components/layout/site-footer";
import { ScrollSmootherProvider } from "@/components/scroll-smoother-provider";
import { isSuperAdmin } from "@/lib/admin-auth";
import { getMaintenanceMode, getSiteSettings, getSiteSettingsMediaBindings } from "@/lib/app-config";
import { getMaintenanceMode, getSiteSettings } from "@/lib/app-config";
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
type SiteLayoutProps = {
@@ -24,9 +24,8 @@ export const revalidate = 0;
export default async function SiteLayout({ children, params }: SiteLayoutProps) {
noStore();
await params;
const [maintenanceEnabled, mediaBindings, siteSettings] = await Promise.all([
const [maintenanceEnabled, siteSettings] = await Promise.all([
getMaintenanceMode(),
getSiteSettingsMediaBindings(),
getSiteSettings(),
]);
const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
@@ -44,12 +43,7 @@ export default async function SiteLayout({ children, params }: SiteLayoutProps)
<>
<ScrollSmootherProvider />
<SiteAmbientBackdrop />
<SiteDock
lightLogoUrl={mediaBindings.siteLogoLight?.url}
darkLogoUrl={mediaBindings.siteLogoDark?.url}
defaultLocale={siteSettings.defaultLocale}
isSuperAdmin={authenticated}
/>
<SiteDock defaultLocale={siteSettings.defaultLocale} isSuperAdmin={authenticated} />
<div id="smooth-wrapper">
<div id="smooth-content">
<div className="site-content-frame flex min-h-screen flex-col">
components/layout/dock-app-icon.tsx
-119
View File
@@ -1,119 +0,0 @@
"use client";
import { useId } from "react";
export type DockSymbol = "home" | "about" | "portfolio" | "products" | "contact";
/**
* macOS Big Sur–style squircle app icon, drawn entirely in SVG so it stays
* crisp at every magnification step. Inactive icons use a neutral graphite
* gradient; the active icon lights up in the brand coral.
*/
export function DockAppIcon({
symbol,
active = false,
disabled = false,
}: {
symbol: DockSymbol;
active?: boolean;
disabled?: boolean;
}) {
const uid = useId().replace(/[:]/g, "");
const bg = `bg-${uid}`;
const gloss = `gloss-${uid}`;
return (
<svg
viewBox="0 0 100 100"
className="h-full w-full"
role="presentation"
style={disabled ? { opacity: 0.55 } : undefined}
>
<defs>
<linearGradient id={bg} x1="0" y1="0" x2="0" y2="1">
{active ? (
<>
<stop offset="0" stopColor="#ff8a5f" />
<stop offset="1" stopColor="#e5431f" />
</>
) : (
<>
<stop offset="0" stopColor="#454b57" />
<stop offset="1" stopColor="#1c2027" />
</>
)}
</linearGradient>
<linearGradient id={gloss} x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stopColor="#ffffff" stopOpacity="0.28" />
<stop offset="0.5" stopColor="#ffffff" stopOpacity="0" />
</linearGradient>
</defs>
{/* tile */}
<rect x="4" y="4" width="92" height="92" rx="26" fill={`url(#${bg})`} />
<rect x="4" y="4" width="92" height="92" rx="26" fill={`url(#${gloss})`} />
<rect
x="4.75"
y="4.75"
width="90.5"
height="90.5"
rx="25.25"
fill="none"
stroke="#ffffff"
strokeOpacity="0.14"
strokeWidth="1.5"
/>
{/* symbol */}
<g
fill="none"
stroke="#ffffff"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="round"
>
{symbol === "home" && (
<>
<path d="M29 49 L50 30 L71 49" />
<path d="M34 46 V70 H66 V46" />
</>
)}
{symbol === "about" && (
<>
<circle cx="50" cy="41" r="11" />
<path d="M30 72 C30 57, 70 57, 70 72" />
</>
)}
{symbol === "contact" && (
<>
<rect x="27" y="35" width="46" height="30" rx="6" />
<path d="M30 40 L50 54 L70 40" />
</>
)}
</g>
{/* filled symbols */}
{symbol === "portfolio" && (
<g fill="#ffffff">
<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>
)}
{symbol === "products" && (
<g
fill="none"
stroke="#ffffff"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="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>
);
}
components/layout/floating-controls.tsx
+114
View File
@@ -0,0 +1,114 @@
"use client";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { ShieldCheck, SlidersHorizontal, X } from "lucide-react";
import { useTranslations } from "next-intl";
import { useState, type ReactNode } from "react";
import { LocaleToggle } from "@/components/layout/locale-toggle";
import { SoundToggle } from "@/components/sound-toggle";
import { ThemeToggle } from "@/components/theme-toggle";
import { buildAdminUrl } from "@/lib/admin-routing";
import type { AppLocale } from "@/lib/locale";
import { cn } from "@/lib/utils";
type FloatingControlsProps = {
locale: string;
defaultLocale: AppLocale;
isSuperAdmin?: boolean;
};
const pill =
"flex h-11 w-11 items-center justify-center rounded-full border border-border/60 bg-background/80 text-foreground/80 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
const itemVariants = {
hidden: { opacity: 0, y: 12, scale: 0.8 },
show: { opacity: 1, y: 0, scale: 1 },
};
export function FloatingControls({
locale,
defaultLocale,
isSuperAdmin = false,
}: FloatingControlsProps) {
const [open, setOpen] = useState(false);
const t = useTranslations("navigation");
const reducedMotion = useReducedMotion();
const controls: ReactNode[] = [
<SoundToggle
key="sound"
ariaLabel={t("soundMute")}
mutedAriaLabel={t("soundUnmute")}
variant="ghost"
className={cn(pill, "border-transparent bg-transparent")}
/>,
<ThemeToggle
key="theme"
ariaLabel={t("themeToggle")}
variant="ghost"
className={cn(pill, "border-transparent bg-transparent")}
/>,
<LocaleToggle
key="locale"
locale={locale}
defaultLocale={defaultLocale}
className={cn(pill, "border-transparent bg-transparent p-0")}
/>,
];
if (isSuperAdmin) {
controls.push(
<a key="admin" href={buildAdminUrl("/")} aria-label="Open admin dashboard" className={pill}>
<ShieldCheck className="h-[1.125rem] w-[1.125rem]" />
</a>,
);
}
return (
<div className="pointer-events-none fixed bottom-0 end-0 z-50 flex flex-col items-center gap-2 p-4"
style={{ paddingBottom: "calc(1rem + env(safe-area-inset-bottom, 0px))" }}>
<AnimatePresence>
{open ? (
<motion.div
key="tray"
className="pointer-events-auto flex flex-col items-center gap-2 rounded-full border border-border/50 bg-background/60 p-1.5 shadow-panel backdrop-blur-chrome"
initial={reducedMotion ? { opacity: 0 } : "hidden"}
animate={reducedMotion ? { opacity: 1 } : "show"}
exit={reducedMotion ? { opacity: 0 } : "hidden"}
variants={{
hidden: { transition: { staggerChildren: 0.04, staggerDirection: -1 } },
show: { transition: { staggerChildren: 0.05, delayChildren: 0.02 } },
}}
>
{controls.map((control, index) => (
<motion.div
key={index}
variants={reducedMotion ? undefined : itemVariants}
transition={{ type: "spring", stiffness: 460, damping: 28 }}
>
{control}
</motion.div>
))}
</motion.div>
) : null}
</AnimatePresence>
<button
type="button"
onClick={() => setOpen((value) => !value)}
aria-expanded={open}
aria-label={open ? t("closeMenu") : t("openMenu")}
className={cn(pill, "pointer-events-auto")}
>
<motion.span
animate={{ rotate: open ? 90 : 0 }}
transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 24 }}
className="flex items-center justify-center"
>
{open ? <X className="h-[1.125rem] w-[1.125rem]" /> : <SlidersHorizontal className="h-[1.125rem] w-[1.125rem]" />}
</motion.span>
</button>
</div>
);
}
components/layout/site-dock.tsx
+27 -142
View File
@@ -1,25 +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 { useTheme } from "next-themes";
import { useLocale, useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import { DockAppIcon, type DockSymbol } from "@/components/layout/dock-app-icon";
import { LocaleToggle } from "@/components/layout/locale-toggle";
import { SoundToggle } from "@/components/sound-toggle";
import { ThemeToggle } from "@/components/theme-toggle";
import { FloatingControls } from "@/components/layout/floating-controls";
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";
type SiteDockProps = {
lightLogoUrl?: string | null;
darkLogoUrl?: string | null;
defaultLocale: AppLocale;
/**
* Server-computed via `isSuperAdmin()` in the parent layout. This client
@@ -30,8 +21,10 @@ type SiteDockProps = {
isSuperAdmin?: boolean;
};
type NavKey = "home" | "about" | "portfolio" | "products" | "contact";
type NavItem = {
key: DockSymbol;
key: NavKey;
path: string;
disabled?: boolean;
};
@@ -51,134 +44,16 @@ function isNavItemActive(currentPath: string, itemPath: string) {
return currentPath === itemPath || currentPath.startsWith(`${itemPath}/`);
}
function MenuClock({ locale }: { locale: string }) {
const [time, setTime] = useState("");
useEffect(() => {
const format = () =>
setTime(
new Date().toLocaleTimeString(locale === "ar" ? "ar" : locale, {
hour: "2-digit",
minute: "2-digit",
}),
);
format();
const id = setInterval(format, 20_000);
return () => clearInterval(id);
}, [locale]);
return (
<span
suppressHydrationWarning
className="hidden select-none px-1 text-xs font-semibold tabular-nums text-foreground/65 sm:inline"
>
{time || "--:--"}
</span>
);
}
export function SiteDock({
lightLogoUrl,
darkLogoUrl,
defaultLocale,
isSuperAdmin = false,
}: SiteDockProps) {
export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps) {
const locale = useLocale();
const pathname = usePathname();
const t = useTranslations("navigation");
const { theme, resolvedTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
const isArabic = locale === "ar";
const currentPath = stripLocalePrefix(pathname);
const homeHref = getLocalizedPath(locale, "/", defaultLocale);
const adminHref = buildAdminUrl("/");
const activeTheme = theme === "system" ? resolvedTheme : theme;
const isDark = mounted && activeTheme === "dark";
const logoSrc = isDark
? darkLogoUrl || lightLogoUrl || "/logos/dark-primary.svg"
: lightLogoUrl || darkLogoUrl || "/logos/light-primary.svg";
const brandSubtitle = isArabic
? "مطوّر ويب · فريلانسر"
: "Webdesigner Bremen · Freelancer";
const controlButtonClassName =
"h-8 w-8 rounded-full border border-transparent text-foreground/70 hover:bg-accent hover:text-foreground";
return (
<>
{/* ===== Top menu bar (macOS-style utility strip) ===== */}
<header
className="fixed inset-x-0 top-0 z-40 border-b border-border/60 bg-background/70 backdrop-blur-chrome"
style={{ paddingTop: "env(safe-area-inset-top, 0px)" }}
>
<div className="mx-auto flex h-12 max-w-[100rem] items-center gap-3 px-4 sm:px-6">
<Link
href={homeHref}
className="flex items-center gap-2 rounded-full px-1 py-1 font-black tracking-tight"
aria-label="mohfarawati"
>
<span className="h-2 w-2 rounded-full bg-primary shadow-[0_0_10px_hsl(var(--primary))]" />
<span className="text-sm" dir={isArabic ? "rtl" : undefined}>
{isArabic ? (
<>
<span className="text-[hsl(var(--hero-ink))] dark:text-foreground">محمد</span>{" "}
<span className="text-primary">فرواتي</span>
</>
) : (
<>
<span className="text-[hsl(var(--hero-ink))] dark:text-foreground">MOH</span>
<span className="text-primary">FARAWATI</span>
</>
)}
</span>
</Link>
<span
className="hidden border-s border-border/60 ps-3 text-xs font-medium text-foreground/60 md:inline"
dir={isArabic ? "rtl" : undefined}
>
{brandSubtitle}
</span>
<div className="ms-auto flex items-center gap-1">
<MenuClock locale={locale} />
<LocaleToggle
locale={locale}
defaultLocale={defaultLocale}
className={controlButtonClassName}
/>
<SoundToggle
ariaLabel={t("soundMute")}
mutedAriaLabel={t("soundUnmute")}
variant="ghost"
className={controlButtonClassName}
/>
<ThemeToggle
ariaLabel={t("themeToggle")}
variant="ghost"
className={controlButtonClassName}
/>
{isSuperAdmin ? (
<a
href={adminHref}
aria-label="Open admin dashboard"
className="ms-1 inline-flex h-8 items-center gap-1.5 rounded-full border border-border/60 bg-background/60 px-3 text-xs font-semibold text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
>
<ShieldCheck className="h-4 w-4" />
<span className="hidden lg:inline">Admin</span>
</a>
) : null}
</div>
</div>
</header>
{/* ===== Bottom dock (Magic UI) — primary navigation ===== */}
<div
className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4"
@@ -186,12 +61,12 @@ export function SiteDock({
>
<Dock
direction="bottom"
iconSize={50}
iconMagnification={86}
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 */}
{/* 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}
@@ -199,16 +74,13 @@ export function SiteDock({
className="flex h-full w-full items-center justify-center rounded-[inherit]"
>
<Image
src={logoSrc}
src="/logos/light-primary.svg"
alt="mohfarawati"
width={96}
height={96}
sizes="96px"
width={104}
height={104}
sizes="104px"
priority
className={cn(
"h-full w-full rounded-[inherit] object-contain transition-opacity duration-300",
mounted ? "opacity-100" : "opacity-0",
)}
className="h-full w-full rounded-[inherit] object-contain"
/>
</Link>
<DockTip label="mohfarawati" />
@@ -220,8 +92,18 @@ export function SiteDock({
const itemPath = path || "/";
const isActive = isNavItemActive(currentPath, itemPath);
const label = t(key);
const src = `/dock/${key}${isActive ? "-active" : ""}.svg`;
const icon = <DockAppIcon symbol={key} active={isActive} disabled={disabled} />;
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
@@ -257,6 +139,9 @@ export function SiteDock({
})}
</Dock>
</div>
{/* ===== Corner controls — theme / language / sound / admin ===== */}
<FloatingControls locale={locale} defaultLocale={defaultLocale} isSuperAdmin={isSuperAdmin} />
</>
);
}
components/ui/dock.tsx
+1 -1
View File
@@ -107,7 +107,7 @@ const DockIcon = ({
...props
}: DockIconProps) => {
const ref = useRef<HTMLDivElement>(null);
const padding = Math.max(2, size * 0.05);
const padding = 0;
const defaultMouseX = useMotionValue(Infinity);
const distanceCalc = useTransform(mouseX ?? defaultMouseX, (val: number) => {
public/dock/about-active.svg
+12
View File
@@ -0,0 +1,12 @@
<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.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.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

After

Width:  |  Height:  |  Size: 849 B

public/dock/about.svg
+12
View File
@@ -0,0 +1,12 @@
<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.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.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

After

Width:  |  Height:  |  Size: 849 B

public/dock/contact-active.svg
+12
View File
@@ -0,0 +1,12 @@
<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.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.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

After

Width:  |  Height:  |  Size: 861 B

public/dock/contact.svg
+12
View File
@@ -0,0 +1,12 @@
<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.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.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

After

Width:  |  Height:  |  Size: 861 B

public/dock/home-active.svg
+12
View File
@@ -0,0 +1,12 @@
<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.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.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="M29 49 L50 30 L71 49"/><path d="M34 46 V70 H66 V46"/></g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 840 B

public/dock/home.svg
+12
View File
@@ -0,0 +1,12 @@
<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.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.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="M29 49 L50 30 L71 49"/><path d="M34 46 V70 H66 V46"/></g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 840 B

public/dock/portfolio-active.svg
+13
View File
@@ -0,0 +1,13 @@
<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.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.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

After

Width:  |  Height:  |  Size: 905 B

public/dock/portfolio.svg
+13
View File
@@ -0,0 +1,13 @@
<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.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.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

After

Width:  |  Height:  |  Size: 905 B

public/dock/products-active.svg
+12
View File
@@ -0,0 +1,12 @@
<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.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.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

After

Width:  |  Height:  |  Size: 890 B

public/dock/products.svg
+12
View File
@@ -0,0 +1,12 @@
<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.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
</defs>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.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

After

Width:  |  Height:  |  Size: 890 B