Fix weird animation flash on mobile

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 {