From 5d45c14a7ed2513dd131b7323fbc80d5b99d0347 Mon Sep 17 00:00:00 2001
From: JesseBrault0709 <62299747+JesseBrault0709@users.noreply.github.com>
Date: Sun, 9 Jun 2024 12:14:33 +0200
Subject: [PATCH] Basic buttons working.

---
 .../com/jessebrault/site/HeaderTemplate.wvc       |  4 ++--
 .../com/jessebrault/site/StandardPageTemplate.wvc |  1 +
 .../site/biography/BiographyBanner.txt            |  2 +-
 .../site/biography/BiographyPageTemplate.wvc      |  4 ++--
 static/biography.js                               |  7 +++++++
 static/main.css                                   | 15 +++++++++++++++
 static/main.js                                    | 13 +++++++++++++
 7 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 static/biography.js
 create mode 100644 static/main.js

diff --git a/components/resources/com/jessebrault/site/HeaderTemplate.wvc b/components/resources/com/jessebrault/site/HeaderTemplate.wvc
index 34317f7..c521495 100644
--- a/components/resources/com/jessebrault/site/HeaderTemplate.wvc
+++ b/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>
diff --git a/components/resources/com/jessebrault/site/StandardPageTemplate.wvc b/components/resources/com/jessebrault/site/StandardPageTemplate.wvc
index da7e5f0..9bc1a36 100644
--- a/components/resources/com/jessebrault/site/StandardPageTemplate.wvc
+++ b/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>
diff --git a/components/resources/com/jessebrault/site/biography/BiographyBanner.txt b/components/resources/com/jessebrault/site/biography/BiographyBanner.txt
index c782a88..e2dd209 100644
--- a/components/resources/com/jessebrault/site/biography/BiographyBanner.txt
+++ b/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>
diff --git a/pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc b/pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc
index 794bbe7..fc22530 100644
--- a/pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc
+++ b/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>
diff --git a/static/biography.js b/static/biography.js
new file mode 100644
index 0000000..7a7ace0
--- /dev/null
+++ b/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' })
+    })
+})
diff --git a/static/main.css b/static/main.css
index ef7404f..306e32f 100644
--- a/static/main.css
+++ b/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;
diff --git a/static/main.js b/static/main.js
new file mode 100644
index 0000000..55f4756
--- /dev/null
+++ b/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'
+            }
+        }
+    })
+})