File size: 3,089 Bytes
c59d808 |
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 81 82 83 84 85 86 87 88 89 90 |
import React from "react";
import { User, SquarePen, X, PanelLeftClose, ChefHat } from "lucide-react";
import { useRouter } from "next/navigation";
import RecentChats from "./RecentChats";
import { TABLET_BREAKPOINT } from "@/constants/chat";
interface SidebarProps {
isOpen: boolean;
toggleSidebar?: () => void;
}
const Sidebar = ({ isOpen, toggleSidebar = () => {} }: SidebarProps) => {
const router = useRouter();
const handleNewChat = () => {
router.push(`/`);
if (
typeof window !== "undefined" &&
window.innerWidth < TABLET_BREAKPOINT &&
toggleSidebar
) {
toggleSidebar();
}
};
return (
<>
{/* Overlay for mobile sidebar */}
{isOpen && (
<div
className="fixed inset-0 bg-neutral-950 opacity-50 z-40 md:hidden"
onClick={toggleSidebar}
></div>
)}
<aside
className={`bg-primary-600 shadow-md h-full fixed inset-y-0 left-0 z-50 transform transition-all duration-300 ease-in-out
md:static md:block md:transform-none md:translate-none md:z-auto
${isOpen ? "translate-x-0 w-64" : "-translate-x-full w-20"}`}
>
<div className="flex flex-col h-full justify-between">
<div className="px-4">
<div className="flex items-center justify-between py-3">
{isOpen && (
<div className="bg-secondary-100 p-2.5 rounded-2xl">
<ChefHat size={20} className="text-primary-600" />
</div>
)}
<button
className="text-grey-200 hover:text-grey-300 cursor-pointer px-2"
onClick={toggleSidebar}
>
<PanelLeftClose className="hidden md:block" />
<X className="md:hidden" />
</button>
</div>
<nav className="flex-1 py-4">
<button
onClick={handleNewChat}
className={`flex items-center text-secondary-100 hover:bg-primary-500 transition-colors rounded-lg cursor-pointer
${isOpen ? "gap-3 ps-2 py-3 w-full" : "w-fit p-2"}`}
>
<SquarePen size={20} className="text-secondary-100" />
{isOpen && <span>New Chat</span>}
</button>
{isOpen && (
<div className="ps-2 py-2 text-sm font-semibold text-grey-200">
Recent Chats
</div>
)}
{isOpen && <RecentChats toggleSidebar={toggleSidebar} />}
</nav>
</div>
<div className="p-4 border-t border-tertiary-400 md:hidden">
<div className="flex items-center">
<div className="w-8 h-8 rounded-full bg-secondary-100 flex items-center justify-center">
<User size={16} className="text-primary-700" />
</div>
<span className="ml-2 text-grey-200 font-medium">User Name</span>
</div>
</div>
</div>
</aside>
</>
);
};
export default Sidebar;
|