Make the whole Navbar mobile menu row tappable (two-tap bug) - #98
Open
bencounsell wants to merge 1 commit into
Open
Make the whole Navbar mobile menu row tappable (two-tap bug)#98bencounsell wants to merge 1 commit into
bencounsell wants to merge 1 commit into
Conversation
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
Member
Author
|
Basecamp todo: Make the whole Navbar mobile menu row tappable (two-tap bug) Generated by Claude Code |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Leaf pages in the Navbar mobile menu rendered as a padded, background-styled
<div>that toggled submenu state on tap (a no-op for pages without children), while the actual link's hit area was limited to the text itself. Tapping the visible row did nothing, so navigation read as needing two taps (forum threads 56937, 56979).templates/include/mobile_item.html— leaf pages are now a full-row<a>carrying{{classes.mobile.item}}, so tapping anywhere on the row navigates. Pages that also have children render the styled link withflex-1plus a separate chevron<button @click.stop>that toggles the submenu without navigating. The unreachable@if(page.isFolder)branch was removed (index.htmlroutes folders tomobile_folder.html, which is unchanged).templates/include/mobile_submenu.html— second-level leaf rows had the identical defect and get the same treatment. Third-level rows (mobile_submenu_menu.html) already put the item classes on the link.aria-current/data-active-childmove onto the styled<a>, since thearia-[current=page]:/data-[active-child]:variants generated fromproperties.config.jsonare self-referential — active highlighting still works, including pages whose only children are hidden from the menu.Templates only;
hooks.source.js/properties.config.jsonare untouched, so no generated files needed rebuilding.Testing
node --test test/*.test.mjs).alpine.js+alpine-collapse.js: 19/19 hit-area checks passed — row padding navigates at every level, chevrons toggle without navigating and reportaria-expanded, tapping a child link keeps its parent submenu open, folder rows still toggle across their full width.Refs Basecamp todo 10145374696.
🤖 Generated with Claude Code
https://claude.ai/code/session_017D3UxSNcTvJZn9K7Ffz5Hs
Generated by Claude Code