mobile-update

static/assets/js/toggle.js

@@ -0,0 +1,10 @@
+// script.js
+document.addEventListener("DOMContentLoaded", () => {
+    const menuToggle = document.querySelector("#menu-btn");
+    const hiddenMenu = document.querySelector("#nav-menu");
+  
+    menuToggle.addEventListener("click", () => {
+      hiddenMenu.classList.toggle("show");
+    });
+  });
+  

static/assets/styles.css

@@ -251,6 +251,26 @@ p {
     padding-bottom: 20px;
 }
 
+#nav-menu {
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    gap:10px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.5s ease-in-out;
+}
+
+/* Add a class to show the menu */
+#nav-menu.show {
+    display: flex;
+    max-height: 400px;
+}
+
+#nav-menu .button-link {
+    width: 100%;
+}
+
 /* headers */
 h4 {
     font-size: 24px;
@@ -280,6 +300,10 @@ hr {
     border-top: 1px solid black; 
 }
 
+.list-container-mobile {
+    width: 100%;
+}
+
 /* breakpoints */
 
 @media only screen and (max-width: 1440px) {

templates/_nav.html

@@ -19,9 +19,14 @@ MM.         MM.      ,MP M   `MM.M MM.           MM   Y  ,   MM            MM
     </div></a>
     <div id="ascii-menu">
       <div class="astr-line-menu">&#x2732; &#x2732; &#x2732;</div>
-      <div class="list-container"><a href="/activities" class="button-link">MENU</a></div>
+      <div class="list-container" id="menu-btn"><a class="button-link">MENU</a></div>
       <div class="astr-line-menu">&#x2732; &#x2732; &#x2732;</div>
     </div>
+    <div id="nav-menu">
+      <div class="list-container-mobile"><a href="/activities" class="button-link">activities &#8595;</a></div>
+      <div class="list-container-mobile"><a href="https://conceptnull.substack.com/subscribe" target="_blank" class="button-link">newsletter &#8595;</a></div>
+      <div class="list-container-mobile"><a href="https://www.instagram.com/conceptnull/" class="button-link">instagram &#8595;</a></div>
+    </div>
     <div class="astr-line">&#x2732; &#x2732; &#x2732;</div>
     <div id="index-content">
         <p>A grassroot organisation of artists, creative technologist, designers, and educators focused on supporting a vibrant new media arts community in Ireland -- through our events, newsletter, and other activities.</p>         
@@ -33,4 +38,6 @@ MM.         MM.      ,MP M   `MM.M MM.           MM   Y  ,   MM            MM
             <div class="list-container"><a href="#" class="button-link">instagram &#8595;</a></div>
         </div>
     </div>
-</div>
+</div>
+
+<script src={{ url_for('static', filename='assets/js/toggle.js') }}></script>