54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import { useVoiceStore } from '../stores/voice.ts';
|
|
import { ThemeToggle } from './ThemeToggle.tsx';
|
|
|
|
interface MobileNavProps {
|
|
activeTab: 'servers' | 'channels' | 'chat' | 'members';
|
|
onTabChange: (tab: 'servers' | 'channels' | 'chat' | 'members') => void;
|
|
onToggleDrawer: () => void;
|
|
}
|
|
|
|
export function MobileNav({ activeTab, onTabChange, onToggleDrawer }: MobileNavProps) {
|
|
const isConnected = useVoiceStore((state: any) => state.isConnected);
|
|
|
|
const tabs = [
|
|
{ id: 'servers' as const, label: '[=]', title: 'Servers' },
|
|
{ id: 'channels' as const, label: '[#]', title: 'Channels' },
|
|
{ id: 'chat' as const, label: '[_]', title: 'Chat' },
|
|
{ id: 'members' as const, label: '[@]', title: 'Members' },
|
|
];
|
|
|
|
return (
|
|
<div className="md:hidden fixed bottom-0 left-0 right-0 bg-gb-bg-h border-t border-gb-bg-t z-40">
|
|
<div className="flex items-center justify-around py-2">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => {
|
|
if (tab.id === 'servers' || tab.id === 'channels') {
|
|
onToggleDrawer();
|
|
}
|
|
onTabChange(tab.id);
|
|
}}
|
|
className={`
|
|
px-3 py-1 text-xs font-mono transition-colors
|
|
${activeTab === tab.id
|
|
? 'text-gb-orange'
|
|
: 'text-gb-fg-f hover:text-gb-fg'
|
|
}
|
|
`}
|
|
title={tab.title}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
{isConnected && (
|
|
<div className="w-1.5 h-1.5 rounded-full bg-gb-green animate-pulse" title="In voice" />
|
|
)}
|
|
<ThemeToggle />
|
|
</div>
|
|
{/* Safe area for phones with bottom notch */}
|
|
<div className="h-[var(--safe-bottom)]" />
|
|
</div>
|
|
);
|
|
}
|