hamburgesa menu for small devices

2024-10-20 17:03:51 -04:00 · 2024-10-20 17:03:51 -04:00 · 906e52665a
commit 906e52665a
parent 6dcee44ee9
1 changed files with 28 additions and 2 deletions
--- a/templates/index.html
+++ b/templates/index.html
@ -126,7 +126,12 @@
            text-decoration: none;
            color: {{ accent_color }};
        }
-
+        .nav-toggle {
+            display: none;
+            cursor: pointer;
+            font-size: 1.5rem;
+            text-align: right;
+        }

        @media (max-width: 768px) {

@ -155,13 +160,23 @@
                height: auto;
                position: static;
                padding: 10px;
-          }
+            }
+            .sidebar-nav ul {
+                display: none;
+            }
+            .nav-toggle {
+                display: block;
+            }
+            .sidebar-nav.active ul {
+                display: block;
+            }
        }
    </style>
 </head>
 <body>
    <div class="sidebar">
        <div class="sidebar-nav noto-sans-mono-font">
+            <div class="nav-toggle">☰</div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
@ -321,6 +336,17 @@
        window.addEventListener('resize', handleResize);

        loadImages(); // Initial load
+
+        function setupNavToggle() {
+            const navToggle = document.querySelector('.nav-toggle');
+            const sidebarNav = document.querySelector('.sidebar-nav');
+
+            navToggle.addEventListener('click', () => {
+                sidebarNav.classList.toggle('active');
+            });
+        }
+
+        setupNavToggle();
    </script>
 </body>
 </html>