app/page.tsx (33 lines of code) (raw):

"use client"; import Assistant from "@/components/assistant"; import ToolsPanel from "@/components/tools-panel"; import { Menu, X } from "lucide-react"; import { useState } from "react"; export default function Main() { const [isToolsPanelOpen, setIsToolsPanelOpen] = useState(false); return ( <div className="flex justify-center h-screen"> <div className="w-full md:w-[70%]"> <Assistant /> </div> <div className=" hidden md:block w-[30%]"> <ToolsPanel /> </div> {/* Hamburger menu for small screens */} <div className="absolute top-4 right-4 md:hidden"> <button onClick={() => setIsToolsPanelOpen(true)}> <Menu size={24} /> </button> </div> {/* Overlay panel for ToolsPanel on small screens */} {isToolsPanelOpen && ( <div className="fixed inset-0 z-50 flex justify-end bg-black bg-opacity-30"> <div className="w-full bg-white h-full p-4"> <button className="mb-4" onClick={() => setIsToolsPanelOpen(false)}> <X size={24} /> </button> <ToolsPanel /> </div> </div> )} </div> ); }