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

feature: basic editable responsive menu #230

Merged
merged 7 commits into from
Jan 7, 2025
Merged

feature: basic editable responsive menu #230

merged 7 commits into from
Jan 7, 2025

Conversation

jbmoelker
Copy link
Member

@jbmoelker jbmoelker commented Dec 20, 2024

Changes

  • Adds an AppMenu to the default layout header. The menu items are editable via the CMS (new models included in migration). The menu has basic responsive behaviour with a full and compact mode. See AppMenu/README.md for details.
  • Adds icons for the open and close menu buttons.
  • Refactors inline logic to small components so they could be reused in multiple places (AppLogo, IconButton, SearchLink and UnstyledList).
  • Moves components that should only be used in layouts to src/layouts/, just like the new AppMenu.
  • Adds / updates 7 small READMEs.

Only AppMenu is really new. All the other changes are assets (icons), refactors and documentation. So the number of files changed may be significant. But the actual changes are not that big.

Note: other types of menu items (like external links) and nested menu items can be added in a separate PR so this one doesn't become any bigger.

Associated issue

Part of #196.

How to test

  1. Open preview link
  2. Verify the header contains the new app menu with items from the CMS
  3. Verify the menu items work
  4. Verify that when the menu items no longer fit, the menu items are hidden and a menu button appears.
  5. Verify the menu button opens the menu in a dialog and you can operate it (focus management, tab and esc work).
  6. Change the menu in the CMS
  7. Verify the new menu items are rendered (requires local dev server)

Checklist

  • I have performed a self-review of my own code
  • I have made sure that my PR is easy to review (not too big, includes comments) (only AppMenu is really new, other files are moved around and many short READMEs are added)
  • I have made updated relevant documentation files (in project README, docs/, etc)
  • I have added a decision log entry if the change affects the architecture or changes a significant technology
  • I have notified a reviewer

@jbmoelker jbmoelker changed the title feat(AppMenu): basic editable responsive menu feature: basic editable responsive menu Dec 20, 2024
Copy link

cloudflare-workers-and-pages bot commented Dec 21, 2024

Deploying head-start with  Cloudflare Pages  Cloudflare Pages

Latest commit: 518df0d
Status: ✅  Deploy successful!
Preview URL: https://41daa761.head-start.pages.dev
Branch Preview URL: https://feat-basic-menu.head-start.pages.dev

View logs

@jbmoelker jbmoelker mentioned this pull request Dec 21, 2024
5 tasks
Copy link
Contributor

@jurgenbelien jurgenbelien left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel that the close behavior of the menu dialog is a bit to eager in closing itself.

src/components/UnstyledList/README.md Show resolved Hide resolved
src/layouts/AppMenu/AppMenu.astro Show resolved Hide resolved
src/layouts/AppMenu/AppMenuItem.astro Outdated Show resolved Hide resolved
src/layouts/AppMenu/AppMenu.client.ts Outdated Show resolved Hide resolved
@jbmoelker jbmoelker requested a review from jurgenbelien January 6, 2025 18:50
@jbmoelker jbmoelker merged commit caea0cd into main Jan 7, 2025
5 checks passed
@jbmoelker jbmoelker deleted the feat/basic-menu branch January 7, 2025 08:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants