Fix menu being empty on narrow layouts (#6440)

Fixes #6439 which was caused
by a CSS order change in
#6436. Also fixes some of the
related TODOs left by that change in order to fix the issue without
reverting.

Can test by toggling the menu in a narrow layout of the page, ensuring
it is visible, then ensuring the page content is still visible as well
once the menu is closed.

src/_sass/base/_layout.scss

@@ -5,14 +5,15 @@
 }
 
 #page-content {
+  display: flex;
   min-height: calc(100vh - $site-header-height);
   min-width: 0;
   width: 100%;
+  flex-direction: row;
+  justify-content: center;
 
-  &:not(.focused) {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
+  &.focused {
+    flex-direction: column;
   }
 
   body.obsolete & {

src/_sass/components/_header.scss

@@ -40,49 +40,32 @@
           align-items: center;
         }
       }
-    }
-  }
 
-  .brand {
-    display: flex;
-    width: 5.5rem;
-    overflow: hidden;
-    margin-left: 1.25rem;
-    align-items: center;
-  }
-}
-
-// TODO(parlough): Reverse and simplify these media queries.
-@media(max-width: 960px) {
-  #mainnav {
-    ul {
-      li {
+      // TODO(parlough): Reverse and simplify these media queries.
+      @media(max-width: 960px) {
         display: none;
 
         &.searchfield {
           display: block;
         }
       }
-    }
-  }
-}
-
-@media(max-width: 479px) {
-  #menu-toggle {
-    order: 2;
-  }
 
-  #mainnav {
-    ul {
-      li {
+      @media(max-width: 479px) {
         &.searchfield {
           display: none;
         }
       }
     }
   }
-}
 
+  .brand {
+    display: flex;
+    width: 5.5rem;
+    overflow: hidden;
+    margin-left: 1.25rem;
+    align-items: center;
+  }
+}
 
 .site-header {
   background-color: $site-color-white;

src/_sass/components/_sidenav.scss

@@ -2,55 +2,44 @@
 @use '../base/mixins';
 
 $sidenav-divider-color: #e7e8ed;
+$sidenav-wide-layout: 1024px;
 
 #sidenav {
   margin: 0;
   overflow-y: auto;
-  width: 16rem;
   min-width: 16rem;
   height: calc(100vh - $site-header-height);
   padding: 0.75rem 0.75rem 2.25rem;
   position: sticky;
   top: 0;
   scrollbar-width: thin;
 
-  border-right: 0.1rem solid $sidenav-divider-color;
+  display: none;
+  width: 100%;
+  background: #fff;
+  z-index: 100;
 
-  // TODO(parlough): Reverse and simplify these media queries.
-  @media (max-width: 1024px) {
-    width: 100%;
-    background: #fff;
-    z-index: 100;
+  @at-root body.open_menu {
+    #sidenav {
+      display: block;
+    }
 
-    .site-header__search {
-      display: flex;
+    // Only hide page content if menu is open and in narrow layout.
+    #page-content {
+      display: none;
     }
   }
 
-  @media (max-width: 1024px) {
+  @media (min-width: $sidenav-wide-layout) {
     display: block;
+    width: 16rem;
 
-    @at-root body.open_menu {
-      &:before {
-        content: '';
-        display: block;
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 100%;
-        z-index: 5;
-        background-color: rgba($gray-base, 0.4);
-        cursor: pointer;
-        pointer-events: none;
-        @include mixins.transition(0.5s);
-      }
+    border-right: 0.1rem solid $sidenav-divider-color;
+    background: none;
 
-      // Hide the body content and only show the sidenav.
-      #page-content {
-        display: none;
-      }
+
+    @at-root body.open_menu #page-content {
+      display: flex;
     }
   }
 
@@ -178,24 +167,27 @@ $sidenav-divider-color: #e7e8ed;
   }
 
   .navbar-nav {
-    display: none;
+    display: block;
 
     a.nav-link {
       font-size: 1.125rem;
       margin-top: 0.5rem;
       margin-bottom: 0.5rem;
       padding: 0.375rem 0.6rem;
     }
+
+    // Hide items from top navbar in wide layout to avoid duplication.
+    @media (min-width: $sidenav-wide-layout) {
+      display: none;
+    }
   }
-}
 
-@media(max-width: 1024px) {
-  #sidenav {
-    display: none;
+  .site-header__search {
+    display: flex;
 
-    // The top-level navigation items in the mobile sidenav.
-    .navbar-nav {
-      display: block;
+    // Hide search from top navbar in wide layout.
+    @media (min-width: $sidenav-wide-layout) {
+      display: none;
     }
   }
 }

src/_sass/pages/_dash.scss

@@ -6,8 +6,10 @@
 $dash-max-width: 1330px;
 
 body.homepage {
-  #sidenav {
-    display: none;
+  &:not(.open_menu) {
+    #sidenav {
+      display: none;
+    }
   }
 
   .dash-header-callout {

src/_sass/pages/_error.scss

@@ -1,8 +1,10 @@
 @use '../base/variables' as *;
 
 body.error {
-  #sidenav {
-    display: none;
+  &:not(.open_menu) {
+    #sidenav {
+      display: none;
+    }
   }
 
   .banner {
@@ -20,18 +22,28 @@ body.error {
   h1 {
     color: white;
     font-family: $site-font-family-gsans-display;
-    font-size: 100px;
+    font-size: 8rem;
     margin: 0 auto;
   }
 
   h2 {
     color: white;
     font-family: $site-font-family-gsans;
-    font-size: 24px;
-    margin: 8px auto 16px;
+    font-size: 2rem;
+    margin: 0 auto 16px;
+  }
+
+  #page-content {
+    padding: 1rem;
+
+    a {
+      color: $site-color-card-link;
+    }
   }
 
   #in-content-search {
+    max-width: 100%;
+
     input[type="search"] {
       display: inline-block;
       background: #35404d;
@@ -41,15 +53,11 @@ body.error {
       border-radius: 30px;
       height: 70px;
       line-height: 70px;
-      width: 100%;
-      max-width: 880px;
-      margin: 0 auto 88px;
-    }
-  }
+      width: 40rem;
+      max-width: 90%;
+      margin: 2rem 1rem;
 
-  .content {
-    a {
-      color: $site-color-card-link;
+      outline-offset: 2px;
     }
   }
 }

src/content/404.html

@@ -11,7 +11,7 @@
   <h1>404</h1>
   <h2>Page not found</h2>
 
-  <div class="text-center content">
+  <div class="text-center">
     <form action="/search" id="in-content-search">
       <input type="hidden" name="cx" value="011220921317074318178:i4mscbaxtru">
       <input type="hidden" name="ie" value="UTF-8">