Design an Interactive sidebar #202
Description
🚀 Welcome Contributors!!
Your task is to design a collapsible sidebar.
The Design & Behavior:
Visuals:
- Two States: The component features two distinct viewing modes:
- Collapsed (Rail): A slim, vertical column displaying only icons for a maximizing workspace.
- Expanded (Drawer): A wider panel that reveals the logo, full text labels for navigation items, and footer controls.
- Styling: A clean white background with dark grey text. The active state (shown on "Posts") features a light blue rounded rectangular background with a vibrant blue icon.
- Footer: The bottom section includes a "Dark Mode" toggle switch and a prominent "Logout" button.
Key Elements:
- Navigation: Dashboard, Posts, Media, Pages, Comments (with notification badge), Appearance, Plugins, Users, Settings, Tools.
- Interactivity: Hover effects should clearly indicate clickable areas.
📝 Submission Guidelines
To successfully merge your contribution, please follow these rules strictly:
- The Folder: Navigate to the folder named:
10-sidebar - The File: Create a new text file named
<your-github-username>.txt. - The Content: The file must contain your Figma link in the following format:
Figma link - <your-live-figma-link> - Permissions: Ensure your Figma link permissions are set to "Anyone with the link can view" so the maintainers can review your work.
Example of how johndoe.txt should look:
Figma link - https://www.figma.com/file/xxxxxxxxxxxxxxxxxxxxxxxx
Directory Structure Example:
Repo Root
└── 10-sidebar/
└── <your-github-username>.txt
Happy Prototyping! 💫