From a96f58749d6cc74496da7dacee2ad2bc8a08582c Mon Sep 17 00:00:00 2001
From: Devin Becker <devinbecker@gmail.com>
Date: Thu, 28 Mar 2024 13:05:55 -0700
Subject: [PATCH] fixed mobile nav via z-index change on modal.show

---
 _includes/js/homepage-zindex-js.html | 18 ++++++++++++++++++
 _layouts/mainstreet-home.html        |  4 ++--
 _sass/_custom.scss                   |  8 ++++----
 3 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 _includes/js/homepage-zindex-js.html

diff --git a/_includes/js/homepage-zindex-js.html b/_includes/js/homepage-zindex-js.html
new file mode 100644
index 0000000..898eae7
--- /dev/null
+++ b/_includes/js/homepage-zindex-js.html
@@ -0,0 +1,18 @@
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Select the modal and the tv image container
+  var offcanvasNavbar = document.getElementById('offcanvasNavbar');
+  var tvImageContainer = document.getElementById('tvimage-container');
+
+  // Listen for the show event
+  offcanvasNavbar.addEventListener('show.bs.offcanvas', function () {
+    tvImageContainer.style.zIndex = "-1"; // Set z-index to -1 when modal is shown
+  });
+
+  // Listen for the hide event
+  offcanvasNavbar.addEventListener('hide.bs.offcanvas', function () {
+    tvImageContainer.style.zIndex = ""; // Remove z-index when modal is hidden
+  });
+});
+
+</script>
\ No newline at end of file
diff --git a/_layouts/mainstreet-home.html b/_layouts/mainstreet-home.html
index 52a963b..dff52e3 100644
--- a/_layouts/mainstreet-home.html
+++ b/_layouts/mainstreet-home.html
@@ -1,14 +1,14 @@
 ---
 # Default home page with boxes providing collection stats
 layout: default
-custom-foot: js/interviews-js.html;js/youtube-clips-modal.html
+custom-foot: js/interviews-js.html;js/youtube-clips-modal.html;js/homepage-zindex-js.html
 ---
 <div class="container-fluid">
 
   <div class="row my-2">
 
     <div class="col-12 col-lg-6 py-0 text-center">
-      <div class="tvimage-container position-relative">
+      <div id="tvimage-container" class="position-relative">
           <a data-bs-toggle="modal" data-bs-target="#videoClipModal" data-bs-youtubeid="NVs2-8j8bh4">
               <!-- Ensure this a-tag has the stretched-link class to make the entire div clickable -->
               <figure class="figure mx-3">
diff --git a/_sass/_custom.scss b/_sass/_custom.scss
index c855c94..94a5f05 100644
--- a/_sass/_custom.scss
+++ b/_sass/_custom.scss
@@ -165,17 +165,17 @@
 
   // Home page TV effect with button
 
-  .tvimage-container {
+  #tvimage-container {
     cursor: pointer;
     overflow: hidden;
    
 }
 
-.tvimage-container:hover figure img {
+#tvimage-container:hover figure img {
     filter: brightness(85%);
 }
 
-.tvimage-container .figure {
+#tvimage-container .figure {
     margin: 0;
 }
 
@@ -183,7 +183,7 @@
     z-index: 2;
 }
 
-.tvimage-container a::before {
+#tvimage-container a::before {
     content: "";
     position: absolute;
     top: 0;