Implement Reusable Sidepanel Component Interface

[onlydustapp]

Overview

Create a reusable Sidepanel component that matches the Figma design specifications. This Sidepanel should support contextual content display, slide animations, and responsiveness across various screen sizes.

https://www.figma.com/design/Nv8W2LKjj8LfUjzNJSZrK3/Untitled?node-id=1-2&p=f&t=LEKdZUbrFWm0v0PG-0

Requirements

• Layout & Styles:
  • Match the layout, width, padding, and overall styling exactly as defined in the Figma design.
  • Ensure the component supports both light and dark themes using existing design tokens.
• Animation:
  • Implement smooth slide in/out animations (using Framer Motion or CSS transitions).
• Component Structure:
  • Include a close button.
  • Add a title section.
  • Provide a scrollable content area.
• Props:
  • title: Show the panel's title.
  • isOpen: Control the panel visibility.
  • onClose: Callback for handling the close action.
  • children: Render nested content.
• Responsiveness:
  • Ensure the component is fully responsive (proper collapse or overlay behavior on smaller screens).

Deliverables

• A component file named Sidepanel.tsx located in the shared or UI folder.
• A fully responsive, animated implementation that adheres to the design.

Technical Considerations

• Use Tailwind CSS for styling consistency.
• Leverage existing design tokens for theme integration.
• Ensure the component is easily reusable across multiple flows or screens.

🌟 Let's align this component with the overall project design standards as described in the README.

[austineblaise]

I'd love to work on the Sidepanel component. I have strong experience building reusable, responsive UI components across React/Next.js, Vue/Nuxt, and Angular frameworks.
I’ll ensure the Sidepanel matches the Figma design precisely, supports contextual content, smooth slide animations, and remains fully responsive across devices.

I focus on clean, maintainable code and will structure the component for easy reuse and extension, following best practices.
Really excited to contribute to this project and deliver a high-quality component! 🚀

Thanks for considering my application!

[ayomideadeniran]

I'm MERN Developer 3years of Programming.

As a Frontend Software engineer, believe my approach ensures that the solution is secure, efficient, and adheres to best practices. If selected, I will work diligently to deliver high-quality code within the proposed timeline. ETA 2 days.

If any doubt check my Portfolio here: https://knightsdev-portfolio.vercel.app/

[ayomideadeniran]

On it....

[ayomideadeniran]

Which folder am i to implement the above ?

[ayomideadeniran]

@zintarh @austineblaise @MhdSadd @Michelle031

[zintarh]

Hello @ayomideadeniran create a component in the components folder