Introduction:
I love front-end engineering, especially when the solution (which is not obvious) requires some sort of cross-disciplinary expertise.
I recently stumbled upon the following challenge: Turning a sidebar into an accordion on small screens and restore its original state on large screens. Sounds exciting? Watch the video below and read on.
First, let’s visualise the end result:
What is expected of us? What will the final result look like?
- On a large viewport: the sidebar should be normally displayed with all its content
- On a small viewport: the sidebar becomes an accordion which is initially closed (obviously to save some space); the user will have to manually expand it to consume the content
- If the viewport’s width changes from small to large: the accordion should be deactivated and restored back to the sidebar’s initial state
Then, let’s consider the development environment and technologies used:
I believe any viable engineering solution should first consider the development environment, so let’s list the technologies used while specifying their importance:
- Twitter Bootstrap: for its excellent accordion plugin and famous grid system
- AngularJS directive: which will encapsulate all the logic and attach it as a behaviour to the sidebar
- Window matchMedia: for handling a specific breakpoint within the JavaScript code
The use of CSS in this case study is negligible (just a simple class to hide content).
Our methodology for solving the problem:
The methodology I’ve developed over years of experience is the following:
- Don’t force anything (unless there is no other way)
- Avoid reinventing the wheel (has this somehow been done before?)
- Craft your solution around powerful leverages (there must be something out there that can make your job easier and faster)
That being said, here is how we will …
Avoid reinventing the wheel:
- Turning our sidebar into an accordion: we’ll use Twitter Bootstrap’s collapse plugin (no need to engineer an accordion)
- Watching for a specific breakpoint on the JavaScript side: We’ll use matchMedia function (no need to constantly track the slightest change of the viewport’s width)
Craft our solution around powerful leverages:
We will encapsulate our logic inside an AngularJS directive that we’ll use as a decorator to attach the desired behaviour to our sidebar. Here are the basic steps of the solution (found as methods inside the directive)
- Handling the breakpoint change: We’ll track a specific breakpoint (using matchMedia). Each time that point is reached, we’ll turn the sidebar into an accordion or vice versa
- Deactivate or activate the accordion: The accordion will only operate on small screens, so we need to manually turn it off when necessary
- Expand the accordion: When returning the accordion back to a sidebar, we must make sure it isn’t collapsed, so we need a way to manually expand it
- Collapse the accordion: The accordion must be initially collapsed, so we need a manual way to do it
And we’re done! After putting everything together, things should work perfectly like in this special pen; the full code can be found in our CodePen profile.
In conclusion:
We’ve just seen how to solve the engineering problem of turning a sidebar into an accordion on small screens and vice versa. We based our approach on the following paradigms:
- Clearly stating the problem
- Identifying the solution’s great steps
- Leveraging solid and powerful preexisting components
I hope this article had been insightful. Don’t hesitate to share your thoughts with me, I’ll be glad to answer. Thank you!
Resources: