119 lines
4.1 KiB
TypeScript
119 lines
4.1 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { NavLink, useNavigate } from 'react-router-dom';
|
||
import { useDemoStore } from '../../mock/store';
|
||
import {
|
||
LayoutDashboard,
|
||
Workflow,
|
||
Plus,
|
||
MessageSquare,
|
||
Menu,
|
||
X,
|
||
Boxes,
|
||
BadgeDollarSign,
|
||
Users,
|
||
Settings,
|
||
Sparkles,
|
||
} from 'lucide-react';
|
||
import { SYSTEM_MODULES } from '../../core/modules/registry';
|
||
|
||
export const BottomNav: React.FC = () => {
|
||
const { setIsQuickActionsOpen, setIsAiDrawerOpen } = useDemoStore();
|
||
const [isMoreMenuOpen, setIsMoreMenuOpen] = useState(false);
|
||
const navigate = useNavigate();
|
||
|
||
return (
|
||
<>
|
||
{/* More menu drawer on mobile */}
|
||
{isMoreMenuOpen && (
|
||
<div className="fixed inset-0 z-50 flex flex-col justify-end">
|
||
<div
|
||
className="fixed inset-0 krona-overlay"
|
||
onClick={() => setIsMoreMenuOpen(false)}
|
||
/>
|
||
<div className="relative bg-krona-raised border-t border-krona-border rounded-t-2xl p-4 z-10 max-h-[80vh] overflow-y-auto animate-fade-in shadow-krona-modal">
|
||
<div className="flex items-center justify-between pb-3 mb-2 border-b border-krona-border">
|
||
<span className="text-sm font-semibold text-krona-primary">Все разделы Кроны</span>
|
||
<button onClick={() => setIsMoreMenuOpen(false)} className="p-1 text-krona-secondary">
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-3 gap-2 text-center text-xs pb-4">
|
||
{SYSTEM_MODULES.map((m) => (
|
||
<button
|
||
key={m.id}
|
||
onClick={() => {
|
||
setIsMoreMenuOpen(false);
|
||
navigate(m.route);
|
||
}}
|
||
className="p-3 rounded-lg border border-krona-border bg-krona-surface hover:bg-krona-workspace flex flex-col items-center gap-1.5 transition-colors"
|
||
>
|
||
<span className="text-krona-gold font-medium text-xs truncate max-w-full">
|
||
{m.label}
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Persistent Bottom Bar */}
|
||
<nav className="fixed bottom-0 inset-x-0 h-16 bg-[#252722] text-[#D8D8D0] border-t border-[#3A3D35] flex items-center justify-around z-40 px-2">
|
||
<NavLink
|
||
to="/"
|
||
end
|
||
className={({ isActive }) =>
|
||
`flex flex-col items-center gap-1 p-1 text-[11px] ${
|
||
isActive ? 'text-[#D4B16D] font-semibold' : 'text-[#858980]'
|
||
}`
|
||
}
|
||
>
|
||
<LayoutDashboard className="w-5 h-5" />
|
||
<span>Главная</span>
|
||
</NavLink>
|
||
|
||
<NavLink
|
||
to="/operations"
|
||
className={({ isActive }) =>
|
||
`flex flex-col items-center gap-1 p-1 text-[11px] ${
|
||
isActive ? 'text-[#D4B16D] font-semibold' : 'text-[#858980]'
|
||
}`
|
||
}
|
||
>
|
||
<Workflow className="w-5 h-5" />
|
||
<span>Работа</span>
|
||
</NavLink>
|
||
|
||
{/* Center Quick Action button */}
|
||
<button
|
||
onClick={() => setIsQuickActionsOpen(true)}
|
||
className="w-11 h-11 rounded-full bg-[#2F684C] hover:bg-[#285A42] text-white flex items-center justify-center shadow-lg -mt-5 transition-transform active:scale-95"
|
||
title="Быстрое действие"
|
||
>
|
||
<Plus className="w-6 h-6" />
|
||
</button>
|
||
|
||
<NavLink
|
||
to="/communications"
|
||
className={({ isActive }) =>
|
||
`flex flex-col items-center gap-1 p-1 text-[11px] ${
|
||
isActive ? 'text-[#D4B16D] font-semibold' : 'text-[#858980]'
|
||
}`
|
||
}
|
||
>
|
||
<MessageSquare className="w-5 h-5" />
|
||
<span>Чаты</span>
|
||
</NavLink>
|
||
|
||
<button
|
||
onClick={() => setIsMoreMenuOpen(true)}
|
||
className="flex flex-col items-center gap-1 p-1 text-[11px] text-[#858980] hover:text-[#D8D8D0]"
|
||
>
|
||
<Menu className="w-5 h-5" />
|
||
<span>Ещё</span>
|
||
</button>
|
||
</nav>
|
||
</>
|
||
);
|
||
};
|