MythEclipse/GMW
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(frontend): tema monokrom + sidebar animasi game-menu + gate ringan mobile

Browse Source
This commit is contained in:
asepharyana committed 2026-08-24 17:35:51 +07:00
1 parent eda5c752b7
commit 5f42c17caa
7 files changed
+231 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

services/frontend/src/components/shell/mobile-nav.tsx
+14 -5
View File
@@ -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>
);
services/frontend/src/components/shell/nav-rail.tsx
+16 -8
View File
@@ -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}
/>