layer5io / layer5io/layer5

[UI/UX] Make SVG illustrations clickable to navigate to their respective sections

Open
#8,011 4 comments 0 reactions 1 assignee View on GitHub

@tejaswiverma121-byte is already working on this.

Since Sep 8, 2026.

framework/gatsby help wanted kind/bug
Dominant language
JavaScript
Stars
1.1k
Forks
1.6k
Avg merge
2d 10h
Merged PRs (30d)
18

Description

Description

In https://layer5.io/cloud-native-management/meshery/getting-started , I noticed that some of the SVG illustrations displayed on the page are currently static and do not provide any interaction.

These SVGs could be made clickable and linked to their respective sections/pages. When a user clicks on an SVG, they would be redirected to the relevant section, making the illustrations more useful as navigation elements.

Proposed Solution

  • Make each relevant SVG clickable.
  • Add a link to the corresponding section/page for each SVG.
  • Ensure the navigation works correctly across supported screen sizes.
  • Preserve the existing appearance and styling of the SVGs.
  • Provide an appropriate hover state or other visual indication that the SVG is clickable.

Expected Outcome

Users should be able to click on an SVG and navigate directly to the section or page associated with it.

This would make the UI more interactive and improve navigation and discoverability.

Screen Recording

https://github.com/user-attachments/assets/30eef941-1baa-434e-a8f0-16c2e282909e

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.