Fix weird animation flash on mobile (#304)

When we visit the website on mobile, there's a weird animation flash. This is caused because the navbar by default is placed at left: 0, and we see the transform animation once the page loads. This places the navbar at left: 100% (outside the screen) and transforms it to move into the screen - translateX(-100%)

Reviewed-on: www/www-new#304
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>

components/Navbar.module.css

@@ -152,6 +152,11 @@
   visibility: visible;
 }
 
+/* Prevents a weird flash of opacity change on mobile */
+.navMobileBackground {
+  opacity: 0;
+}
+
 /* On a smaller desktop screen, keep the same navbar layout but decrease the
  * horizontal padding so it still fits
  */
@@ -237,7 +242,7 @@
     box-sizing: border-box;
     height: 100%;
     top: 0;
-    right: 0;
+    left: 100%;
     overflow: auto;
     z-index: 30;
 
@@ -246,7 +251,6 @@
 
     background-color: var(--secondary-background);
 
-    transform: translateX(100vw);
     transition: 0.5s;
   }
 
@@ -364,7 +368,7 @@
   }
 
   .show.navMobileBackground + .navMenuWrapper {
-    transform: translateX(0);
+    transform: translateX(-100%);
   }
 
   .rotate {