Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add filter to replace local nav bar mobile menu icon #480

Merged
merged 2 commits into from
Oct 18, 2023

Conversation

adamwoodnz
Copy link
Contributor

@adamwoodnz adamwoodnz commented Oct 17, 2023

Closes #463

Implementation taken from @ndiego's comment, with a couple of minor changes. The outer block is the wporg/local-navigation-bar which wraps a navigation block.

Requires a navigation to have the 3 bar menu icon set ("icon":"menu"), so that the SVG path can be changed to use a caret instead. All the repos where the local nav bar is used will need to have this updated, as they currently have "hasIcon": false and use the word 'Menu' (Developer, Documentation, Showcase, Main).

Screenshots

State Before After
Closed localhost_8888_(Samsung Galaxy S20 Ultra) (14) localhost_8888_(Samsung Galaxy S20 Ultra) (18)
Open localhost_8888_(Samsung Galaxy S20 Ultra) (15) localhost_8888_(Samsung Galaxy S20 Ultra) (19)

Testing

Easiest to try it out on WordPress/wporg-showcase-2022#254

@adamwoodnz adamwoodnz marked this pull request as draft October 17, 2023 04:34
@adamwoodnz adamwoodnz self-assigned this Oct 17, 2023
@StevenDufresne
Copy link
Contributor

I tried testing this with main@trunk and showcase@trunk. I wasn't able to get it to work. The function was called but failed on the nested ifs. Do I have to do something to those themes to get it to work?

@adamwoodnz
Copy link
Contributor Author

Do I have to do something to those themes to get it to work?

Yep, the nav blocks need a new setting "icon": "menu", see the changes on WordPress/wporg-showcase-2022#254

@StevenDufresne
Copy link
Contributor

Can we get this either right aligned or centered aligned with the hamburger menu? Center aligned would probably feel better.

@adamwoodnz
Copy link
Contributor Author

Center aligned would probably feel better.

Yep! Try now.

@adamwoodnz adamwoodnz added the Redesign Related to the wordpress.org redesign project label Oct 18, 2023
@StevenDufresne
Copy link
Contributor

LGTM.

Should this be rolled out for the whole site at once?

@adamwoodnz
Copy link
Contributor Author

Should this be rolled out for the whole site at once?

Yeah we could, I've almost prepared all the PRs now: Docs, Showcase, Developer. Think it's just Main to go...

@ndiego
Copy link
Member

ndiego commented Oct 18, 2023

It's very cool that this is using the HTML API from a developer relations perspective. A great, real-world example for folks to see.

@adamwoodnz adamwoodnz merged commit 1c4013e into trunk Oct 18, 2023
2 checks passed
@adamwoodnz adamwoodnz deleted the update/463-local-nav-menu-icon branch October 18, 2023 21:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Local Navigation Bar Redesign Related to the wordpress.org redesign project
Projects
Status: Done
Archived in project
Development

Successfully merging this pull request may close these issues.

Global Header menu: Use icons for the mobile menu toggle buttons
3 participants