added sidebar component

2024-03-07 19:12:10 +01:00
parent aff811bc32
commit 5df050d57c
4 changed files with 78 additions and 11 deletions
@@ -9,4 +9,26 @@

 .btn-active {
  background: #D10056;
+}
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 300px;
+  /* Adjust the width as needed */
+  height: 100vh;
+  background-color: #fff;
+  /* Set the background color */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  /* Add a box-shadow for visual separation */
+  transform: translateX(-100%);
+  /* Initially hide the sidebar */
+  transition: transform 0.3s ease-in-out;
+  /* Add a transition for smooth animation */
+}
+
+.sidebar.open {
+  transform: translateX(0);
+  /* Show the sidebar by removing the translation */
 }