modify dp page and add side bar open and close feature

Author: atulya-srivastava

src/pages/dynamic-programming/DyanmicProgrammingPage.jsx

@@ -1,15 +1,16 @@
 import React, { useState } from "react";
-import { Grid,Brain,Layers,Code } from "lucide-react";
+import { Grid, Brain, Layers, Code, Menu, X } from "lucide-react";
 import Levenshtein from "./Levenshtein";
 
 export default function DynamicProgrammingPage() {
   const [selectedAlgo, setSelectedAlgo] = useState("");
+  const [sidebarOpen, setSidebarOpen] = useState(true);
 
   const renderAlgorithm = () => {
     switch (selectedAlgo) {
       case "Levenshtein":
         return (
-          <div className="w-full h-full overflow-auto p-4">
+          <div className="md:w-full w-screen overflow-clip p-2">
             <Levenshtein />
           </div>
         );
@@ -21,16 +22,16 @@ export default function DynamicProgrammingPage() {
                 <div className="flex justify-center mb-4">
                   <Grid className="w-16 h-16 text-cyan-400 animate-spin-slow" />
                 </div>
-                <div className="flex flex-col  items-center">
-                <h2 className="text-3xl font-extrabold bg-gradient-to-r from-cyan-400 via-indigo-400 to-purple-400 bg-clip-text text-transparent mb-4">
-                  Dynamic Programming Visualizer
-                </h2>
-                <p className="text-gray-400 mb-6 max-w-md">
-                  Understand how overlapping subproblems and optimal
-                  substructures work in real time. Visualize table-filling,
-                  recursion trees, and memoization flow with stunning
-                  animations! ⚙️🧩
-                </p>
+                <div className="flex flex-col items-center">
+                  <h2 className="text-3xl font-extrabold bg-gradient-to-r from-cyan-400 via-indigo-400 to-purple-400 bg-clip-text text-transparent mb-4">
+                    Dynamic Programming Visualizer
+                  </h2>
+                  <p className="text-gray-400 mb-6 max-w-md">
+                    Understand how overlapping subproblems and optimal
+                    substructures work in real time. Visualize table-filling,
+                    recursion trees, and memoization flow with stunning
+                    animations! ⚙️🧩
+                  </p>
                 </div>
                 <div className="flex items-center justify-center gap-6">
                   <Brain className="w-8 h-8 text-indigo-400 animate-pulse" />
@@ -45,12 +46,25 @@ export default function DynamicProgrammingPage() {
   };
 
   return (
-    <div className="flex h-screen bg-black text-white">
+    <div className="flex h-screen bg-black text-white relative">
       {/* Sidebar */}
-      <div className="w-64 bg-[#0f172a] p-6 border-r border-gray-800 flex-shrink-0">
-        <h2 className="text-xl font-bold mb-6 text-indigo-400 tracking-wide">
-          DP Panel
-        </h2>
+      <div
+        className={`${
+          sidebarOpen ? "translate-x-0" : "hidden"
+        } fixed md:static md:translate-x-0 transition-transform duration-300 w-64 bg-[#0f172a] min-h-screen p-6 border-r border-gray-800 flex-shrink-0 z-20`}
+      >
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-xl font-bold text-indigo-400 tracking-wide">
+            DP Panel
+          </h2>
+
+          <button
+            onClick={() => setSidebarOpen(false)}
+            className="p-1 rounded hover:bg-gray-800"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
 
         <label className="block mb-2 text-sm">Algorithm:</label>
         <select
@@ -77,9 +91,19 @@ export default function DynamicProgrammingPage() {
         </a>
       </div>
 
+      {/* Open sidebar button */}
+      {!sidebarOpen && (
+        <button
+          onClick={() => setSidebarOpen(true)}
+          className="absolute top-4 left-4 p-2 bg-gray-800 rounded-md hover:bg-gray-700 z-10"
+        >
+          <Menu className="w-6 h-6 text-indigo-400" />
+        </button>
+      )}
+
       {/* Visualization Area */}
-      <div className="flex-1 flex overflow-auto">
-        <div className="flex-1 min-w-[800px] min-h-full">
+      <div className="flex-1 flex overflow-auto ml-0 md:ml-0">
+        <div className="flex-1 min-h-full">
           {renderAlgorithm()}
         </div>
       </div>