Bron social icons in menu

[vanderburgt]

User Story

As a user or visitor of Bron I want to easily access and connect with the product's or website's social media profiles on GitHub, Mastodon, and X, so that I can stay updated with the latest news, announcements, and engage with the community.

Acceptance Criteria

For Larger Screens (Desktop)

1. On the website's header, there should be clearly visible icons for GitHub, Mastodon, and X.
2. Clicking on each icon should open the corresponding social media profile in a new tab or window.
3. The icons should not overlap with other elements in the header. In case this happens the breakpoint should be adjusted, so that the smaller screen header is shown.

For Smaller Screens (Mobile)

1. On mobile screens, the expandable navigation menu should include icons for GitHub, Mastodon, and X.
2. The icons should be intuitive to tap on, allowing mobile users to easily access the social media profiles.
3. The icons should not obstruct or clutter the mobile interface, maintaining a clean and user-friendly design.

Additional Information

• url for Github: https://github.com/openstate/jodal
• url for Mastodon: https://mastodon.online/@bron_live@mastodon.social
• url for X: https://twitter.com/bron_live

Designs

• Figma (Small screen): https://www.figma.com/file/Tcv7xuwikoVW0U8c0pqDDq/Graphics?type=design&node-id=981-526&mode=design&t=Gag9xIywGlXwJf37-4

• Figma (Large screen): https://www.figma.com/file/Tcv7xuwikoVW0U8c0pqDDq/Graphics?type=design&node-id=898-206&mode=design&t=Gag9xIywGlXwJf37-4

SVG files

Tasks

• [x] Design and implement responsive social media icons for GitHub, Mastodon, and Twitter.
• [x] Implement the designs with the attached svg icons.
• [ ] Conduct testing on various devices and screen sizes to confirm usability and responsiveness.

[vanderburgt]

Looks great!

Mastodon link returns a 404, though

[vanderburgt]

The Mastodon icon still has a dead link