Code Challenge #7: Build An Avengers Off Canvas Sidebar

Previously on the code challenge #6, we built a Pomodoro timer using Vue.js. Here is the Celý článek

Previously on the code challenge #6, we built a Pomodoro timer using Vue.js. Here is the solution to the challenge. Also, check out the comments under the post for awesome submissions.

In this challenge, we are required to build a stylish but simple Off Canvas Sidebar. Sidebars are great for easy navigation across single page websites and applications and a fantastic UI improvement will be to build it out using Off Canvas.

The Challenge

In this challenge, we are required to create an Off Canvas sidebar, which slides in with the click of the menu button and slides out with the click of the same button. Feel free to build this out using any tool or technology. The final product should look like this:

As can be seen, the goal of the challenge is to slide in the sidebar with the click of a button and slide it out with the click of another button.

Note the transition on the sidebar when it slides in and slides out

Requirements

To make this challenge as fun as possible, feel free to build this out with any tool or technology of your choice. Want to go the extra mile? You could throw in some images and a bio for your favorite badass superhero. Also, take note of the following requirements.

1. The sidebar should slide in with the click of a button and also slide out with the click of the same button.
2. When the sidebar slides in, the content of the website should fit in completely on the screen and shouldn't overflow.
3. Control transition of the sidebar when the button is clicked.
4. Have loads of fun while completing this challenge.

Goals for this Challenge

• Understand Off Canvas and how it works.
• Utilize transition properties in CSS
• Build a stylish sidebar

Bonus

As a bonus, you could include a close-menu button and also provide a smooth transition between it and the menu button when clicked.

Resources

A base codepen is provided containing HTML and CSS code. CSS variables are also used with the Sass variant. Feel free to modify it if you like.

Fork this base codepen as your starting point

Community

• Post your solutions in the comment section of this post.
• Join the Slack group to interact with others in the #codechallenge channel and also post your solution there.
• Post your solution on twitter using the hashtag #scotchchallenge

Solution

The solution to this challenge will be released on Sunday. Happy Coding!