feat(frontend): tema monokrom + sidebar animasi game-menu + gate ringan mobile
This commit is contained in:
asepharyana
@@ -0,0 +1,39 @@
|
||||
# GMW FE — Monokrom Hitam-Putih + Sidebar Ala Menu Game + Ringan di Mobile
|
||||
|
||||
Tanggal: 2026-08-24 · Basis: `eda5c75` (shell usable hasil revert)
|
||||
|
||||
## Tujuan
|
||||
1. Tema **monokrom murni** (hitam-putih, tanpa warna) di dark & light.
|
||||
2. Sidebar (desktop NavRail + mobile dock) beranimasi **ala menu game** — corner
|
||||
brackets, sweep, stagger masuk, marker segitiga.
|
||||
3. **Ringan di mobile**: matikan WebGL ambient di layar kecil, kurangi biaya
|
||||
blur/backdrop, animasi transform/opacity saja.
|
||||
|
||||
## Non-goals
|
||||
- Tidak menyentuh backend, endpoint, hooks/data-flow, struktur route.
|
||||
- Tidak menambah dependensi baru (CSS murni untuk semua animasi).
|
||||
|
||||
## File yang disentuh
|
||||
| File | Perubahan |
|
||||
|---|---|
|
||||
| `src/app/globals.css` | Token mono (dark+light): signal/amber/vermilion → skala putih-abu; `.glass` blur adaptif; kelas baru `.game-nav-item` (bracket ::before/::after, sweep, stagger via `--i`), `.game-frame` (panel sudut terpotong + garis tergambar), keyframes `sweep-x`, `draw-line`, `nav-in`; media query `<md`: blur 18→8px, hambat animasi berat |
|
||||
| `src/components/shell/nav-rail.tsx` | Item pakai `.game-nav-item` + `style={{'--i': n}}`; marker aktif jadi segitiga ▸ putih; hapus box-shadow glow besar (ganti sweep) |
|
||||
| `src/components/shell/mobile-nav.tsx` | Dock mono: tab aktif = bar atas putih + sweep sekali; target sentuh ≥44px; hapus glow blob |
|
||||
| `src/components/shell/topbar.tsx` | Aksen mono + `.game-frame` pada container (cek markup dulu) |
|
||||
| `src/components/ambient/ambient-canvas.tsx` | Early-return WebGL bila `(pointer: coarse)` / lebar <768 / `saveData` / core ≤4; fallback statik CSS tetap |
|
||||
| `src/components/ambient/status/signal tone` (`SIGNAL_RGB`) | Semua tone jadi grayscale (putih; intensitas beda per tone) |
|
||||
| `src/app/(dashboard)/dashboard/view.tsx` | Hero + kartu metrik pakai `.game-frame`/cut-corner sebagai showcase |
|
||||
|
||||
## Keputusan desain
|
||||
- **Full monokrom termasuk danger**: flag/moderation tidak lagi merah —
|
||||
ditandai badge putih-di-atlas-hitam inversi + pulse. Kalau user kangen merah,
|
||||
tinggal isi ulang `--color-vermilion`.
|
||||
- Semua animasi hanya `transform`/`opacity` (compositor-friendly), hormati
|
||||
`prefers-reduced-motion` (sudah ada kill-switch global).
|
||||
|
||||
## Verifikasi (gerbang)
|
||||
1. `tsc --noEmit` bersih; biome 0 error 0 warning.
|
||||
2. `pnpm build` sukses; smoke lokal 4024 → 9 route 200.
|
||||
3. Push → GHA "Build & Deploy (Nix)" hijau → live 9×200.
|
||||
4. Visual check live: desktop (rail game-menu terlihat) + cek rule mobile
|
||||
(media query & gate kode) — screenshot disimpan.
|
||||
@@ -87,7 +87,7 @@ export function DashboardView({
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* Hero */}
|
||||
<GlassPanel glow className="relative overflow-hidden">
|
||||
<GlassPanel glow className="game-frame relative overflow-hidden">
|
||||
<div className="scan-line absolute inset-x-0 top-0" />
|
||||
<div className="flex flex-wrap items-end justify-between gap-4">
|
||||
<div>
|
||||
|
||||
@@ -29,13 +29,13 @@
|
||||
--color-hairline: oklch(1 0 0 / 0.1);
|
||||
--hairline-w: 1px;
|
||||
|
||||
/* ── Semantic signals ── */
|
||||
--color-signal: oklch(0.86 0.19 128);
|
||||
--color-signal-ink: oklch(0.18 0.03 70);
|
||||
--color-signal-glow: oklch(0.86 0.19 128 / 0.4);
|
||||
--color-amber: oklch(0.85 0.15 72);
|
||||
--color-vermilion: oklch(0.68 0.21 25);
|
||||
--color-vermilion-glow: oklch(0.68 0.21 25 / 0.4);
|
||||
/* ── Semantic signals (monochrome: tone = luminance steps) ── */
|
||||
--color-signal: oklch(0.97 0 0);
|
||||
--color-signal-ink: oklch(0.1 0 0);
|
||||
--color-signal-glow: oklch(1 0 0 / 0.35);
|
||||
--color-amber: oklch(0.72 0 0);
|
||||
--color-vermilion: oklch(0.85 0 0);
|
||||
--color-vermilion-glow: oklch(1 0 0 / 0.45);
|
||||
|
||||
--color-ring: var(--color-signal);
|
||||
|
||||
@@ -74,8 +74,8 @@
|
||||
background: oklch(0.22 0.02 70 / 0.34);
|
||||
}
|
||||
.light ::selection {
|
||||
background: var(--color-signal-glow);
|
||||
color: var(--color-ink);
|
||||
background: oklch(0.2 0 0 / 0.9);
|
||||
color: oklch(1 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -300,6 +300,138 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══ Game-menu nav (monochrome) ═══
|
||||
Corner brackets + one-shot light sweep + staggered entrance.
|
||||
Pure transform/opacity — compositor only. */
|
||||
|
||||
.game-nav-item {
|
||||
--i: 0;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
animation: nav-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
animation-delay: calc(var(--i) * 45ms);
|
||||
}
|
||||
/* corner brackets on hover/active */
|
||||
.game-nav-item::before,
|
||||
.game-nav-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.game-nav-item::before {
|
||||
border-left: 1.5px solid currentColor;
|
||||
border-top: 1.5px solid currentColor;
|
||||
border-top-left-radius: 13px;
|
||||
clip-path: polygon(0 0, 55% 0, 55% 28%, 28% 28%, 28% 100%, 0 100%);
|
||||
}
|
||||
.game-nav-item::after {
|
||||
border-right: 1.5px solid currentColor;
|
||||
border-bottom: 1.5px solid currentColor;
|
||||
border-bottom-right-radius: 13px;
|
||||
clip-path: polygon(100% 100%, 45% 100%, 45% 72%, 72% 72%, 72% 0, 100% 0);
|
||||
}
|
||||
.game-nav-item:hover::before,
|
||||
.game-nav-item:hover::after,
|
||||
.game-nav-item.is-active::before,
|
||||
.game-nav-item.is-active::after {
|
||||
opacity: 0.9;
|
||||
}
|
||||
/* one-shot sweep */
|
||||
.game-nav-item .game-sweep {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
.game-nav-item .game-sweep > i {
|
||||
position: absolute;
|
||||
top: -20%;
|
||||
bottom: -20%;
|
||||
width: 34%;
|
||||
left: -60%;
|
||||
background: linear-gradient(
|
||||
105deg,
|
||||
transparent,
|
||||
oklch(1 0 0 / 0.16),
|
||||
transparent
|
||||
);
|
||||
transform: skewX(-14deg);
|
||||
}
|
||||
.game-nav-item:hover .game-sweep > i,
|
||||
.game-nav-item.is-active .game-sweep > i {
|
||||
animation: sweep-x 0.55s ease-out both;
|
||||
}
|
||||
/* active triangle marker (game cursor) */
|
||||
.game-marker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-block: 5px solid transparent;
|
||||
border-left: 7px solid currentColor;
|
||||
transform: translateY(-50%);
|
||||
filter: drop-shadow(0 0 4px var(--color-signal-glow));
|
||||
}
|
||||
|
||||
@keyframes sweep-x {
|
||||
from { left: -60%; }
|
||||
to { left: 130%; }
|
||||
}
|
||||
@keyframes nav-in {
|
||||
from { opacity: 0; transform: translateX(-10px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* ── Game frame: panel with cut corners + drawn-in edge lines ── */
|
||||
.game-frame {
|
||||
position: relative;
|
||||
}
|
||||
.game-frame::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) top left /
|
||||
26px 1.5px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) top left / 1.5px
|
||||
26px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) top right /
|
||||
26px 1.5px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) top right / 1.5px
|
||||
26px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom left /
|
||||
26px 1.5px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom left /
|
||||
1.5px 26px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom right /
|
||||
26px 1.5px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom right /
|
||||
1.5px 26px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* ── Mobile lightness (<md): cheaper blur, shorter animations ── */
|
||||
@media (max-width: 767px) {
|
||||
.glass {
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
.game-nav-item {
|
||||
animation-duration: 0.25s;
|
||||
animation-delay: calc(var(--i) * 18ms);
|
||||
}
|
||||
.scan-line::after,
|
||||
.animate-shimmer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.scan-line::after,
|
||||
.scan-line,
|
||||
|
||||
@@ -67,6 +67,19 @@ export function AmbientCanvas({
|
||||
const mount = mountRef.current;
|
||||
if (!mount) return;
|
||||
|
||||
// Lightness gate: skip the WebGL layer entirely on small/coarse/data-saver
|
||||
// devices — the static CSS fallback below stays. Desktop keeps the haze.
|
||||
const nav = navigator as Navigator & {
|
||||
connection?: { saveData?: boolean; deviceMemory?: number };
|
||||
deviceMemory?: number;
|
||||
};
|
||||
const lightDevice =
|
||||
window.matchMedia("(max-width: 767px)").matches ||
|
||||
window.matchMedia("(pointer: coarse)").matches ||
|
||||
nav.connection?.saveData === true ||
|
||||
(nav.deviceMemory ?? 8) <= 4;
|
||||
if (lightDevice) return;
|
||||
|
||||
let renderer: THREE.WebGLRenderer;
|
||||
try {
|
||||
renderer = new THREE.WebGLRenderer({
|
||||
|
||||
@@ -12,11 +12,14 @@ import { AmbientCanvas } from "./ambient-canvas";
|
||||
|
||||
export type SignalTone = "signal" | "amber" | "vermilion";
|
||||
|
||||
/** sRGB triplets for the three semantic signals (matches globals.css). */
|
||||
/**
|
||||
* sRGB triplets for the three semantic signals — MONOCHROME build:
|
||||
* tone is expressed as luminance/intensity, not hue (black & white theme).
|
||||
*/
|
||||
export const SIGNAL_RGB: Record<SignalTone, [number, number, number]> = {
|
||||
signal: [0.42, 1.0, 0.52],
|
||||
amber: [1.0, 0.76, 0.28],
|
||||
vermilion: [1.0, 0.34, 0.28],
|
||||
signal: [0.92, 0.94, 0.96], // nominal — near-white
|
||||
amber: [0.62, 0.64, 0.68], // warn — mid grey
|
||||
vermilion: [0.78, 0.8, 0.84], // danger — bright flash grey
|
||||
};
|
||||
|
||||
export interface AmbientState {
|
||||
|
||||
@@ -24,16 +24,25 @@ export function MobileNav() {
|
||||
aria-label={item.label}
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={cn(
|
||||
"relative flex flex-1 flex-col items-center justify-center rounded-[12px] rounded-t-[20px] px-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] pt-2 md:hidden",
|
||||
"game-nav-item relative flex min-h-[44px] flex-1 flex-col items-center justify-center rounded-t-[20px] px-2 pt-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] md:hidden",
|
||||
active
|
||||
? "bg-signal/15 text-signal"
|
||||
: "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
|
||||
? "is-active text-white"
|
||||
: "text-ink-faint hover:text-ink-soft",
|
||||
)}
|
||||
>
|
||||
{active && (
|
||||
<span className="absolute -top-2 h-8 w-8 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-4 top-0 h-[2px] bg-white shadow-[0_0_8px_var(--color-signal-glow)]"
|
||||
/>
|
||||
)}
|
||||
<item.icon className="size-[20px]" strokeWidth={active ? 2.4 : 2} />
|
||||
<span className="game-sweep" aria-hidden="true">
|
||||
<i />
|
||||
</span>
|
||||
<item.icon
|
||||
className="relative z-10 size-[20px]"
|
||||
strokeWidth={active ? 2.4 : 2}
|
||||
/>
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
|
||||
@@ -9,30 +9,37 @@ function NavItem({
|
||||
label,
|
||||
active,
|
||||
Icon,
|
||||
index,
|
||||
}: {
|
||||
href: string;
|
||||
label: string;
|
||||
active: boolean;
|
||||
Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||||
index: number;
|
||||
}) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
aria-label={label}
|
||||
aria-current={active ? "page" : undefined}
|
||||
style={{ "--i": index } as React.CSSProperties}
|
||||
className={cn(
|
||||
"group relative flex size-11 items-center justify-center rounded-[13px] transition-all",
|
||||
"game-nav-item group flex size-11 items-center justify-center rounded-[13px] transition-colors",
|
||||
active
|
||||
? "bg-signal/15 text-signal"
|
||||
? "is-active bg-white/10 text-white"
|
||||
: "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
|
||||
)}
|
||||
>
|
||||
{active && (
|
||||
<span className="absolute -left-3 h-6 w-1 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
|
||||
)}
|
||||
<Icon className="size-[18px]" strokeWidth={active ? 2.4 : 2} />
|
||||
{active && <span className="game-marker -left-3.5" />}
|
||||
<span className="game-sweep" aria-hidden="true">
|
||||
<i />
|
||||
</span>
|
||||
<Icon
|
||||
className="relative z-10 size-[18px]"
|
||||
strokeWidth={active ? 2.4 : 2}
|
||||
/>
|
||||
{/* hover tooltip — labels are hidden in the rail, so surface on hover */}
|
||||
<span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-[9px] border border-hairline bg-canvas-2 px-2.5 py-1.5 text-xs font-medium text-ink-soft opacity-0 shadow-lg transition-opacity group-hover:opacity-100 md:block">
|
||||
<span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-[9px] border border-hairline bg-canvas-2 px-2.5 py-1.5 font-mono text-xs font-medium text-ink-soft opacity-0 shadow-lg transition-opacity group-hover:opacity-100 md:block">
|
||||
{label}
|
||||
</span>
|
||||
</a>
|
||||
@@ -46,11 +53,12 @@ export function NavRail() {
|
||||
return (
|
||||
<nav className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[68px] flex-col items-center gap-1 rounded-[18px] py-4 md:flex">
|
||||
<div className="flex flex-1 flex-col gap-1">
|
||||
{navItems.map((item) => (
|
||||
{navItems.map((item, i) => (
|
||||
<NavItem
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
label={item.label}
|
||||
index={i}
|
||||
active={isActivePath(path, item.matchPrefix)}
|
||||
Icon={item.icon}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user