Updated 404 page to include left sidebar.

[stumbo]

Sidebar contains search and site section headings.

You can see what it looks like here: 404 example

The formatting is a little different, I can continue to work it, if desired. But, let's at least see if this is where we want to go before I go further.

[Copilot]

Pull request overview

Updates the site’s Hugo/Docsy 404 template to present a left sidebar (search + “Site Sections” navigation) on the not-found page, aligning the 404 experience with the rest of the site navigation.

Changes:

• Replaced the 404 page content with a two-column layout including a sidebar and “Site Sections” menu.
• Added project SCSS rules scoped to the 404 page for sidebar heading/list spacing.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
layouts/404.html	Reworks 404 markup to include sidebar search + menu and updated messaging.
assets/scss/_styles_project.scss	Adds 404-specific sidebar styling rules under .td-404.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

This template defines the main block, so it will be rendered inside Docsy’s base layout. Docsy’s base layout already provides the .td-main + .row flex-xl-nowrap grid wrapper (see layouts/bibliography/baseof.html:13-16 as an in-repo example), so adding another .td-main/.row here can lead to nested grids and unexpected spacing/column behavior. Consider moving the sidebar layout up into an overridden base template for just the 404 kind (or render a full-page 404 template rather than reintroducing the outer grid inside the main block).

Suggested change

	<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>
	<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">
	<input type="hidden" name="sites" value="{{ .Site.BaseURL }}">
	</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>

[Copilot]

Because this file is a define "main" template, it will typically be inserted into a base template that already contains the page’s primary <main role="main"> element. Introducing another <main ... role="main"> here risks invalid nested <main> landmarks (and duplicate role="main"), which can confuse assistive technologies. Prefer using a <div>/<section> for this inner column, and let the base template provide the single page-level <main> landmark.

Suggested change

	<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>
	<section class="col-12 col-md-9 col-xl-8 ps-md-5">
	<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>
	</section>

[Copilot]

The sidebar search <form> currently has no action, so submitting (e.g., pressing Enter) will navigate to /404.html?q=... rather than the site’s search results page (content/en/search.md defines a /search/ page). Unless JavaScript intercepts the submit, this makes the search box non-functional as a basic fallback. Set the form action to the search page URL (and keep method="get" with the existing q parameter) so it works without JS/interception.

[pamoroso]

The page looks good.