|
|
|
import { ReactNode } from "react";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import { Home, PieChart, Plus, MessageSquare, Wallet, Bell, Settings } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import MainStockMenu from "@/components/stock/MainStockMenu";
|
|
|
|
interface AppLayoutProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
const AppLayout = ({ children }: AppLayoutProps) => {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const currentPath = location.pathname;
|
|
|
|
const navItems = [
|
|
{ icon: Home, label: "Home", path: "/" },
|
|
{ icon: Wallet, label: "Transactions", path: "/transactions" },
|
|
{ icon: Plus, label: "Add", path: "/add-transaction", isAction: true },
|
|
{ icon: PieChart, label: "Reports", path: "/reports" },
|
|
{ icon: MessageSquare, label: "Messages", path: "/messages" },
|
|
];
|
|
|
|
|
|
const showStockMenu = !currentPath.startsWith('/stock');
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-gradient-to-b from-[#f8fafc] to-[#f7f8f2] text-black">
|
|
<div className="fixed top-4 right-4 z-10">
|
|
<button
|
|
onClick={() => navigate('/settings')}
|
|
className="p-2 rounded-full bg-white/80 backdrop-blur-sm shadow-md hover:bg-white/90 transition-all"
|
|
>
|
|
<Settings size={20} className="text-[#00a651]" />
|
|
</button>
|
|
</div>
|
|
|
|
{showStockMenu && <MainStockMenu />}
|
|
|
|
<main className="flex-1 pb-16 overflow-auto">
|
|
<div className="animate-fade-in">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
|
|
<nav className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-lg border-t border-slate-200 shadow-lg">
|
|
<div className="flex justify-around items-center h-16 px-2 max-w-screen-lg mx-auto">
|
|
{navItems.map((item) => (
|
|
<button
|
|
key={item.path}
|
|
onClick={() => navigate(item.path)}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center w-full h-full transition-all duration-200",
|
|
item.isAction ? "relative -top-5 md:-top-6" : "",
|
|
currentPath === item.path && !item.isAction
|
|
? "text-[#00a651]"
|
|
: "text-slate-500 hover:text-slate-800"
|
|
)}
|
|
>
|
|
{item.isAction ? (
|
|
<div className="flex items-center justify-center w-12 h-12 md:w-14 md:h-14 rounded-full bg-[#e31b23] text-white shadow-lg shadow-red-400/50">
|
|
<item.icon size={22} className="md:size-24" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
<item.icon size={20} className="md:size-22" />
|
|
<span className="text-xs md:text-sm mt-1">{item.label}</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AppLayout;
|
|
|
