From d36b58ebce33744479172b3a603f4890b5a6fb6b Mon Sep 17 00:00:00 2001
From: shanti <shanti@luzmo.com>
Date: Fri, 6 Sep 2024 09:47:22 -0700
Subject: [PATCH] feat: make chart drawer persistant

---
 drag-n-drop-chart-library/src/App.js             |  2 +-
 .../src/Components/ChartDrawer.js                | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/drag-n-drop-chart-library/src/App.js b/drag-n-drop-chart-library/src/App.js
index 6ecf20d..4488f8e 100644
--- a/drag-n-drop-chart-library/src/App.js
+++ b/drag-n-drop-chart-library/src/App.js
@@ -67,7 +67,7 @@ export default function App() {
           maxWidth: "fit-content",
           marginInline: "auto",
         }}>
-        <Button onClick={toggleDrawer(true)}>Add/Remove Charts</Button>
+        <Button onClick={toggleDrawer(!open)}>Add/Remove Charts</Button>
         <Button onClick={handleClearCharts}>Clear All Charts</Button>
         <ChartDrawer
           open={open}
diff --git a/drag-n-drop-chart-library/src/Components/ChartDrawer.js b/drag-n-drop-chart-library/src/Components/ChartDrawer.js
index ef4c16f..b50bc87 100644
--- a/drag-n-drop-chart-library/src/Components/ChartDrawer.js
+++ b/drag-n-drop-chart-library/src/Components/ChartDrawer.js
@@ -6,6 +6,8 @@ import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
 import FlexConfig from "../Reference/FlexConfig";
+import IconButton from "@mui/material/IconButton";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 
 export default function ChartDrawer({
   open,
@@ -14,7 +16,7 @@ export default function ChartDrawer({
   handleChartClick,
 }) {
   const DrawerList = (
-    <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
+    <Box sx={{ width: 250 }} role="presentation">
       <List>
         {FlexConfig.filterList.map((filter) => (
           <ListItem
@@ -68,7 +70,17 @@ export default function ChartDrawer({
   );
 
   return (
-    <Drawer open={open} onClose={toggleDrawer(false)}>
+    <Drawer open={open} variant="persistent" onClose={toggleDrawer(false)}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+        }}>
+        <IconButton onClick={toggleDrawer(false)}>
+          <ChevronLeftIcon color="secondary" />
+        </IconButton>
+      </div>
       {DrawerList}
     </Drawer>
   );