Completely Stuck. Create Dual Sidebar With Expanding Options. [Diagram Provided] : I have spent about an hour trying to find a solution that can work, however, none of them come close to my desired goal. I am not expecting someone to spend the time creating it for me (its a lot of work), but I want to know how I can achieve it. Links or js fiddle would be amazing.

So this sidebar I am working on. It should have three states.
---------------------
The first and second state show up on table onwards.
The default state is when the sidebar is loaded.
[Default state][1]
-------------
The second state is what happens when the user clicks on one of the icon images that are seen in the first image. It now expands to show the additional navigation. (Ex. Icon says Friends, and the new menu that appears has a list of like 10 people).
[Clicked State][2]
--------------
The Third state only appears on mobile. It basically eliminated the icon sidebar seen in the Default State (first image) 
[Cant show Mobile Picture Cause I need 10 reputation :| I will comment below.]
-----------------
I appreciate any advice on how to solve this. I have tried so many different things and none come close to what I want.

  [1]: https://i.stack.imgur.com/odZ3l.png
  [2]: https://i.stack.imgur.com/jVIlE.jpg
