Collapsible

src/app/market/components/MarketSidebar.tsx

@@ -1,32 +0,0 @@
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-
-export default function MarketSidebar() {
-  return (
-    <div className="h-full w-sm flex flex-col gap-4">
-      <div className="flex h-16 border-b px-3">placeholder</div>
-      <Tabs defaultValue="buy" className="px-3 border-b">
-        <TabsList className="w-full h-14! p-0 px-2 bg-transparent border">
-          <TabsTrigger
-            value="buy"
-            className="h-9 bg-transparent data-[state=active]:bg-bullish data-[state=active]:text-accent-foreground"
-          >
-            Buy
-          </TabsTrigger>
-          <TabsTrigger
-            value="sell"
-            className="h-9 bg-transparent data-[state=active]:bg-bearish data-[state=active]:text-accent-foreground"
-          >
-            Sell
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="buy">
-          <div className="h-72">buy placeholder</div>
-        </TabsContent>
-        <TabsContent value="sell" className="border-b">
-          <div className="h-72">sell placeholder</div>
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}

src/app/market/components/market-sidebar/BuySell.tsx

@@ -0,0 +1,55 @@
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useState } from "react";
+
+export default function BuySell() {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <Tabs defaultValue="buy" className="px-3 border-b">
+      <div className="flex items-center justify-between border-b bg-transparent">
+        <TabsList className="h-14! p-0 px-2 bg-transparent border-none flex-1">
+          <TabsTrigger
+            value="buy"
+            className="h-9 bg-transparent data-[state=active]:bg-bullish data-[state=active]:text-accent-foreground"
+          >
+            Buy
+          </TabsTrigger>
+          <TabsTrigger
+            value="sell"
+            className="ml-0.5 h-9 bg-transparent data-[state=active]:bg-bearish data-[state=active]:text-accent-foreground"
+          >
+            Sell
+          </TabsTrigger>
+        </TabsList>
+
+        {/* The Toggle Button */}
+        <Button
+          variant="outline"
+          size="xs"
+          className="h-6 w-6 p-0 rounded-full"
+          onClick={() => setIsCollapsed(!isCollapsed)}
+        >
+          {isCollapsed ? (
+            <ChevronUp className="h-4 w-4" />
+          ) : (
+            <ChevronDown className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+
+      {/* Conditional Rendering or Height Hiding */}
+      {!isCollapsed && (
+        <>
+          <TabsContent value="buy">
+            <div className="h-72">buy placeholder</div>
+          </TabsContent>
+          <TabsContent value="sell">
+            <div className="h-72">sell placeholder</div>
+          </TabsContent>
+        </>
+      )}
+    </Tabs>
+  );
+}

src/app/market/components/market-sidebar/MarketSidebar.tsx

@@ -0,0 +1,10 @@
+import BuySell from "./BuySell";
+
+export default function MarketSidebar() {
+  return (
+    <div className="h-full w-sm flex flex-col gap-4">
+      <div className="flex h-16 border-b px-3">placeholder</div>
+      <BuySell />
+    </div>
+  );
+}

src/app/market/page.tsx

@@ -2,7 +2,7 @@
 
 import Navbar from "@/components/layout/Navbar";
 import Statusbar from "@/components/layout/Statusbar";
-import MarketSidebar from "./components/MarketSidebar";
+import MarketSidebar from "./components/market-sidebar/MarketSidebar";
 
 export default function Market() {
   return (