Jannis Braun
79252fe54a
Replace Discord flex layout with CSS Grid on desktop (312px sidebar + 1fr main) and overlay drawer on mobile. Migrate all discord-* class references to Aether Drift design tokens across 15 files (~200 refs). Layout: ServerSidebar becomes a fixed glass strip (md:glass-strip), ChannelSidebar gets pl-[72px] offset, bottom bar is a glass-bubble (z-105), MessageInput floats as absolute glass pill on desktop (z-110). MemberSidebar/ActivityPanel hidden on mobile via hidden md:block. Z-index stack: MobileNav backdrop z-35, sidebar z-40, glass strip z-100, bottom bar z-105, input bubble z-110, hamburger z-120, profile popout z-145, device panels z-150, modals z-200.
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { useUIStore } from '../../stores/uiStore';
|
|
|
|
export function MobileNav() {
|
|
const isMobile = useUIStore((s) => s.isMobile);
|
|
const toggleSidebar = useUIStore((s) => s.toggleSidebar);
|
|
const sidebarOpen = useUIStore((s) => s.sidebarOpen);
|
|
|
|
if (!isMobile) return null;
|
|
|
|
return (
|
|
<>
|
|
{/* Hamburger button in header */}
|
|
<button
|
|
onClick={toggleSidebar}
|
|
className="fixed top-3 left-3 z-[120] p-1.5 rounded bg-surface-channel text-txt-primary md:hidden"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
|
{sidebarOpen ? (
|
|
<path d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z" />
|
|
) : (
|
|
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
|
|
)}
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Backdrop when sidebar is open on mobile */}
|
|
{sidebarOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-[35] md:hidden"
|
|
onClick={toggleSidebar}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|