From f55773226924c054bb0ce68ecfc42b822c88fbda Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 30 Jul 2026 07:10:44 +0000
Subject: [PATCH] Make the whole Navbar mobile menu row tappable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Leaf pages in the mobile menu were rendered as a padded, background-styled
div that toggled submenu state on tap (a no-op for pages without children),
with the actual link's hit area limited to the text itself. Tapping the
visible row area did nothing, so navigating read as needing two taps.

The mobile item row classes now live on the <a> itself so the entire padded
row navigates, matching how mobile_folder.html already styles its full-width
toggle button. Pages that also have children get a separate chevron button
with @click.stop to open the submenu without navigating. The same fix is
applied to second-level leaf rows in mobile_submenu.html; third-level rows
(mobile_submenu_menu.html) already used full-width links.

aria-current and data-active-child move onto the styled element, since the
aria-[current=page]/data-[active-child] variants generated from
properties.config.json are self-referential. The unreachable isFolder branch
in mobile_item.html is removed — index.html routes folders to
mobile_folder.html, which is unchanged.

Refs Basecamp todo 10145374696; forum threads 56937, 56979.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017D3UxSNcTvJZn9K7Ffz5Hs
---
 .../templates/include/mobile_item.html        | 52 +++++++++----------
 .../templates/include/mobile_submenu.html     | 47 ++++++++++++-----
 2 files changed, 58 insertions(+), 41 deletions(-)

diff --git a/packs/Core.elementsdevpack/components/com.realmacsoftware.navbar/templates/include/mobile_item.html b/packs/Core.elementsdevpack/components/com.realmacsoftware.navbar/templates/include/mobile_item.html
index 2dd6c367..b47562f4 100644
--- a/packs/Core.elementsdevpack/components/com.realmacsoftware.navbar/templates/include/mobile_item.html
+++ b/packs/Core.elementsdevpack/components/com.realmacsoftware.navbar/templates/include/mobile_item.html
@@ -1,49 +1,45 @@
-<li x-data="{ open: false }" class="cursor-pointer">
-    <div
-        class="{{classes.mobile.item}} flex items-center justify-between"
-        @click="open = !open"
-        @if(page.isActive)
-        aria-current="page"
-        @endif
-        @if(page.hasActiveChild)
-        data-active-child
-        @endif
-    >
-        @if(page.isFolder)
-        <button
-            aria-expanded="false"
-            x-bind:aria-expanded="open.toString()"
-            class="flex justify-between items-center"
-            @if(page.isActive)
-            aria-current="page"
-            @endif
-        >
-            <span>{{page.title}}</span>
-            @include("mobile_submenu_indicator")
-        </button>
-        @else
+<li x-data="{ open: false }">
+    @if(page.hasPages)
+    <div class="flex items-stretch justify-between">
         <a
-            class="flex justify-between items-center"
+            class="{{classes.mobile.item}} flex flex-1 items-center"
             href="{{page.url}}"
             @if(page.isActive)
             aria-current="page"
             @endif
+            @if(page.hasActiveChild)
+            data-active-child
+            @endif
             @if(page.openInNewWindow)
             target="_blank"
             @endif
             >{{page.title}}</a
         >
-        @if(page.hasPages)
         <button
             @click.stop="open = !open"
             aria-expanded="false"
             x-bind:aria-expanded="open.toString()"
-            class="pl-2"
+            class="flex cursor-pointer items-center pl-2"
         >
             @include("mobile_submenu_indicator")
         </button>
-        @endif @endif
     </div>
+    @else
+    <a
+        class="{{classes.mobile.item}} block"
+        href="{{page.url}}"
+        @if(page.isActive)
+        aria-current="page"
+        @endif
+        @if(page.hasActiveChild)
+        data-active-child
+        @endif
+        @if(page.openInNewWindow)
+        target="_blank"
+        @endif
+        >{{page.title}}</a
+    >
+    @endif
 
     @includeIf(page.hasPages, template: "mobile_submenu")
 </li>
diff --git a/packs/Core.elementsdevpack/components/com.realmacsoftware.navbar/templates/include/mobile_submenu.html b/packs/Core.elementsdevpack/components/com.realmacsoftware.navbar/templates/include/mobile_submenu.html
index c55616c5..6a69076b 100644
--- a/packs/Core.elementsdevpack/components/com.realmacsoftware.navbar/templates/include/mobile_submenu.html
+++ b/packs/Core.elementsdevpack/components/com.realmacsoftware.navbar/templates/include/mobile_submenu.html
@@ -21,28 +21,49 @@
             <span>{{child.title}}</span>
             @include("mobile_submenu_indicator")
         </button>
-        @else
-        <div
-            class="{{classes.mobile.item}} flex justify-between items-center"
-            @if(child.isActive)
-            aria-current="page"
-            @endif
-            @if(child.hasActiveChild)
-            data-active-child
-            @endif
-        >
+        @else @if(child.hasPages)
+        <div class="flex items-stretch justify-between">
             <a
-                class="block"
+                class="{{classes.mobile.item}} flex flex-1 items-center"
                 href="{{child.url}}"
                 @click.stop
+                @if(child.isActive)
+                aria-current="page"
+                @endif
+                @if(child.hasActiveChild)
+                data-active-child
+                @endif
                 @if(child.openInNewWindow)
                 target="_blank"
                 @endif
                 >{{child.title}}</a
             >
-            @includeIf(child.hasPages, template: "mobile_submenu_indicator")
+            <button
+                @click.stop="open = !open"
+                aria-expanded="false"
+                x-bind:aria-expanded="open.toString()"
+                class="flex cursor-pointer items-center pl-2"
+            >
+                @include("mobile_submenu_indicator")
+            </button>
         </div>
-        @endif @includeIf(child.hasPages, template: "mobile_submenu_menu")
+        @else
+        <a
+            class="{{classes.mobile.item}} block"
+            href="{{child.url}}"
+            @click.stop
+            @if(child.isActive)
+            aria-current="page"
+            @endif
+            @if(child.hasActiveChild)
+            data-active-child
+            @endif
+            @if(child.openInNewWindow)
+            target="_blank"
+            @endif
+            >{{child.title}}</a
+        >
+        @endif @endif @includeIf(child.hasPages, template: "mobile_submenu_menu")
     </li>
     @endeach
 </ul>