Add glass effect and animations to navbar

src/app/components/Navbar.module.css

@@ -5,7 +5,9 @@
   left: 0;
   right: 0;
   z-index: 9999;
-  background-color: #fff;
+  color: black;
+  background-color: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(2rem);
 }
 
 /* Reset default styling on lists */
@@ -64,6 +66,10 @@
 
 /* Add styles for mobile view */
 @media (max-width: 500px) {
+  .navbar {
+    background-color: white;
+  }
+
   .links {
     display: flex;
     flex-direction: column;
@@ -81,7 +87,8 @@
     padding-bottom: 0.5em;
 
     transition-property: top border-radius;
-    transition-duration: 0.3s;
+    transition-duration: 0.4s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
 
   .links {
@@ -114,6 +121,17 @@
   .dropdown {
     padding: 0 !important;
   }
+
+  .dropdownMenu {
+    max-height: 0.5em;
+    overflow: hidden;
+    transition: max-height 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  .dropdownActive .dropdownMenu {
+    max-height: 20em;
+    transition: max-height 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
 }
 
 /* Styles for desktop view */
@@ -185,8 +203,7 @@
 }
 
 .dropdown:not(.dropdownActive) {
-  background-color: #fff;
+  transition: all 0.3s;
-  transition: all 0.3s ease-out;
 }
 
 .dropdown:not(.dropdownActive) li {
@@ -197,14 +214,6 @@
   background-color: #f1f1f1;
 }
 
-.dropdownMenu {
-  display: none;
-}
-
-.dropdownActive .dropdownMenu {
-  display: block;
-}
-
 .dropdown:not(.dropdownActive) .dropdownTitle {
   margin-bottom: 0;
 }