YACWC

SearchFrontend/search_ui/src/App.css

@@ -118,4 +118,59 @@
   .controls-section {
     padding: 8px 0;
   }
+}
+
+
+/* Animated drawer for logout button */
+.controls-section.drawer-open {
+    /* position: fixed; */
+    /* top: 0; */
+    /* left: 0; */
+    /* width: 300px; */
+    /* max-width: 80vw; */
+    /* height: 100vh; */
+    background: #23272f;
+    /* box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3); */
+    /* padding: 60px 20px 20px 20px; */
+    transform: translateY(-100%);
+    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 1500;
+    overflow-y: auto;
+    animation: slideInFromTop 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* Animation keyframes */
+@keyframes slideInFromTop {
+    from {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Style the logout button inside the drawer */
+.controls-section.drawer-open .control-group {
+    display: block;
+    margin: 15px 0;
+    width: 100%;
+}
+
+.controls-section.drawer-open button {
+    width: 100%;
+    padding: 12px;
+    margin: 5px 0;
+    border: none;
+    border-radius: 6px;
+    background: #ff4757;
+    color: white;
+    font-size: 1.1em;
+    cursor: pointer;
+    transition: background 0.2s ease;
+}
+
+.controls-section.drawer-open button:hover {
+    background: #ff3838;
 }