Replace modal to drawer

styles.css

@@ -11,35 +11,30 @@ html, body {
     background: white;
 }
 
-/* The Modal (background) */
-.modal {
+/* The Drawer (background) */
+.drawer {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1; /* Sit on top */
-    left: 0;
+    right: 0; /* Align to the right side */
     top: 0;
-    width: 100%; /* Full width */
+    width: 30%; /* Adjust width as needed */
     height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
-    background-color: rgb(0,0,0); /* Fallback color */
-    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    background-color: white; /* Drawer background color */
+    box-shadow: -2px 0 5px rgba(0,0,0,0.5); /* Shadow for better visibility */
+    overflow-x: hidden; /* Prevent horizontal scroll */
 }
 
-/* Modal Content */
-.modal-content {
-    background-color: #fefefe;
-    margin: 15% auto; /* 15% from the top and centered */
+.drawer-content {
     padding: 20px;
-    border: 1px solid #888;
-    width: 80%; /* Could be more or less, depending on screen size */
 }
 
-/* The Close Button */
 .close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
+    position: absolute;
+    top: 10px;
+    right: 25px;
+    font-size: 30px;
+    cursor: pointer;
 }
 
 .close:hover,