From dc593816a78c165eb4f018152c034aa92070a7be Mon Sep 17 00:00:00 2001
From: lawsie <laura.sach@raspberrypi.org>
Date: Tue, 17 Mar 2026 15:43:06 +0000
Subject: [PATCH 1/7] Remove redundant code and fix link colour in about modal
 in contrast and dark theme

---
 index.html   | 499 +--------------------------------------------------
 main/menu.js | 365 +++++++++++++++++++++++++++++++++++++
 style.css    |   7 +
 3 files changed, 379 insertions(+), 492 deletions(-)
 create mode 100644 main/menu.js

diff --git a/index.html b/index.html
index e8ad94c1..af681677 100644
--- a/index.html
+++ b/index.html
@@ -436,373 +436,9 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
               </div>
             </div>
           </div>
-          <script>
-            const menuBtn = document.getElementById("menuBtn");
-            const menuDropdown = document.getElementById("menuDropdown");
-            const openAbout = document.getElementById("about-menu-item");
-             const hubMenuItem = document.getElementById("hub-menu-item");
-            const infoModal = document.getElementById("infoModal");
-            const closeInfoModal = document.getElementById("closeInfoModal");
+          <!-- Moved menu script to main/menu.js -->
+          <script src="main/menu.js" defer></script>
           
-
-            class AccessibleFlyoutMenu {
-                constructor() {
-                    this.menuButton = document.getElementById('menuBtn');
-                    this.menuDropdown = document.getElementById('menuDropdown');
-                    this.menuItems = this.menuDropdown.querySelectorAll('.menu-item');
-                    this.isMenuOpen = false;
-                    this.currentFocus = -1;
-                    this.currentOpenSubmenu = null;
-
-                    this.init();
-                }
-
-                init() {
-                    // Main menu button events
-                    this.menuButton.addEventListener('click', (e) => {
-                        e.preventDefault();
-                        this.toggleMainMenu();
-                    });
-
-                    this.menuButton.addEventListener('keydown', (e) => {
-                        if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
-                            this.openMainMenu();
-                            this.focusFirstMenuItem();
-                        }
-                    });
-
-                    // Menu item events
-                    this.menuItems.forEach((item, index) => {
-                        // Mouse events (preserve existing functionality)
-                        item.addEventListener('mouseenter', () => {
-                            this.handleMouseEnter(item);
-                        });
-
-                        item.addEventListener('mouseleave', () => {
-                            this.handleMouseLeave(item);
-                        });
-
-                        // Keyboard events
-                        item.addEventListener('keydown', (e) => {
-                            this.handleMenuItemKeydown(e, item, index);
-                        });
-
-                        item.addEventListener('click', (e) => {
-                            this.handleMenuItemClick(e, item);
-                        });
-
-                        // Submenu events
-                        const submenu = item.querySelector('.submenu');
-                        if (submenu) {
-                            const submenuItems = submenu.querySelectorAll('a');
-                            submenuItems.forEach((subItem, subIndex) => {
-                                subItem.addEventListener('keydown', (e) => {
-                                    this.handleSubmenuKeydown(e, subItem, submenuItems, subIndex, item);
-                                });
-
-                                subItem.addEventListener('click', (e) => {
-                                    console.log(`Clicked: ${subItem.textContent}`);
-                                    this.closeAllMenus();
-                                });
-                            });
-                        }
-                    });
-
-                    // Close menu when clicking outside
-                    document.addEventListener('click', (e) => {
-                        if (!this.menuButton.contains(e.target) && !this.menuDropdown.contains(e.target)) {
-                            this.closeAllMenus();
-                        }
-                    });
-
-                    // Close menu on Escape
-                    document.addEventListener('keydown', (e) => {
-                        if (e.key === 'Escape' && this.isMenuOpen) {
-                            this.closeAllMenus();
-                            this.menuButton.focus();
-                        }
-                    });
-                }
-
-                toggleMainMenu() {
-                    if (this.isMenuOpen) {
-                        this.closeAllMenus();
-                    } else {
-                        this.openMainMenu();
-                    }
-                }
-
-                openMainMenu() {
-                    this.isMenuOpen = true;
-                    this.menuDropdown.classList.remove('hidden');
-                    this.menuButton.setAttribute('aria-expanded', 'true');
-                    this.currentFocus = -1;
-                }
-
-                closeAllMenus() {
-                    this.isMenuOpen = false;
-                    this.menuDropdown.classList.add('hidden');
-                    this.menuButton.setAttribute('aria-expanded', 'false');
-                    this.closeAllSubmenus();
-                    this.currentFocus = -1;
-                }
-
-                closeAllSubmenus() {
-                    this.menuItems.forEach(item => {
-                        const submenu = item.querySelector('.submenu');
-                        if (submenu) {
-                            submenu.hidden = true;
-                            item.setAttribute('aria-expanded', 'false');
-                        }
-                    });
-                    this.currentOpenSubmenu = null;
-                }
-
-                focusFirstMenuItem() {
-                    this.currentFocus = 0;
-                    this.menuItems[0].focus();
-                }
-
-                focusMenuItem(index) {
-                    if (index >= 0 && index < this.menuItems.length) {
-                        this.currentFocus = index;
-                        this.menuItems[index].focus();
-                    }
-                }
-
-                handleMouseEnter(item) {
-                    // Close other submenus
-                    this.closeAllSubmenus();
-
-                    // Open this submenu if it has one
-                    const submenu = item.querySelector('.submenu');
-                    if (submenu) {
-                        submenu.hidden = false;
-                        item.setAttribute('aria-expanded', 'true');
-                        this.currentOpenSubmenu = item;
-                    }
-                }
-
-                handleMouseLeave(item) {
-                    // Keep submenu open for keyboard navigation
-                    // Only close on mouse leave from the entire menu area
-                }
-
-                handleMenuItemClick(e, item) {
-                    const submenu = item.querySelector('.submenu');
-                    if (submenu) {
-                        e.preventDefault();
-                        this.toggleSubmenu(item);
-                    } else {
-                        // For leaf menu items (like "About"), trigger the actual click event
-                        // This will fire any existing click handlers you have attached
-                        if (e.type === 'keydown') {
-                            // If this was triggered by keyboard, create a synthetic click event
-                            const clickEvent = new MouseEvent('click', {
-                                bubbles: true,
-                                cancelable: true
-                            });
-                            item.dispatchEvent(clickEvent);
-                        }
-                        this.closeAllMenus();
-                    }
-                }
-
-                toggleSubmenu(item) {
-                    const submenu = item.querySelector('.submenu');
-                    const isOpen = !submenu.hidden;
-
-                    this.closeAllSubmenus();
-
-                    if (!isOpen) {
-                        submenu.hidden = false;
-                        item.setAttribute('aria-expanded', 'true');
-                        this.currentOpenSubmenu = item;
-                    }
-                }
-
-                handleMenuItemKeydown(e, item, index) {
-                    const submenu = item.querySelector('.submenu');
-
-                    switch (e.key) {
-                        case 'ArrowDown':
-                            e.preventDefault();
-                            this.focusMenuItem((index + 1) % this.menuItems.length);
-                            break;
-
-                        case 'ArrowUp':
-                            e.preventDefault();
-                            this.focusMenuItem(index === 0 ? this.menuItems.length - 1 : index - 1);
-                            break;
-
-                        case 'ArrowRight':
-                            if (submenu) {
-                                e.preventDefault();
-                                this.showSubmenu(item);
-                                const firstSubmenuItem = submenu.querySelector('a');
-                                if (firstSubmenuItem) {
-                                    firstSubmenuItem.focus();
-                                }
-                            }
-                            break;
-
-                        case 'Enter':
-                        case ' ':
-                            e.preventDefault();
-                            this.handleMenuItemClick(e, item);
-                            break;
-
-                        case 'Escape':
-                            this.closeAllMenus();
-                            this.menuButton.focus();
-                            break;
-                    }
-                }
-
-                showSubmenu(item) {
-                    this.closeAllSubmenus();
-                    const submenu = item.querySelector('.submenu');
-                    if (submenu) {
-                        submenu.hidden = false;
-                        item.setAttribute('aria-expanded', 'true');
-                        this.currentOpenSubmenu = item;
-                    }
-                }
-
-                handleSubmenuKeydown(e, subItem, submenuItems, subIndex, parentItem) {
-                    switch (e.key) {
-                        case 'ArrowDown':
-                            e.preventDefault();
-                            e.stopPropagation();
-                            const nextIndex = (subIndex + 1) % submenuItems.length;
-                            submenuItems[nextIndex].focus();
-                            break;
-
-                        case 'ArrowUp':
-                            e.preventDefault();
-                            e.stopPropagation();
-                            const prevIndex = subIndex === 0 ? submenuItems.length - 1 : subIndex - 1;
-                            submenuItems[prevIndex].focus();
-                            break;
-
-                        case 'ArrowLeft':
-                            e.preventDefault();
-                            e.stopPropagation();
-                            parentItem.focus();
-                            const submenu = parentItem.querySelector('.submenu');
-                            if (submenu) {
-                                submenu.hidden = true;
-                                parentItem.setAttribute('aria-expanded', 'false');
-                            }
-                            break;
-
-                        case 'Enter':
-                        case ' ':
-                            e.preventDefault();
-                            e.stopPropagation();
-                            subItem.click();
-                            break;
-
-                        case 'Escape':
-                            e.preventDefault();
-                            e.stopPropagation();
-                            this.closeAllMenus();
-                            this.menuButton.focus();
-                            break;
-                    }
-                }
-            }
-
-            // Initialize the menu when DOM is loaded
-            document.addEventListener('DOMContentLoaded', () => {
-                new AccessibleFlyoutMenu();
-            });
-
-            // Handle keyboard navigation within dropdown
-            openAbout.addEventListener("keydown", (e) => {
-              if (e.key === "Escape") {
-                e.preventDefault();
-                menuDropdown.classList.add("hidden");
-                menuBtn.setAttribute("aria-expanded", "false");
-                menuBtn.focus();
-              } 
-            });
-
-            hubMenuItem.addEventListener("click", (e) => {
-              e.preventDefault();
-              window.open("https://hub.flockxr.com/", "_blank", "noopener,noreferrer");
-              menuDropdown.classList.add("hidden");
-              menuBtn.setAttribute("aria-expanded", "false");
-            });
-
-            // Language menu interactions are now handled in main/translation.js
-
-            // Open modal when About is clicked
-            openAbout.addEventListener("click", (e) => {
-              e.preventDefault();
-              previouslyFocused = document.activeElement;
-              infoModal.classList.remove("hidden");
-              menuDropdown.classList.add("hidden");
-              menuBtn.setAttribute("aria-expanded", "false");
-
-              // Focus the close button in the modal
-              setTimeout(() => closeInfoModal.focus(), 0);
-            });
-
-            // Close modal on close button
-            closeInfoModal.addEventListener("click", () => {
-              infoModal.classList.add("hidden");
-              if (previouslyFocused) {
-                previouslyFocused.focus();
-                previouslyFocused = null;
-              }
-            });
-
-            // Handle keyboard events for modal
-            infoModal.addEventListener("keydown", (e) => {
-              if (e.key === "Escape") {
-                e.preventDefault();
-                closeInfoModal.click();
-              } else if (e.key === "Tab") {
-                // Trap focus within modal
-                const focusableElements = infoModal.querySelectorAll(
-                  'button, input, select, textarea, [href], [tabindex]:not([tabindex="-1"])'
-                );
-                const firstElement = focusableElements[0];
-                const lastElement = focusableElements[focusableElements.length - 1];
-
-                if (e.shiftKey && document.activeElement === firstElement) {
-                  e.preventDefault();
-                  lastElement.focus();
-                } else if (!e.shiftKey && document.activeElement === lastElement) {
-                  e.preventDefault();
-                  firstElement.focus();
-                }
-              }
-            });
-
-            // Close menu when clicking outside
-            window.addEventListener("click", (e) => {
-              if (!menuBtn.contains(e.target) && !menuDropdown.contains(e.target)) {
-                menuDropdown.classList.add("hidden");
-                menuBtn.setAttribute("aria-expanded", "false");
-              }
-
-              if (e.target === infoModal) {
-                closeInfoModal.click();
-              }
-            });
-
-            // Close menu on Escape key
-            document.addEventListener("keydown", (e) => {
-              if (e.key === "Escape" && !menuDropdown.classList.contains("hidden")) {
-                menuDropdown.classList.add("hidden");
-                menuBtn.setAttribute("aria-expanded", "false");
-                menuBtn.focus();
-              }
-            });
-          </script>
           <button class="bigbutton" id="runCodeButton" data-i18n="run_code_button" title="Run your code" aria-label="Run your code">
             <div class="icon" aria-hidden="true">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24">
@@ -987,14 +623,7 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
                 title="Add shapes and models"
                 aria-expanded="false"
                 aria-haspopup="true"
-              >
-                <!-- <img
-                  src="./images/add.svg"
-                  width="20px"
-                  height="20px"
-                  alt="Add"
-                  onerror="this.style.display='none'; this.parentNode.textContent='+';"
-                /> -->
+              >         
                 <?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.875px" height="122.648px" viewBox="0 0 122.875 122.648" enable-background="new 0 0 122.875 122.648" xml:space="preserve"><g><path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M108.993,47.079c7.683-0.059,13.898,6.12,13.882,13.805 c-0.018,7.683-6.26,13.959-13.942,14.019L75.24,75.138l-0.235,33.73c-0.063,7.619-6.338,13.789-14.014,13.78 c-7.678-0.01-13.848-6.197-13.785-13.818l0.233-33.497l-33.558,0.235C6.2,75.628-0.016,69.448,0,61.764 c0.018-7.683,6.261-13.959,13.943-14.018l33.692-0.236l0.236-33.73C47.935,6.161,54.209-0.009,61.885,0 c7.678,0.009,13.848,6.197,13.784,13.818l-0.233,33.497L108.993,47.079L108.993,47.079z"/></g></svg>
               </button>
 
@@ -1096,132 +725,32 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
                 </div>
               </span>
             </div>
-            <button class="gizmo-button" id="colorPickerButton" data-i18n="color_picker_button" aria-label="Choose a color" title="Choose a color">
-              <!-- <img
-                src="./images/looks.svg"
-                width="20px"
-                height="20px"
-                alt="Color"
-                onerror="this.style.display='none'; this.parentNode.textContent='🎨';"
-              /> -->
+            <button class="gizmo-button" id="colorPickerButton" data-i18n="color_picker_button" aria-label="Choose a color" title="Choose a color">      
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3L344 320c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM288 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>
             </button>
             <button class="gizmo-button" id="positionButton" data-i18n="position_button" disabled aria-label="Position mesh" title="Position mesh">
-              <!-- <img
-                src="./images/position.svg"
-                width="20px"
-                height="20px"
-                alt="Position"
-                onerror="this.style.display='none'; this.parentNode.textContent='⌖';"
-              /> -->
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l32 0 0 96-96 0 0-32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6l0-32 96 0 0 96-32 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8l-32 0 0-96 96 0 0 32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 32-96 0 0-96 32 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-64-64z"/></svg>
             </button>
             <button class="gizmo-button" id="rotationButton" data-i18n="rotation_button" disabled aria-label="Rotate mesh" title="Rotate mesh">
-              <!-- <img
-                src="./images/rotate.svg"
-                width="20px"
-                height="20px"
-                alt="Rotate"
-                onerror="this.style.display='none'; this.parentNode.textContent='↻';"
-              /> -->
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M142.9 142.9c-17.5 17.5-30.1 38-37.8 59.8c-5.9 16.7-24.2 25.4-40.8 19.5s-25.4-24.2-19.5-40.8C55.6 150.7 73.2 122 97.6 97.6c87.2-87.2 228.3-87.5 315.8-1L455 55c6.9-6.9 17.2-8.9 26.2-5.2s14.8 12.5 14.8 22.2l0 128c0 13.3-10.7 24-24 24l-8.4 0c0 0 0 0 0 0L344 224c-9.7 0-18.5-5.8-22.2-14.8s-1.7-19.3 5.2-26.2l41.1-41.1c-62.6-61.5-163.1-61.2-225.3 1zM16 312c0-13.3 10.7-24 24-24l7.6 0 .7 0L168 288c9.7 0 18.5 5.8 22.2 14.8s1.7 19.3-5.2 26.2l-41.1 41.1c62.6 61.5 163.1 61.2 225.3-1c17.5-17.5 30.1-38 37.8-59.8c5.9-16.7 24.2-25.4 40.8-19.5s25.4 24.2 19.5 40.8c-10.8 30.6-28.4 59.3-52.9 83.8c-87.2 87.2-228.3 87.5-315.8 1L57 457c-6.9 6.9-17.2 8.9-26.2 5.2S16 449.7 16 440l0-119.6 0-.7 0-7.6z"/></svg>
             </button>
             <button class="gizmo-button" id="scaleButton" data-i18n="scale_button" disabled aria-label="Scale mesh size" title="Scale mesh size">
-              <!-- <img
-                src="./images/scale.svg"                              c
-                width="20px"
-                height="20px"
-                alt="Scale"
-                onerror="this.style.display='none'; this.parentNode.textContent='⚏';"
-              /> -->
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>
+            </button>           
             </button>
-            <!--button class="gizmo-button" id="boundsButton" disabled>
-              <img
-                src="images/bounds.svg"
-                width="20px"
-                height="20px"
-                alt="bounds"
-              />
-          </button-->
-            <!--button class="gizmo-button" id="focusButton" disabled>
-              <img
-                src="images/focus.svg"
-                width="20px"
-                height="20px"
-                alt="focus"
-              /-->
-            </button>
-            <button class="gizmo-button" id="hideButton" data-i18n="hide_button" disabled aria-label="Select object" title="Select object">
-              <!-- <img
-                src="./images/pointer.svg"
-                width="20px"
-                height="20px"
-                alt="Select"
-                onerror="this.style.display='none'; this.parentNode.textContent='👆';"
-              /> -->
+            <button class="gizmo-button" id="hideButton" data-i18n="hide_button" disabled aria-label="Select object" title="Select object">             
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M0 55.2L0 426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320l118.1 0c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"/></svg>
             </button>
             <button class="gizmo-button" id="duplicateButton" data-i18n="duplicate_button" disabled aria-label="Duplicate mesh" title="Duplicate selected mesh">
-              <!-- <img
-                src="./images/duplicate.svg"
-                width="20px"
-                height="20px"
-                alt="Duplicate"
-                onerror="this.style.display='none'; this.parentNode.textContent='⧉';"
-              /> -->
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/></svg>
             </button>
             <button class="gizmo-button" id="deleteButton" data-i18n="delete_button" disabled aria-label="Delete mesh" title="Delete selected mesh">
-              <!-- <img
-                src="./images/delete.svg"
-                width="20px"
-                height="20px"
-                alt="Delete"
-                onerror="this.style.display='none'; this.parentNode.textContent='🗑';"
-              /> -->
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>
             </button>
             <button class="gizmo-button" id="cameraButton" data-i18n="camera_button" disabled aria-label="Camera controls" title="Camera controls">
-              <!-- <img
-                src="./images/camera2.svg"
-                width="20px"
-                height="20px"
-                alt="Camera"
-                onerror="this.style.display='none'; this.parentNode.textContent='📷';"
-              /> -->
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M0 128C0 92.7 28.7 64 64 64l256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2l0 256c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1l0-17.1 0-128 0-17.1 14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"/></svg>
             </button>
           </aside>
-
-          <!---
-
-            <button class="gizmo-button" id="cutButton" disabled>
-              <img
-                src="images/cut.svg"
-                width="20px"
-                height="20px"
-                alt="cut"
-              />
-            </button>
-            <button class="gizmo-button" id="copyButton" disabled>
-              <img
-                src="images/copy.svg"
-                width="20px"
-                height="20px"
-                alt="copy"
-              />
-            </button>
-            <button class="gizmo-button" id="pasteButton" disabled>
-              <img
-                src="images/paste.svg"
-                width="20px"
-                height="20px"
-                alt="paste"
-              />
-            </button>
-          -->
-
           <!-- Info panel collapse starts -->
 
           <aside id="info-panel" role="complementary" aria-label="Information panel">
@@ -1295,21 +824,7 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
           </footer>
         </section>
            <div class="resizer" id="resizer" aria-label="Drag to resize panels" role="separator" aria-orientation="vertical" tabindex="0"></div>
-        <section id="codePanel" aria-label="Code editor panel">
-          <!--button
-            value="Toolbox"
-            id="toolboxControl"
-            style="
-              z-index: 100000;
-              font-size: 16px;
-              border: none;
-              padding: 10px;
-              background-color: rgba(255, 101, 80, 0.45);
-              box-sizing: border-box;
-            "
-          >
-            <strong>+ Code</strong>
-        </button-->
+        <section id="codePanel" aria-label="Code editor panel">          
           <div id="blocklyDiv" role="application" aria-label="Visual programming workspace" aria-describedby="blockly-desc" tabindex="0"></div>
           <div id="blockly-desc" class="sr-only">Drag and drop code blocks to create your program. Use arrow keys and Enter to navigate and interact with blocks.</div>
         </section>
diff --git a/main/menu.js b/main/menu.js
new file mode 100644
index 00000000..70ff91ab
--- /dev/null
+++ b/main/menu.js
@@ -0,0 +1,365 @@
+const menuBtn = document.getElementById("menuBtn");
+const menuDropdown = document.getElementById("menuDropdown");
+const openAbout = document.getElementById("about-menu-item");
+const hubMenuItem = document.getElementById("hub-menu-item");
+const infoModal = document.getElementById("infoModal");
+const closeInfoModal = document.getElementById("closeInfoModal");
+
+
+class AccessibleFlyoutMenu {
+    constructor() {
+        this.menuButton = document.getElementById('menuBtn');
+        this.menuDropdown = document.getElementById('menuDropdown');
+        this.menuItems = this.menuDropdown.querySelectorAll('.menu-item');
+        this.isMenuOpen = false;
+        this.currentFocus = -1;
+        this.currentOpenSubmenu = null;
+
+        this.init();
+    }
+
+    init() {
+        // Main menu button events
+        this.menuButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.toggleMainMenu();
+        });
+
+        this.menuButton.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.openMainMenu();
+                this.focusFirstMenuItem();
+            }
+        });
+
+        // Menu item events
+        this.menuItems.forEach((item, index) => {
+            // Mouse events (preserve existing functionality)
+            item.addEventListener('mouseenter', () => {
+                this.handleMouseEnter(item);
+            });
+
+            item.addEventListener('mouseleave', () => {
+                this.handleMouseLeave(item);
+            });
+
+            // Keyboard events
+            item.addEventListener('keydown', (e) => {
+                this.handleMenuItemKeydown(e, item, index);
+            });
+
+            item.addEventListener('click', (e) => {
+                this.handleMenuItemClick(e, item);
+            });
+
+            // Submenu events
+            const submenu = item.querySelector('.submenu');
+            if (submenu) {
+                const submenuItems = submenu.querySelectorAll('a');
+                submenuItems.forEach((subItem, subIndex) => {
+                    subItem.addEventListener('keydown', (e) => {
+                        this.handleSubmenuKeydown(e, subItem, submenuItems, subIndex, item);
+                    });
+
+                    subItem.addEventListener('click', (e) => {
+                        console.log(`Clicked: ${subItem.textContent}`);
+                        this.closeAllMenus();
+                    });
+                });
+            }
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!this.menuButton.contains(e.target) && !this.menuDropdown.contains(e.target)) {
+                this.closeAllMenus();
+            }
+        });
+
+        // Close menu on Escape
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && this.isMenuOpen) {
+                this.closeAllMenus();
+                this.menuButton.focus();
+            }
+        });
+    }
+
+    toggleMainMenu() {
+        if (this.isMenuOpen) {
+            this.closeAllMenus();
+        } else {
+            this.openMainMenu();
+        }
+    }
+
+    openMainMenu() {
+        this.isMenuOpen = true;
+        this.menuDropdown.classList.remove('hidden');
+        this.menuButton.setAttribute('aria-expanded', 'true');
+        this.currentFocus = -1;
+    }
+
+    closeAllMenus() {
+        this.isMenuOpen = false;
+        this.menuDropdown.classList.add('hidden');
+        this.menuButton.setAttribute('aria-expanded', 'false');
+        this.closeAllSubmenus();
+        this.currentFocus = -1;
+    }
+
+    closeAllSubmenus() {
+        this.menuItems.forEach(item => {
+            const submenu = item.querySelector('.submenu');
+            if (submenu) {
+                submenu.hidden = true;
+                item.setAttribute('aria-expanded', 'false');
+            }
+        });
+        this.currentOpenSubmenu = null;
+    }
+
+    focusFirstMenuItem() {
+        this.currentFocus = 0;
+        this.menuItems[0].focus();
+    }
+
+    focusMenuItem(index) {
+        if (index >= 0 && index < this.menuItems.length) {
+            this.currentFocus = index;
+            this.menuItems[index].focus();
+        }
+    }
+
+    handleMouseEnter(item) {
+        // Close other submenus
+        this.closeAllSubmenus();
+
+        // Open this submenu if it has one
+        const submenu = item.querySelector('.submenu');
+        if (submenu) {
+            submenu.hidden = false;
+            item.setAttribute('aria-expanded', 'true');
+            this.currentOpenSubmenu = item;
+        }
+    }
+
+    handleMouseLeave(item) {
+        // Keep submenu open for keyboard navigation
+        // Only close on mouse leave from the entire menu area
+    }
+
+    handleMenuItemClick(e, item) {
+        const submenu = item.querySelector('.submenu');
+        if (submenu) {
+            e.preventDefault();
+            this.toggleSubmenu(item);
+        } else {
+            // For leaf menu items (like "About"), trigger the actual click event
+            // This will fire any existing click handlers you have attached
+            if (e.type === 'keydown') {
+                // If this was triggered by keyboard, create a synthetic click event
+                const clickEvent = new MouseEvent('click', {
+                    bubbles: true,
+                    cancelable: true
+                });
+                item.dispatchEvent(clickEvent);
+            }
+            this.closeAllMenus();
+        }
+    }
+
+    toggleSubmenu(item) {
+        const submenu = item.querySelector('.submenu');
+        const isOpen = !submenu.hidden;
+
+        this.closeAllSubmenus();
+
+        if (!isOpen) {
+            submenu.hidden = false;
+            item.setAttribute('aria-expanded', 'true');
+            this.currentOpenSubmenu = item;
+        }
+    }
+
+    handleMenuItemKeydown(e, item, index) {
+        const submenu = item.querySelector('.submenu');
+
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.focusMenuItem((index + 1) % this.menuItems.length);
+                break;
+
+            case 'ArrowUp':
+                e.preventDefault();
+                this.focusMenuItem(index === 0 ? this.menuItems.length - 1 : index - 1);
+                break;
+
+            case 'ArrowRight':
+                if (submenu) {
+                    e.preventDefault();
+                    this.showSubmenu(item);
+                    const firstSubmenuItem = submenu.querySelector('a');
+                    if (firstSubmenuItem) {
+                        firstSubmenuItem.focus();
+                    }
+                }
+                break;
+
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                this.handleMenuItemClick(e, item);
+                break;
+
+            case 'Escape':
+                this.closeAllMenus();
+                this.menuButton.focus();
+                break;
+        }
+    }
+
+    showSubmenu(item) {
+        this.closeAllSubmenus();
+        const submenu = item.querySelector('.submenu');
+        if (submenu) {
+            submenu.hidden = false;
+            item.setAttribute('aria-expanded', 'true');
+            this.currentOpenSubmenu = item;
+        }
+    }
+
+    handleSubmenuKeydown(e, subItem, submenuItems, subIndex, parentItem) {
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                e.stopPropagation();
+                const nextIndex = (subIndex + 1) % submenuItems.length;
+                submenuItems[nextIndex].focus();
+                break;
+
+            case 'ArrowUp':
+                e.preventDefault();
+                e.stopPropagation();
+                const prevIndex = subIndex === 0 ? submenuItems.length - 1 : subIndex - 1;
+                submenuItems[prevIndex].focus();
+                break;
+
+            case 'ArrowLeft':
+                e.preventDefault();
+                e.stopPropagation();
+                parentItem.focus();
+                const submenu = parentItem.querySelector('.submenu');
+                if (submenu) {
+                    submenu.hidden = true;
+                    parentItem.setAttribute('aria-expanded', 'false');
+                }
+                break;
+
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                e.stopPropagation();
+                subItem.click();
+                break;
+
+            case 'Escape':
+                e.preventDefault();
+                e.stopPropagation();
+                this.closeAllMenus();
+                this.menuButton.focus();
+                break;
+        }
+    }
+}
+
+// Initialize the menu when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new AccessibleFlyoutMenu();
+});
+
+// Handle keyboard navigation within dropdown
+openAbout.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+    e.preventDefault();
+    menuDropdown.classList.add("hidden");
+    menuBtn.setAttribute("aria-expanded", "false");
+    menuBtn.focus();
+    } 
+});
+
+hubMenuItem.addEventListener("click", (e) => {
+    e.preventDefault();
+    window.open("https://hub.flockxr.com/", "_blank", "noopener,noreferrer");
+    menuDropdown.classList.add("hidden");
+    menuBtn.setAttribute("aria-expanded", "false");
+});
+
+// Language menu interactions are now handled in main/translation.js
+
+// Open modal when About is clicked
+openAbout.addEventListener("click", (e) => {
+    e.preventDefault();
+    previouslyFocused = document.activeElement;
+    infoModal.classList.remove("hidden");
+    menuDropdown.classList.add("hidden");
+    menuBtn.setAttribute("aria-expanded", "false");
+
+    // Focus the close button in the modal
+    setTimeout(() => closeInfoModal.focus(), 0);
+});
+
+// Close modal on close button
+closeInfoModal.addEventListener("click", () => {
+    infoModal.classList.add("hidden");
+    if (previouslyFocused) {
+    previouslyFocused.focus();
+    previouslyFocused = null;
+    }
+});
+
+// Handle keyboard events for modal
+infoModal.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+    e.preventDefault();
+    closeInfoModal.click();
+    } else if (e.key === "Tab") {
+    // Trap focus within modal
+    const focusableElements = infoModal.querySelectorAll(
+        'button, input, select, textarea, [href], [tabindex]:not([tabindex="-1"])'
+    );
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+    } else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+    }
+    }
+});
+
+// Close menu when clicking outside
+window.addEventListener("click", (e) => {
+    if (!menuBtn.contains(e.target) && !menuDropdown.contains(e.target)) {
+    menuDropdown.classList.add("hidden");
+    menuBtn.setAttribute("aria-expanded", "false");
+    }
+
+    if (e.target === infoModal) {
+    closeInfoModal.click();
+    }
+});
+
+// Close menu on Escape key
+document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && !menuDropdown.classList.contains("hidden")) {
+    menuDropdown.classList.add("hidden");
+    menuBtn.setAttribute("aria-expanded", "false");
+    menuBtn.focus();
+    }
+});
diff --git a/style.css b/style.css
index b7767e33..3e9a6f0b 100644
--- a/style.css
+++ b/style.css
@@ -566,6 +566,13 @@ button {
   color: #ffffff !important;
 }
 
+/* Make links in 'About' modal visible in dark and contrast themes */
+[data-theme="dark"] .modal-content a,
+[data-theme="dark-contrast"] .modal-content a,
+[data-theme="contrast"] .modal-content a {
+  color: var(--color-primary-light);
+}
+
 /* Shape Menu */
 #shape-menu {
   position: relative;

From e266ccadbd7b48420a570895e5f932ab8e68df00 Mon Sep 17 00:00:00 2001
From: lawsie <laura.sach@raspberrypi.org>
Date: Tue, 17 Mar 2026 16:25:49 +0000
Subject: [PATCH 2/7] Fix issue where pressing escape didn't close the menu

---
 index.html   | 15 ++++-----------
 main/menu.js | 36 ++++++++++--------------------------
 style.css    |  7 +++++++
 3 files changed, 21 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index af681677..12a49fd5 100644
--- a/index.html
+++ b/index.html
@@ -438,7 +438,7 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
           </div>
           <!-- Moved menu script to main/menu.js -->
           <script src="main/menu.js" defer></script>
-          
+
           <button class="bigbutton" id="runCodeButton" data-i18n="run_code_button" title="Run your code" aria-label="Run your code">
             <div class="icon" aria-hidden="true">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24">
@@ -466,8 +466,7 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
             id="openButton"
             data-i18n="open_button"
             title="Open a project from a file on your computer"
-            aria-label="Open a project from a file on your computer"
-            tabindex="0"
+            aria-label="Open a project from a file on your computer"          
           >
             <label for="fileInput" class="sr-only" data-i18n="open_file_input_label">Select project file to open</label>
             <input type="file" id="fileInput" style="display: none" disabled />
@@ -477,13 +476,7 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
           </button>
           <label for="projectName" class="sr-only">Project name</label>
           <input
-            type="text"
-            style="
-              flex-shrink: 1;
-              width: 100%;
-              min-width: 10px;
-              max-width: 80px;
-            "
+            type="text"           
             id="projectName"
             data-i18n="project_name"
             placeholder="Project name"
@@ -624,7 +617,7 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
                 aria-expanded="false"
                 aria-haspopup="true"
               >         
-                <?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.875px" height="122.648px" viewBox="0 0 122.875 122.648" enable-background="new 0 0 122.875 122.648" xml:space="preserve"><g><path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M108.993,47.079c7.683-0.059,13.898,6.12,13.882,13.805 c-0.018,7.683-6.26,13.959-13.942,14.019L75.24,75.138l-0.235,33.73c-0.063,7.619-6.338,13.789-14.014,13.78 c-7.678-0.01-13.848-6.197-13.785-13.818l0.233-33.497l-33.558,0.235C6.2,75.628-0.016,69.448,0,61.764 c0.018-7.683,6.261-13.959,13.943-14.018l33.692-0.236l0.236-33.73C47.935,6.161,54.209-0.009,61.885,0 c7.678,0.009,13.848,6.197,13.784,13.818l-0.233,33.497L108.993,47.079L108.993,47.079z"/></g></svg>
+                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.875px" height="122.648px" viewBox="0 0 122.875 122.648" enable-background="new 0 0 122.875 122.648" xml:space="preserve"><g><path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M108.993,47.079c7.683-0.059,13.898,6.12,13.882,13.805 c-0.018,7.683-6.26,13.959-13.942,14.019L75.24,75.138l-0.235,33.73c-0.063,7.619-6.338,13.789-14.014,13.78 c-7.678-0.01-13.848-6.197-13.785-13.818l0.233-33.497l-33.558,0.235C6.2,75.628-0.016,69.448,0,61.764 c0.018-7.683,6.261-13.959,13.943-14.018l33.692-0.236l0.236-33.73C47.935,6.161,54.209-0.009,61.885,0 c7.678,0.009,13.848,6.197,13.784,13.818l-0.233,33.497L108.993,47.079L108.993,47.079z"/></g></svg>
               </button>
 
               <!-- Dropdown for shapes and models -->
diff --git a/main/menu.js b/main/menu.js
index 70ff91ab..6f99e13a 100644
--- a/main/menu.js
+++ b/main/menu.js
@@ -1,9 +1,11 @@
+console.log("Menu script loaded");
 const menuBtn = document.getElementById("menuBtn");
 const menuDropdown = document.getElementById("menuDropdown");
 const openAbout = document.getElementById("about-menu-item");
 const hubMenuItem = document.getElementById("hub-menu-item");
 const infoModal = document.getElementById("infoModal");
 const closeInfoModal = document.getElementById("closeInfoModal");
+let previouslyFocused = null;
 
 
 class AccessibleFlyoutMenu {
@@ -78,12 +80,12 @@ class AccessibleFlyoutMenu {
         });
 
         // Close menu on Escape
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && this.isMenuOpen) {
+        window.addEventListener('keydown', (e) => {                      
+            if (e.key === 'Escape' && this.isMenuOpen) {                            
                 this.closeAllMenus();
-                this.menuButton.focus();
+                this.menuButton.focus();                
             }
-        });
+        }, true); // Fire before blockly handles escape
     }
 
     toggleMainMenu() {
@@ -276,18 +278,9 @@ class AccessibleFlyoutMenu {
 }
 
 // Initialize the menu when DOM is loaded
+let menuFlyout;
 document.addEventListener('DOMContentLoaded', () => {
-    new AccessibleFlyoutMenu();
-});
-
-// Handle keyboard navigation within dropdown
-openAbout.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") {
-    e.preventDefault();
-    menuDropdown.classList.add("hidden");
-    menuBtn.setAttribute("aria-expanded", "false");
-    menuBtn.focus();
-    } 
+    menuFlyout = new AccessibleFlyoutMenu();
 });
 
 hubMenuItem.addEventListener("click", (e) => {
@@ -346,20 +339,11 @@ infoModal.addEventListener("keydown", (e) => {
 // Close menu when clicking outside
 window.addEventListener("click", (e) => {
     if (!menuBtn.contains(e.target) && !menuDropdown.contains(e.target)) {
-    menuDropdown.classList.add("hidden");
-    menuBtn.setAttribute("aria-expanded", "false");
+        menuFlyout.closeAllMenus();
     }
 
     if (e.target === infoModal) {
-    closeInfoModal.click();
+        closeInfoModal.click();
     }
 });
 
-// Close menu on Escape key
-document.addEventListener("keydown", (e) => {
-    if (e.key === "Escape" && !menuDropdown.classList.contains("hidden")) {
-    menuDropdown.classList.add("hidden");
-    menuBtn.setAttribute("aria-expanded", "false");
-    menuBtn.focus();
-    }
-});
diff --git a/style.css b/style.css
index 3e9a6f0b..54cee4c7 100644
--- a/style.css
+++ b/style.css
@@ -1160,6 +1160,13 @@ body.color-picker-open #renderCanvas {
   margin-right: 10px;
 }
 
+#projectName {
+  flex-shrink: 1;
+  width: 100%;
+  min-width: 10px;
+  max-width: 80px;
+}
+
 .menu-item, #menuDropdown [role="menuitem"] {
   display: flex !important;
   align-items: center;

From 6dadded87d56205f544cc659328e2e6f81a6075c Mon Sep 17 00:00:00 2001
From: lawsie <laura.sach@raspberrypi.org>
Date: Tue, 17 Mar 2026 16:54:15 +0000
Subject: [PATCH 3/7] Force svgs to use brand color variable, not hard coded
 colour

---
 index.html   | 29 ++++++++++++++---------------
 main/menu.js |  7 ++-----
 style.css    |  5 +++++
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 12a49fd5..cc591ab3 100644
--- a/index.html
+++ b/index.html
@@ -36,6 +36,7 @@
       });
     </script>
 
+    <!-- Duplicate CSS to prevent flash of unstyled content on load, rest of styles in style.css -->
     <link rel="stylesheet" href="style.css" />
     <style>
       .sr-only {
@@ -205,7 +206,7 @@
         <img src="images/flock-bird-mascot.svg" alt="Flock XR Bird mascot" class="loading-bird" width="120" height="120" />
         <img src="images/inline-flock-xr.svg" alt="Flock XR Logo" class="loading-logo"/>
         <div class="loading-spinner" role="img" aria-label="Loading animation"></div>
-        <h1 id="loading-title" class="sr-only" data-i18n="loading_title">Loading Flock XR</h1>
+        <h2 id="loading-title" class="sr-only" data-i18n="loading_title">Loading Flock XR</h2>
         <p id="loading-description" data-i18n="loading" class="loading-text" aria-live="polite">Loading Flock XR...</p>
       </div>
     </div>
@@ -239,8 +240,8 @@ <h1 class="sr-only">FlockXR</h1>
               >
                   <span class="sr-only" data-i18n="menu_button_sr_label">Menu</span>
                   <div class="icon" style="width: 1.25em; height: 1.25em" aria-hidden="true">
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#511D91">
-                          <path fill="#511D91" d="M0 96C0 78.3 14.3 64 32 64h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zm0 160c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm448 160c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h384c17.7 0 32-14.3 32 32z"/>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
+                          <path fill="currentColor" d="M0 96C0 78.3 14.3 64 32 64h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zm0 160c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm448 160c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h384c17.7 0 32-14.3 32 32z"/>
                       </svg>
                   </div>
               </button>
@@ -407,16 +408,14 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
                       viewBox="0 0 512 512"
                     >
                       <path
-                        fill="#511D91"
+                        fill="currentColor"
                         d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"
                       />
                     </svg>
                   </div>
                 </div>
                 <span data-i18n="about_run_action"></span>
-              </div>
-              <p>      
-              </p>
+              </div>             
               <p>
                 <span data-i18n="about_links_privacy_prefix"></span>
                 <a
@@ -441,10 +440,10 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
 
           <button class="bigbutton" id="runCodeButton" data-i18n="run_code_button" title="Run your code" aria-label="Run your code">
             <div class="icon" aria-hidden="true">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                 <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                 <path
-                  fill="#511D91"
+                  fill="currentColor"
                   d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"
                 />
               </svg>
@@ -452,10 +451,10 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
           </button>
           <button class="bigbutton" id="stopCodeButton" data-i18n="stop_code_button" title="Stop your code" aria-label="Stop your code">
             <div class="icon" aria-hidden="true">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                 <!--!Font Awesome Free 6.7.2  by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                 <path
-                  fill="#511D91"
+                  fill="currentColor"
                   d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM192 160l128 0c17.7 0 32 14.3 32 32l0 128c0 17.7-14.3 32-32 32l-128 0c-17.7 0-32-14.3-32-32l0-128c0-17.7 14.3-32 32-32z"
                 />
               </svg>
@@ -471,7 +470,7 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
             <label for="fileInput" class="sr-only" data-i18n="open_file_input_label">Select project file to open</label>
             <input type="file" id="fileInput" style="display: none" disabled />
             <div class="icon" style="width: 1.25em; height: 1.25em" aria-hidden="true">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#511D91" d="M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>
             </div>
           </button>
           <label for="projectName" class="sr-only">Project name</label>
@@ -556,7 +555,7 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                 <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                 <path
-                  fill="#511D91"
+                  fill="currentColor"
                   d="M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6l96 0 32 0 208 0c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"
                 />
               </svg>
@@ -568,7 +567,7 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
                 <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                 <path
-                  fill="#511D91"
+                  fill="currentColor"
                   d="M192 64C86 64 0 150 0 256S86 448 192 448l256 0c106 0 192-86 192-192s-86-192-192-192L192 64zM496 168a40 40 0 1 1 0 80 40 40 0 1 1 0-80zM392 304a40 40 0 1 1 80 0 40 40 0 1 1 -80 0zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24l0 32 32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0 0 32c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-32-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l32 0 0-32z"
                 />
               </svg>
@@ -587,7 +586,7 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                 <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                 <path
-                  fill="#511D91"
+                  fill="currentColor"
                   d="M200 32L56 32C42.7 32 32 42.7 32 56l0 144c0 9.7 5.8 18.5 14.8 22.2s19.3 1.7 26.2-5.2l40-40 79 79-79 79L73 295c-6.9-6.9-17.2-8.9-26.2-5.2S32 302.3 32 312l0 144c0 13.3 10.7 24 24 24l144 0c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2l-40-40 79-79 79 79-40 40c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l144 0c13.3 0 24-10.7 24-24l0-144c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2l-40 40-79-79 79-79 40 40c6.9 6.9 17.2 8.9 26.2 5.2s14.8-12.5 14.8-22.2l0-144c0-13.3-10.7-24-24-24L312 32c-9.7 0-18.5 5.8-22.2 14.8s-1.7 19.3 5.2 26.2l40 40-79 79-79-79 40-40c6.9-6.9 8.9-17.2 5.2-26.2S209.7 32 200 32z"
                 />
               </svg>
diff --git a/main/menu.js b/main/menu.js
index 6f99e13a..80181d6f 100644
--- a/main/menu.js
+++ b/main/menu.js
@@ -1,4 +1,3 @@
-console.log("Menu script loaded");
 const menuBtn = document.getElementById("menuBtn");
 const menuDropdown = document.getElementById("menuDropdown");
 const openAbout = document.getElementById("about-menu-item");
@@ -64,8 +63,7 @@ class AccessibleFlyoutMenu {
                         this.handleSubmenuKeydown(e, subItem, submenuItems, subIndex, item);
                     });
 
-                    subItem.addEventListener('click', (e) => {
-                        console.log(`Clicked: ${subItem.textContent}`);
+                    subItem.addEventListener('click', (e) => {                        
                         this.closeAllMenus();
                     });
                 });
@@ -286,8 +284,7 @@ document.addEventListener('DOMContentLoaded', () => {
 hubMenuItem.addEventListener("click", (e) => {
     e.preventDefault();
     window.open("https://hub.flockxr.com/", "_blank", "noopener,noreferrer");
-    menuDropdown.classList.add("hidden");
-    menuBtn.setAttribute("aria-expanded", "false");
+    menuFlyout.closeAllMenus();
 });
 
 // Language menu interactions are now handled in main/translation.js
diff --git a/style.css b/style.css
index 54cee4c7..b47929b8 100644
--- a/style.css
+++ b/style.css
@@ -1123,6 +1123,11 @@ body.color-picker-open #renderCanvas {
   margin-bottom: 10px;
 }
 
+/* Add an icon colour, so that svgs don't have a hardcoded fill colour */
+.icon {
+  color: var(--color-text-brand);
+}
+
 .bigbutton .icon {
   display: flex;
   align-items: center;

From 588830af9658df2689f5037d3cb15451ca1c6c30 Mon Sep 17 00:00:00 2001
From: lawsie <laura.sach@raspberrypi.org>
Date: Wed, 18 Mar 2026 09:19:32 +0000
Subject: [PATCH 4/7] Make sure icons use currentColor not !important

---
 index.html |  2 +-
 style.css  | 12 ------------
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/index.html b/index.html
index cc591ab3..ce4a9357 100644
--- a/index.html
+++ b/index.html
@@ -494,7 +494,7 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                 <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                 <path
-                fill = "#511D91"
+                fill = "currentColor"
                 d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"
                 />
               </svg>
diff --git a/style.css b/style.css
index b47929b8..52220ff1 100644
--- a/style.css
+++ b/style.css
@@ -546,18 +546,6 @@ button {
   filter: none; /* light mode: normal */
 }
 
-[data-theme="dark"] .icon path {
-  fill: #bababa !important;
-}
-
-[data-theme="dark-contrast"] .icon path {
-  fill: #cdcdcd !important;
-}
-
-[data-theme="contrast"] .icon path {
-  fill: #ffffff !important;
-}
-
 [data-theme="contrast"] .gizmo-button img {
   color: #ffffff !important;
 }

From 100646daa9c4acba6b4d28de1dbc047a407619cb Mon Sep 17 00:00:00 2001
From: Lawsie <5183697+lawsie@users.noreply.github.com>
Date: Wed, 18 Mar 2026 09:35:37 +0000
Subject: [PATCH 5/7] Make icons in the gizmo panel use the currentColor too

---
 index.html | 19 ++++++++++---------
 style.css  | 13 ++-----------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index ce4a9357..f2af5f40 100644
--- a/index.html
+++ b/index.html
@@ -616,7 +616,8 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
                 aria-expanded="false"
                 aria-haspopup="true"
               >         
-                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.875px" height="122.648px" viewBox="0 0 122.875 122.648" enable-background="new 0 0 122.875 122.648" xml:space="preserve"><g><path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M108.993,47.079c7.683-0.059,13.898,6.12,13.882,13.805 c-0.018,7.683-6.26,13.959-13.942,14.019L75.24,75.138l-0.235,33.73c-0.063,7.619-6.338,13.789-14.014,13.78 c-7.678-0.01-13.848-6.197-13.785-13.818l0.233-33.497l-33.558,0.235C6.2,75.628-0.016,69.448,0,61.764 c0.018-7.683,6.261-13.959,13.943-14.018l33.692-0.236l0.236-33.73C47.935,6.161,54.209-0.009,61.885,0 c7.678,0.009,13.848,6.197,13.784,13.818l-0.233,33.497L108.993,47.079L108.993,47.079z"/></g></svg>
+                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.875px" height="122.648px" viewBox="0 0 122.875 122.648" enable-background="new 0 0 122.875 122.648" xml:space="preserve">
+                  <g><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M108.993,47.079c7.683-0.059,13.898,6.12,13.882,13.805 c-0.018,7.683-6.26,13.959-13.942,14.019L75.24,75.138l-0.235,33.73c-0.063,7.619-6.338,13.789-14.014,13.78 c-7.678-0.01-13.848-6.197-13.785-13.818l0.233-33.497l-33.558,0.235C6.2,75.628-0.016,69.448,0,61.764 c0.018-7.683,6.261-13.959,13.943-14.018l33.692-0.236l0.236-33.73C47.935,6.161,54.209-0.009,61.885,0 c7.678,0.009,13.848,6.197,13.784,13.818l-0.233,33.497L108.993,47.079L108.993,47.079z"/></g></svg>
               </button>
 
               <!-- Dropdown for shapes and models -->
@@ -718,29 +719,29 @@ <h2 id="modal-title" data-i18n="about_heading" style="margin-top: 0;">About Floc
               </span>
             </div>
             <button class="gizmo-button" id="colorPickerButton" data-i18n="color_picker_button" aria-label="Choose a color" title="Choose a color">      
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3L344 320c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM288 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3L344 320c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM288 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>
             </button>
             <button class="gizmo-button" id="positionButton" data-i18n="position_button" disabled aria-label="Position mesh" title="Position mesh">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l32 0 0 96-96 0 0-32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6l0-32 96 0 0 96-32 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8l-32 0 0-96 96 0 0 32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 32-96 0 0-96 32 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-64-64z"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l32 0 0 96-96 0 0-32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6l0-32 96 0 0 96-32 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8l-32 0 0-96 96 0 0 32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 32-96 0 0-96 32 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-64-64z"/></svg>
             </button>
             <button class="gizmo-button" id="rotationButton" data-i18n="rotation_button" disabled aria-label="Rotate mesh" title="Rotate mesh">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M142.9 142.9c-17.5 17.5-30.1 38-37.8 59.8c-5.9 16.7-24.2 25.4-40.8 19.5s-25.4-24.2-19.5-40.8C55.6 150.7 73.2 122 97.6 97.6c87.2-87.2 228.3-87.5 315.8-1L455 55c6.9-6.9 17.2-8.9 26.2-5.2s14.8 12.5 14.8 22.2l0 128c0 13.3-10.7 24-24 24l-8.4 0c0 0 0 0 0 0L344 224c-9.7 0-18.5-5.8-22.2-14.8s-1.7-19.3 5.2-26.2l41.1-41.1c-62.6-61.5-163.1-61.2-225.3 1zM16 312c0-13.3 10.7-24 24-24l7.6 0 .7 0L168 288c9.7 0 18.5 5.8 22.2 14.8s1.7 19.3-5.2 26.2l-41.1 41.1c62.6 61.5 163.1 61.2 225.3-1c17.5-17.5 30.1-38 37.8-59.8c5.9-16.7 24.2-25.4 40.8-19.5s25.4 24.2 19.5 40.8c-10.8 30.6-28.4 59.3-52.9 83.8c-87.2 87.2-228.3 87.5-315.8 1L57 457c-6.9 6.9-17.2 8.9-26.2 5.2S16 449.7 16 440l0-119.6 0-.7 0-7.6z"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M142.9 142.9c-17.5 17.5-30.1 38-37.8 59.8c-5.9 16.7-24.2 25.4-40.8 19.5s-25.4-24.2-19.5-40.8C55.6 150.7 73.2 122 97.6 97.6c87.2-87.2 228.3-87.5 315.8-1L455 55c6.9-6.9 17.2-8.9 26.2-5.2s14.8 12.5 14.8 22.2l0 128c0 13.3-10.7 24-24 24l-8.4 0c0 0 0 0 0 0L344 224c-9.7 0-18.5-5.8-22.2-14.8s-1.7-19.3 5.2-26.2l41.1-41.1c-62.6-61.5-163.1-61.2-225.3 1zM16 312c0-13.3 10.7-24 24-24l7.6 0 .7 0L168 288c9.7 0 18.5 5.8 22.2 14.8s1.7 19.3-5.2 26.2l-41.1 41.1c62.6 61.5 163.1 61.2 225.3-1c17.5-17.5 30.1-38 37.8-59.8c5.9-16.7 24.2-25.4 40.8-19.5s25.4 24.2 19.5 40.8c-10.8 30.6-28.4 59.3-52.9 83.8c-87.2 87.2-228.3 87.5-315.8 1L57 457c-6.9 6.9-17.2 8.9-26.2 5.2S16 449.7 16 440l0-119.6 0-.7 0-7.6z"/></svg>
             </button>
             <button class="gizmo-button" id="scaleButton" data-i18n="scale_button" disabled aria-label="Scale mesh size" title="Scale mesh size">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>
             </button>           
             </button>
             <button class="gizmo-button" id="hideButton" data-i18n="hide_button" disabled aria-label="Select object" title="Select object">             
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M0 55.2L0 426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320l118.1 0c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M0 55.2L0 426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320l118.1 0c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"/></svg>
             </button>
             <button class="gizmo-button" id="duplicateButton" data-i18n="duplicate_button" disabled aria-label="Duplicate mesh" title="Duplicate selected mesh">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/></svg>
             </button>
             <button class="gizmo-button" id="deleteButton" data-i18n="delete_button" disabled aria-label="Delete mesh" title="Delete selected mesh">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>
             </button>
             <button class="gizmo-button" id="cameraButton" data-i18n="camera_button" disabled aria-label="Camera controls" title="Camera controls">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M0 128C0 92.7 28.7 64 64 64l256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2l0 256c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1l0-17.1 0-128 0-17.1 14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M0 128C0 92.7 28.7 64 64 64l256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2l0 256c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1l0-17.1 0-128 0-17.1 14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"/></svg>
             </button>
           </aside>
           <!-- Info panel collapse starts -->
diff --git a/style.css b/style.css
index 52220ff1..b2d08c55 100644
--- a/style.css
+++ b/style.css
@@ -516,7 +516,6 @@ button {
   border-radius: 5px;
   border: none;
   background-color: var(--color-button-primary);
- 
 }
 
 .gizmo-button svg {
@@ -525,16 +524,8 @@ button {
   height: 20px;
 }
 
-[data-theme="dark"] .gizmo-button path {
-  fill: black !important;
-}
-
-[data-theme="contrast"] .gizmo-button path {
-  fill: black !important;
-}
-
-[data-theme="dark-contrast"] .gizmo-button path {
-  fill: black !important;
+.gizmo-button path {
+  fill: var(--color-bg);
 }
 
 #colorPickerButton svg {

From d1e11c85f5efc3b80b4eb8f030d33e8318984cf8 Mon Sep 17 00:00:00 2001
From: lawsie <5183697+lawsie@users.noreply.github.com>
Date: Wed, 18 Mar 2026 11:28:30 +0000
Subject: [PATCH 6/7] Make JS menu file a module

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 422b10fb..9ffbf320 100644
--- a/index.html
+++ b/index.html
@@ -424,7 +424,7 @@ <h2 id="modal-title" data-i18n="about_heading">About Flock XR</h2>
             </div>
           </div>
           <!-- Moved menu script to main/menu.js -->
-          <script src="main/menu.js" defer></script>
+          <script type="module" src="main/menu.js"></script>
 
           <button class="bigbutton" id="runCodeButton" data-i18n="run_code_button" title="Run your code" aria-label="Run your code">
             <div class="icon" aria-hidden="true">

From 1238dd29b72efab74f4a676239bf140d20655b4e Mon Sep 17 00:00:00 2001
From: lawsie <5183697+lawsie@users.noreply.github.com>
Date: Wed, 18 Mar 2026 11:46:34 +0000
Subject: [PATCH 7/7] Suggestions from CodeRabbit

---
 index.html   |  3 +--
 main/menu.js | 15 ++++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 9ffbf320..a3a1391a 100644
--- a/index.html
+++ b/index.html
@@ -714,8 +714,7 @@ <h2 id="modal-title" data-i18n="about_heading">About Flock XR</h2>
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M142.9 142.9c-17.5 17.5-30.1 38-37.8 59.8c-5.9 16.7-24.2 25.4-40.8 19.5s-25.4-24.2-19.5-40.8C55.6 150.7 73.2 122 97.6 97.6c87.2-87.2 228.3-87.5 315.8-1L455 55c6.9-6.9 17.2-8.9 26.2-5.2s14.8 12.5 14.8 22.2l0 128c0 13.3-10.7 24-24 24l-8.4 0c0 0 0 0 0 0L344 224c-9.7 0-18.5-5.8-22.2-14.8s-1.7-19.3 5.2-26.2l41.1-41.1c-62.6-61.5-163.1-61.2-225.3 1zM16 312c0-13.3 10.7-24 24-24l7.6 0 .7 0L168 288c9.7 0 18.5 5.8 22.2 14.8s1.7 19.3-5.2 26.2l-41.1 41.1c62.6 61.5 163.1 61.2 225.3-1c17.5-17.5 30.1-38 37.8-59.8c5.9-16.7 24.2-25.4 40.8-19.5s25.4 24.2 19.5 40.8c-10.8 30.6-28.4 59.3-52.9 83.8c-87.2 87.2-228.3 87.5-315.8 1L57 457c-6.9 6.9-17.2 8.9-26.2 5.2S16 449.7 16 440l0-119.6 0-.7 0-7.6z"/></svg>
             </button>
             <button class="gizmo-button" id="scaleButton" data-i18n="scale_button" disabled aria-label="Scale mesh size" title="Scale mesh size">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>
-            </button>           
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>         
             </button>
             <button class="gizmo-button" id="hideButton" data-i18n="hide_button" disabled aria-label="Select object" title="Select object">             
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M0 55.2L0 426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320l118.1 0c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"/></svg>
diff --git a/main/menu.js b/main/menu.js
index 80181d6f..e831b72b 100644
--- a/main/menu.js
+++ b/main/menu.js
@@ -63,7 +63,8 @@ class AccessibleFlyoutMenu {
                         this.handleSubmenuKeydown(e, subItem, submenuItems, subIndex, item);
                     });
 
-                    subItem.addEventListener('click', (e) => {                        
+                    subItem.addEventListener('click', (e) => {  
+                        e.stopPropagation();                      
                         this.closeAllMenus();
                     });
                 });
@@ -233,21 +234,21 @@ class AccessibleFlyoutMenu {
 
     handleSubmenuKeydown(e, subItem, submenuItems, subIndex, parentItem) {
         switch (e.key) {
-            case 'ArrowDown':
+            case 'ArrowDown': {
                 e.preventDefault();
                 e.stopPropagation();
                 const nextIndex = (subIndex + 1) % submenuItems.length;
                 submenuItems[nextIndex].focus();
                 break;
-
-            case 'ArrowUp':
+            }
+            case 'ArrowUp': {
                 e.preventDefault();
                 e.stopPropagation();
                 const prevIndex = subIndex === 0 ? submenuItems.length - 1 : subIndex - 1;
                 submenuItems[prevIndex].focus();
                 break;
-
-            case 'ArrowLeft':
+            }
+            case 'ArrowLeft': {
                 e.preventDefault();
                 e.stopPropagation();
                 parentItem.focus();
@@ -257,7 +258,7 @@ class AccessibleFlyoutMenu {
                     parentItem.setAttribute('aria-expanded', 'false');
                 }
                 break;
-
+            }
             case 'Enter':
             case ' ':
                 e.preventDefault();