don't hide menu on small screens if no js

Saver3011 · Oct 24, 2021 · a49955f · a49955f
1 parent 7908a62
commit a49955f
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 24 deletions.
diff --git a/assets/css/_main.scss b/assets/css/_main.scss
@@ -140,33 +140,38 @@ nav {
 
 // Navigation - mobile
 @media (max-width: 650px) {
-  #menu-toggle {
-    display: block;
-  }
-
   #nav-menu {
-    display: none;
-    height: 100vh;
-    width: 100%;
-    margin: 0;
-    margin-top: calc(var(--feather-grid-mega) * 2);
-    animation: fadein 1.5s;
-
-    li {
+      margin-top: var(--feather-grid-xxsmall);
+  }
+  html:not(.no-js) {
+    #menu-toggle {
       display: block;
-      font-weight: var(--feather-font-weight-bold);
-      font-size: var(--feather-font-size-jumbo);
-      line-height: var(--feather-line-height-jumbo);
-      padding: var(--feather-grid-medium) 0;
+    }
+
+    #nav-menu {
+      display: none;
+      height: 100vh;
+      width: 100%;
       margin: 0;
-      &:not(:last-child) {
-        border-bottom: 1px solid var(--tw-color-blue-faded);
+      margin-top: calc(var(--feather-grid-mega) * 2);
+      animation: fadein 1.5s;
+
+      li {
+        display: block;
+        font-weight: var(--feather-font-weight-bold);
+        font-size: var(--feather-font-size-jumbo);
+        line-height: var(--feather-line-height-jumbo);
+        padding: var(--feather-grid-medium) 0;
+        margin: 0;
+        &:not(:last-child) {
+          border-bottom: 1px solid var(--tw-color-blue-faded);
+        }
       }
     }
-  }
 
-  #nav-menu.active {
-    display: block;
+    #nav-menu.active {
+      display: block;
+    }
   }
 }
 

diff --git a/assets/css/year-in-review.scss b/assets/css/year-in-review.scss
@@ -542,7 +542,7 @@ span.metric-name {
   }
 
   // Copied from main.css because mobile navigation is activated at a wider width on this page
-  #menu-toggle {
+  html:not(.no-js) #menu-toggle {
     display: block;
   }
 

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="no-js">
   <head>
     {{ partial "head.html" . }}
   </head>
@@ -27,6 +27,7 @@
     {{ partial "footer.html" . }}
   </body>
 
+  <script>document.getElementsByTagName("html")[0].classList.remove("no-js")</script>
   <script src="{{ "js/main.js" | relURL }}"></script>
   {{ with .Params.custom_js }}<script src="{{ printf "js/%s" . | relURL }}"></script>{{ end }}
   {{ if hugo.IsProduction }}{{ partial "ga.html" . }}{{ end }}

diff --git a/layouts/_default/year-in-review.html b/layouts/_default/year-in-review.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="no-js">
   <head>
     <meta charset="utf-8" />
     <meta name="title" content="{{ .Title }}">
@@ -367,6 +367,7 @@ <h1>@TwitterOSS</h1>
   };
 </script>
 
+<script>document.getElementsByTagName("html")[0].classList.remove("no-js")</script>
 <script src="{{ "js/main.js" | relURL }}"></script>
 <script src="{{ printf "js/%s" .Params.custom_js | relURL }}"></script>
 {{ partial "ga.html" . }}