File size: 3,022 Bytes
24d40b9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
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" },
];
// Hide the stock menu on stock management pages
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;
|