Skip to content

Shared menu with temporary icons#170

Merged
emi420 merged 7 commits intomainfrom
shared-menu
Jan 14, 2026
Merged

Shared menu with temporary icons#170
emi420 merged 7 commits intomainfrom
shared-menu

Conversation

@warmijusti
Copy link
Copy Markdown
Collaborator

@warmijusti warmijusti commented Jan 12, 2026

This PR introduces a new web component that provides a unified dropdown menu for navigating between all HOT products. This menu is designed to be added to the right side of headers across all HOT applications, allowing users to easily discover and navigate between different tools in the HOT suite.

Features
• Organized by Category
• Optional Logos: Supports displaying product icons via the show-logos attribute
• Dropdown Menu: Built using Web Awesome's dropdown component with grid icon trigger
• External Links: Opens product pages in new tabs

Implementation Details
• Built with Lit web components
• Uses temporary 1px white SVG placeholders for product icons (to be replaced with actual icons later)
• Styled to match HOT design system

Known Issues
When the dropdown opens, page content may shift slightly due to the scrollbar being hidden. This is documented in the Storybook stories with a CSS fix that consuming applications can apply.

Screenshot 2026-01-13 at 7 55 06 AM

@github-actions github-actions bot added the documentation Improvements or additions to documentation label Jan 12, 2026
@spwoodcock
Copy link
Copy Markdown
Member

spwoodcock commented Jan 12, 2026

Thanks @warmijusti!

Can we have a tiny bit of context in the description for what problen this solves and why a new component was needed 🙏

A screenshot might be nice too!

@spwoodcock
Copy link
Copy Markdown
Member

Really appreciate the stories added as examples though ❤️

I just want to check this component is generic enough to be used in many projects at HOT =)

@tbssnch tbssnch self-assigned this Jan 13, 2026
@tbssnch tbssnch self-requested a review January 13, 2026 05:24
@tbssnch tbssnch removed their assignment Jan 13, 2026
Comment thread src/components/shared-menu/shared-menu.styles.ts Outdated
Comment thread src/components/shared-menu/shared-menu.component.ts Outdated
Comment thread src/components/shared-menu/shared-menu.styles.ts Outdated
@tbssnch tbssnch removed the documentation Improvements or additions to documentation label Jan 13, 2026
@github-actions github-actions bot added the documentation Improvements or additions to documentation label Jan 13, 2026
@warmijusti
Copy link
Copy Markdown
Collaborator Author

Thanks @warmijusti!

Can we have a tiny bit of context in the description for what problen this solves and why a new component was needed 🙏

A screenshot might be nice too!

Thanks for your comment @spwoodcock ! Just added a detailed description.

@spwoodcock
Copy link
Copy Markdown
Member

Makes total sense now - thanks for clarifying! 🙏

Comment thread src/hotosm-ui.ts Outdated
@emi420 emi420 merged commit dc349d6 into main Jan 14, 2026
2 of 3 checks passed
@emi420 emi420 deleted the shared-menu branch January 14, 2026 21:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants