Create sidebar component - Vanilla.js

[blackgirlbytes]

Create sidebar component - Vanilla

🔗 Dependencies

This issue is dependent on the completion of #83 . Please ensure that issue is resolved before starting work on this task.

🚀 Goal

Create a sidebar component in Vanilla that provides navigation and Web5 connection functionality for our Decentralized Web App (DWA) starter.

🤔 Background

Our DWA needs a sidebar for navigation and displaying the Web5 connection status. We need to implement this in Vanilla, matching the functionality of the existing React implementation in our DWA starter app.

This is part of our larger project to create a Vanilla.js DWA starter. See our main issue here for the full context and list of all related tasks.

Important: For reference, please see the DWA React Vite starter app. While the implementation details will differ for Vanilla, this example provides a good overview of the structure and functionalities of a DWA.

🔑 Tasks and Acceptance Criteria

• Create a Sidebar.vanilla component
• Implement a toggleable sidebar that can be opened and closed
• Create navigation menu items for Home, Settings (when connected), and About
• Integrate with the existing Vanilla Router setup for navigation between pages
• Implement Web5 connection functionality:
  • Add a "Connect" button when the user is not connected
  • When connected, display "Hi, did:1234..." where 1234 are the first few characters of the user's DID
  • The Settings menu item should only be visible when the user is connected
• Make the sidebar responsive for mobile devices
• Style the component using Tailwind CSS to match the existing design

🌟 Resources

• Web5 documentation
• Vanilla JS Documentation
• Navigo Vanilla JS Router
• Lucide Icons
• DWA React Vite Starter App (for reference)

Getting Started

1. Comment ".take" on this issue to get assigned
2. Fork the repository and create a new branch for this task
3. Follow the tasks outlined above
4. Submit a pull request with your changes
5. Respond to any feedback during the review process

Questions?

If you have any questions or need clarification, please comment on this issue or join our Discord community.

Happy coding! 🎉

[VANSH3104]

.take

[github-actions]

Thanks for taking this issue! Let us know if you have any questions!

[naaa760]

.take

[github-actions]

The issue you are trying to assign to yourself is already assigned.