Drawer Component CSS

Author: PrathameshDhande22

quartz/components/styles/drawer.scss

@@ -0,0 +1,29 @@
+@use "../../styles/variables.scss" as *;
+
+.drawer {
+    position: fixed;
+    top: 60px;
+    right: 0;
+    width: 100vw;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: var(--gray);
+    z-index: 600;
+    box-shadow:
+        rgba(85, 86, 86, 0.48) 6px 2px 16px 0px,
+        rgba(0, 0, 0, 0.8) -6px -2px 16px 0px;
+
+    &.active {
+        display: block;
+        transform: translateX(0);
+        @media all and ($tablet) {
+            transform: translateX(-100%);
+        }
+
+        @media all and ($desktop) {
+            transform: translateX(-100%);
+        }
+    }
+}