diff --git a/examples.html b/examples.html
index c3d3737..7aec8b2 100644
--- a/examples.html
+++ b/examples.html
@@ -1,359 +1,385 @@
- Forge • Examples
-
-
-
-
-
-
-
-
-
-
-
-
+ });
+ }
+
+ function setupMobileMenu() {
+ const hamburger = document.querySelector('.hamburger');
+ const panel = document.querySelector('.panel');
+ const overlay = document.querySelector('.overlay');
+ const iframe = document.querySelector('.example-frame');
+ const codeButton = document.querySelector('.code-button');
+
+ const mobilePanel = document.createElement('div');
+ mobilePanel.classList.add('mobile-panel');
+
+ const copyLinks = () => {
+ mobilePanel.innerHTML = '';
+ const links = panel.querySelectorAll('.example-link');
+ links.forEach(link => {
+ const newLink = link.cloneNode(true);
+ if (link.classList.contains('active')) {
+ newLink.classList.add('active');
+ }
+ mobilePanel.appendChild(newLink);
+ });
+ };
+
+ copyLinks();
+
+ const observer = new MutationObserver(copyLinks);
+ observer.observe(panel, { childList: true });
+
+ document.body.appendChild(mobilePanel);
+
+ function closeMenu() {
+ mobilePanel.classList.remove('active');
+ overlay.classList.remove('active');
+ }
+
+ function openMenu() {
+ mobilePanel.classList.add('active');
+ overlay.classList.add('active');
+ }
+
+ hamburger.addEventListener('click', (e) => {
+ e.stopPropagation();
+ if (mobilePanel.classList.contains('active')) {
+ closeMenu();
+ } else {
+ openMenu();
+ }
+ });
+
+ overlay.addEventListener('click', closeMenu);
+
+ mobilePanel.querySelectorAll('.example-link').forEach(link => {
+ link.addEventListener('click', (e) => {
+ e.preventDefault();
+ const path = link.getAttribute('href').substring(1);
+
+ iframe.src = path;
+
+ document.querySelectorAll('.example-link').forEach(l => l.classList.remove('active'));
+ link.classList.add('active');
+
+ const example = link.getAttribute('data-source');
+ if (example) {
+ codeButton.href = example;
+ }
+
+ closeMenu();
+ });
+ });
+
+ mobilePanel.addEventListener('click', (e) => {
+ const link = e.target.closest('.example-link');
+
+ if (link) {
+ e.preventDefault();
+ const path = link.getAttribute('href');
+ iframe.src = path;
+
+ document.querySelectorAll('.example-link').forEach(l => l.classList.remove('active'));
+ link.classList.add('active');
+ panel.querySelector(`[href="${path}"]`)?.classList.add('active');
+
+ codeButton.href = `https://github.com/forge-gfx/forge/blob/main${path}`;
+ closeMenu();
+ }
+ });
+ }
+
+ document.addEventListener('DOMContentLoaded', () => {
+ loadExamples();
+ setupMobileMenu();
+ });
+
+
+
+
+
+
+
+
+
+
+
-
- EXAMPLES
- 
-
- EXAMPLES
-