Basic buttons working.

components/resources/com/jessebrault/site/HeaderTemplate.wvc

@@ -9,10 +9,10 @@ import com.jessebrault.site.icon.BarsIcon
         <h2>$siteTagLine</h2>
     </div>
     <nav>
-        <button class="bars-wrapper">
+        <button id="nav-bars" class="bars-wrapper">
             <BarsIcon />
         </button>
-        <ul>
+        <ul id="nav-items">
             <Each items={menuItems} transform={<li><a href={it.path}>$it.name</a></li>} />
         </ul>
     </nav>

components/resources/com/jessebrault/site/StandardPageTemplate.wvc

@@ -21,6 +21,7 @@ import com.jessebrault.site.icon.YoutubeIcon
             </div>
             <p>Copyright $copyrightYear Jesse R. Brault. All rights reserved.</p>
         </footer>
+        <script src="/main.js"></script>
         <Each items={pageScripts} transform={<script src={it}></script>} />
     </body>
 </html>

components/resources/com/jessebrault/site/biography/BiographyBanner.txt

@@ -5,6 +5,6 @@
     <div class="banner-text blurb-container">
         <p id="jesse-brault-name">Jesse Brault</p>
         <p>American conductor, composer, and developer.</p>
-        <button type="button">Read More</button>
+        <button id="biography-read-more-button" type="button">Read More</button>
     </div>
 </div>

pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc

@@ -3,9 +3,9 @@ package com.jessebrault.site.biography
 
 import com.jessebrault.site.StandardPage
 ---
-<StandardPage title={title} banner={<BiographyBanner />}>
+<StandardPage title={title} banner={<BiographyBanner />} pageScripts={['/biography.js']}>
     <div class="article-container">
-        <article>
+        <article id="biography-article">
             <%= renderBiography() %>
         </article>
     </div>

static/biography.js

@@ -0,0 +1,7 @@
+window.addEventListener('load', function () {
+    const readMoreButton = document.getElementById('biography-read-more-button')
+    const biographyArticle = document.getElementById('biography-article')
+    readMoreButton.addEventListener('click', function () {
+        biographyArticle.scrollIntoView({ behavior: 'smooth' })
+    })
+})

static/main.css

@@ -420,6 +420,21 @@ form.contact {
     margin: 0;
 }
 
+@media screen and (max-width: 767px) {
+    nav ul {
+        position: absolute;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        display: none;
+        flex-direction: column;
+        align-items: center;
+        row-gap: 10px;
+        background-color: var(--petrol);
+        padding: 20px;
+    }
+}
+
 @media screen and (min-width: 768px) {
     html {
         font-size: 18px;

static/main.js

@@ -0,0 +1,13 @@
+window.addEventListener('load', function () {
+    const navBars = document.getElementById('nav-bars')
+    const navItems = document.getElementById('nav-items')
+    navBars.addEventListener('click', function () {
+        if (window.matchMedia('screen and (max-width: 767px)').matches) {
+            if (navItems.style.display === 'flex') {
+                navItems.style.display = 'none'
+            } else {
+                navItems.style.display = 'flex'
+            }
+        }
+    })
+})