More responsive website

jeremyfa · jeremyfa · commit a1226f3422ab · 2026-01-09T01:25:45.000+01:00
diff --git a/content/_layouts/page.ejs b/content/_layouts/page.ejs
@@ -52,7 +52,15 @@
     </head>
     <body id="page-<%= category %>" class="page<%- category != 'home' ? ' page-standard' : '' %><%- typeof(subCategory) != 'undefined' ? ' page-' + category + '-' + subCategory : '' %>">
         <aside id="site-navigation">
-            <ul>
+            <div class="nav-header">
+                <a href="/" class="nav-logo"><img src="/static/ceramic-small.png" class="ceramic-icon" />Ceramic</a>
+                <button class="hamburger" aria-label="Toggle menu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+            </div>
+            <ul class="nav-links">
                 <li<%- category == 'home' ? ' class="selected"' : '' %>><a href="/"><img src="/static/ceramic-small.png" class="ceramic-icon" />Ceramic</a></li>
                 <li<%- category == 'guides' ? ' class="selected"' : '' %>><a href="/guides">Guides</a></li>
                 <li<%- category == 'examples' ? ' class="selected"' : '' %>><a href="/examples">Examples</a></li>
diff --git a/content/examples.ejs b/content/examples.ejs
@@ -1,6 +1,7 @@
 ---
 layout: examples
 category: examples
+subCategory: index
 title: Examples
 ---
 <%
diff --git a/content/static/script.js b/content/static/script.js
@@ -1,6 +1,26 @@
 
 document.addEventListener("DOMContentLoaded", function(e) {
 
+    // Hamburger menu toggle
+    var hamburger = document.querySelector('.hamburger');
+    var nav = document.getElementById('site-navigation');
+
+    if (hamburger) {
+        hamburger.addEventListener('click', function() {
+            nav.classList.toggle('menu-open');
+        });
+    }
+
+    // Detect if sidebar is missing or empty and add centering class
+    var sidebarLeft = document.querySelector('.page-standard .page-container .sidebar-left');
+    var pageContainer = document.querySelector('.page-standard .page-container');
+
+    if (pageContainer) {
+        if (!sidebarLeft || !sidebarLeft.querySelector('.sidebar') || !sidebarLeft.querySelector('.sidebar').hasChildNodes()) {
+            pageContainer.classList.add('no-sidebar');
+        }
+    }
+
     var iframes = document.querySelectorAll('.page-standard .page-container .content-right iframe');
     layoutIframes(iframes);
 
@@ -20,7 +40,7 @@ document.addEventListener("DOMContentLoaded", function(e) {
         layoutIframes();
     }
 
-    document.addEventListener("resize", function(e) {
+    window.addEventListener("resize", function(e) {
         layout();
     });
 
@@ -51,6 +71,20 @@ document.addEventListener("DOMContentLoaded", function(e) {
         }
     }
 
+    // Clone sidebar into hamburger menu for mobile
+    var sidebar = document.querySelector('.page-standard .page-container .sidebar-left .sidebar');
+
+    if (sidebar && nav) {
+        var sidebarMobile = document.createElement('div');
+        sidebarMobile.className = 'sidebar-mobile';
+        sidebarMobile.innerHTML = sidebar.innerHTML;
+        nav.appendChild(sidebarMobile);
+
+        // Bind menu toggle to mobile sidebar menu titles
+        var mobileMenus = sidebarMobile.querySelectorAll('li.menu-title');
+        bindMenus(mobileMenus);
+    }
+
     var didLike = false;
     bindLikeCounter();
 
diff --git a/content/static/style.css b/content/static/style.css
