Updated 404 page to include left sidebar.

Sidebar contains search and site section headings.

Author: stumbo

assets/scss/_styles_project.scss

@@ -67,6 +67,19 @@
     }
 }
 
+// 404 page sidebar styling
+.td-404 .td-sidebar-nav h5 {
+    font-size: 16px;
+    padding-left: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #dee2e6;
+    margin-left: 0;
+}
+
+.td-404 .td-sidebar-nav__section {
+    padding-left: 1rem;
+}
+
 // Keep search visible on mobile, wrap to second row
 @media (max-width: 991.98px) {
     .td-navbar-container {

layouts/404.html

@@ -1,10 +1,34 @@
 {{ define "main" }}
-  <main id="main">
-    <div>
-      <h1 id="title">Page Not Found</h1>
-      <p>The page or document you were trying to reach does not exist. It might have been moved or removed. If you are following a link from some other source, please let us know so we can correct the problem.</p>
-      <p>Please check the URL for typos or 
-      <a href="{{ "" | relURL }}">visit our homepage</a>.</p>
-    </div>
-  </main>
+<div class="td-main">
+  <div class="row flex-xl-nowrap">
+    <aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+      <div class="td-sidebar__inner">
+        <form class="td-sidebar__search d-flex align-items-center">
+          <div class="td-search">
+            <div class="td-search__icon"></div>
+            <input type="search" name="q" class="td-search__input form-control td-search-input" placeholder="Search this site…" aria-label="Search this site…" autocomplete="off">
+          </div>
+        </form>
+        <nav class="td-sidebar-nav">
+          <h5 class="mt-3 mb-2">Site Sections</h5>
+          <ul class="td-sidebar-nav__section pe-md-3 ul-0 list-unstyled">
+            {{ range site.Menus.main }}
+            <li class="td-sidebar-nav__section-title my-2">
+              <a href="{{ .URL }}" class="td-sidebar-link">
+                {{ if .Pre }}{{ .Pre | safeHTML }} {{ end }}{{ .Name }}
+              </a>
+            </li>
+            {{ end }}
+          </ul>
+        </nav>
+      </div>
+    </aside>
+    <main class="col-12 col-md-9 col-xl-8 ps-md-5" role="main">
+      <h1>Page Not Found</h1>
+      <p class="lead">The page you were looking for doesn't exist. It may have been moved or removed.</p>
+      <p>You can use the search box or browse the site sections on the left to find what you're looking for.</p>
+      <p>Or <a href="{{ "" | relURL }}">return to the homepage</a>.</p>
+    </main>
+  </div>
+</div>
 {{ end }}