Material Sidenav: Custom Collapse/Expand behaviour

You may have used Angular Material Sidenav component in your projects before, however, it just vanishes when collapsed by default. What if you want the Sidenav to be visible with side links having icons only when collapsed? Off-course, you can have 2 Sidenavs (one with icons + text and another with icons only) and show/hide them conditionally. But by design, Angular Material Sidenav does not let you have 2 Sidenavs in the same position.

So here is how I’ve devised a clever way to do away with the said limitation.

You can watch the video below👇 to see it in action or grab the source code from Github.


socialFlair – Stackoverflow like User Flairs to showcase your Social Profiles


I’ve released one more Opensource project, socialFlair on github today. It is a simple jQuery plugin which lets you embed social flairs in your about-me page of  your personal website or blog. Currently, it is available for Twitter, Github and Facebook. This is how it looks:



Live Demo:

If you found this article useful in anyway, feel free to donate me and receive my dilettante painting as a token of appreciation for your donation.