add base layout

src/components/common/main-menu.tsx

@@ -0,0 +1,17 @@
+import { Button } from "../ui/button";
+import { observer } from "mobx-react-lite";
+import { useAccountStore } from "@/contexts/AccountContext";
+
+export const MainMenu = observer(() => {
+	const { isMainMenuOpen, setIsMainMenuOpen } = useAccountStore();
+	return (
+		<div
+			data-open={isMainMenuOpen}
+			className="w-[30px] data-[open=true]:w-[124px] transition-all border-r p-2"
+		>
+			<Button onClick={() => setIsMainMenuOpen(!isMainMenuOpen)}>
+				{isMainMenuOpen ? "Close" : "Open"}
+			</Button>
+		</div>
+	);
+});

src/components/interaction-panel/chat.tsx

@@ -0,0 +1,24 @@
+import { useAccountStore } from "@/contexts/AccountContext";
+import { Button } from "../ui/button";
+import { observer } from "mobx-react-lite";
+
+export const Chat = observer(() => {
+	const { isSandboxOpen, setIsSandboxOpen, isMainMenuOpen, setIsMainMenuOpen } =
+		useAccountStore();
+
+	return (
+		<div className="flex-1">
+			<Button
+				onClick={() => {
+					setIsSandboxOpen(!isSandboxOpen);
+					if (isMainMenuOpen && !isSandboxOpen) {
+						setIsMainMenuOpen(false);
+					}
+				}}
+				className="ml-10"
+			>
+				OPEN SANDBOX
+			</Button>
+		</div>
+	);
+});

src/components/interaction-panel/sandbox.tsx

@@ -0,0 +1,15 @@
+import { useAccountStore } from "@/contexts/AccountContext";
+import { observer } from "mobx-react-lite";
+
+export const Sandbox = observer(() => {
+	const { isSandboxOpen } = useAccountStore();
+
+	return (
+		<div
+			data-open={isSandboxOpen}
+			className="w-0 data-[open=true]:w-[40svw] border-l-1 transition-all border-r p-0 bg-red-600"
+		>
+			SANDBOOOOX
+		</div>
+	);
+});