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

[FRONTEND] Reusable Sidebar component #407

Open
djeck1432 opened this issue Dec 18, 2024 · 1 comment · May be fixed by #411
Open

[FRONTEND] Reusable Sidebar component #407

djeck1432 opened this issue Dec 18, 2024 · 1 comment · May be fixed by #411

Comments

@djeck1432
Copy link
Owner

🚨 Attention: Please read the guidelines before applying; otherwise, you will be ignored. 🚫📋
0. Please, join the telegram group to keep in touch https://t.me/+m0IGRiBvLtsyMzIy

  1. Read guideline here
  2. Please create reusable Sidebar component (should be put into ui/components/Sidebar folder with own sidebar.css file)
  3. We already have some example of two sidebars (TableOfContents and VaultLayout. They should be replaced with a single one, that can accept props and based of them properly function. (you can take some styles from there as a base to your implementation if you want, if not - create it from scratch)
  4. Apart from replacing old components (in Vault/Withdraw/Documentation/Overview pages), new Sidebar component should be added to Dashboard page. See Figma
  5. Sidebar should be reused both for such case as on Dahsboard page, where we have links to other pages, as well as this one, which should actually scroll to a corresponding item on a page by its id(hash), e.g. #overview. (also should be added to url)
  6. Based on props Sidebar will dynamically render title (optional) (as you can see for Overview page, Content is title) or it can be w/o title (as for Dashboard). Each sidebar should accept array of items (required), each item should have its own attributes, such as icon, name and link. Depending if it is a link to another page or #hash-link, clicking on item should perform correct action.
  7. Items can have children items (example in Overview page, How It works item), in that case clicking on item should not do any action, rather it should expand and show its sub items, which has the same name and link attribute as a parent item.
  8. Make sure currently selected item is highlighted like in Figma.
  9. Sidebar should be visible for desktop screens (>1024px) and when page is scrolled, it should stick to the top(below header), so all content is visible (you can see how it works in current implementation and preserve this logic)
  10. After creating this component, please use it on: /dashboard, /documentation, /overview, /withdraw, /stake and make sure it works correctly for each state (link to another page, scroll to item, expand sub-items).
@Dprof-in-tech
Copy link
Contributor

Is it okay if I tackle this? I like strawberry

@Dprof-in-tech Dprof-in-tech linked a pull request Dec 19, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants