New changes.

osinaweb/input.css

@@ -49,29 +49,31 @@
     height: 25px;
 }
 
-.closeMenuLine {
-    width: 2px;
-    height: 25px;
-}
-
-.closeMenuLine.expanded {
-    width: 25px;
-    height: 2px;
-}
 
 /* SIDE BAR */
+/* TO HIDE THE DESKTOP SIDE BAR AND HEADER ON SMALL SCREEN SIZES */
 @media (max-width: 1200px) {
     #scrollPart {
         margin-left: 0;
         width: 100%;
     }
 
-    .fixedSideHeader {
-        display: none;
-        margin-top: 100px;
-        width: 100% !important;
-        z-index: 50;
-        position: absolute;
+    .fixedSideHeader, .topHeader {
+        display: none !important;
+    }
+
+    .mobileFooter {
+        display: block !important;
+    }
+}
+
+@media (min-width: 1200px) {
+    .mobileTopHeader, .mobileFixedSideHeader {
+        display: none !important;
+    }
+
+    .mobileFooter {
+        display: none !important;
     }
 }
 
@@ -97,25 +99,6 @@
 }
 
 
-/* TO ANIMATE THE CONNECTED USERS GREEN DOT */
-@keyframes pop {
-    0% {
-        transform: scale(1);
-    }
-
-    50% {
-        transform: scale(1.1);
-    }
-
-    100% {
-        transform: scale(1);
-    }
-}
-
-.connectedUsersDot {
-    animation: pop 1s infinite ease-in-out;
-}
-
 /* DRAGGABLE SLIDER */
 .swiper-container {
     width: 100%;
@@ -155,9 +138,52 @@
 }
 
 
-
 @media screen and (max-width: 798px) {
     #notesContainer {
         display: block;
     }
+}
+
+
+
+/* TO ANIMATE THE SIDE BAR DROPDOWNS */
+.menuDropdownItems {
+    display: none;
+    visibility: hidden;
+    opacity: 0;
+    position: relative;
+    transition: opacity 0.6s ease, height 0.6s ease;
+}
+
+.menuDropdownItems.active {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+    animation: slideIn 0.6s forwards;
+}
+
+
+#mobileUserProfileDropdown {
+    display: none;
+    visibility: hidden;
+    opacity: 0;
+    position: relative;
+    transition: opacity 0.6s ease, height 0.6s ease;
+}
+
+#mobileUserProfileDropdown.active {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+    animation: slideIn 0.6s forwards;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateY(-10px);
+    }
+
+    to {
+        transform: translateY(0);
+    }
 }