After you guys clone or download this repo and run npm build to get the ouput. Here's a DIY way to add the PIN list toggle button to the spec.
It's all about modifying two files:
out/ecmarkup.js
out/ecmarkup.css
In the out/ecmarkup.js, just add these code to the end of it:

//----------------------------------------------------------------------------------
//add toggle icon to the menu
window.onload = function(){
  var MenuPins = document.getElementById('menu-pins');
  var MenuPaneHeader = MenuPins.querySelectorAll('.menu-pane-header')[0];

  var MenuPaneHeaderToggle = document.createElement('span');
  var MenuPaneHeaderToggleIcon = document.createTextNode('◢');
  MenuPaneHeaderToggle.appendChild(MenuPaneHeaderToggleIcon);
  MenuPaneHeaderToggle.setAttribute('class','MenuPinsNormal MenuPinsNormalCollpase');
  MenuPaneHeaderToggle.setAttribute('id','MenuPaneHeaderToggle');
  MenuPaneHeaderToggle.onclick = MenuPinsToggle; //add event that toggles the pin list

  MenuPaneHeader.appendChild(MenuPaneHeaderToggle);
};

//toggle the MenuPinsList 
function MenuPinsToggle(){
  var MenuPinsList = document.getElementById('menu-pins-list');
  var MenuPaneHeaderToggle = document.getElementById('MenuPaneHeaderToggle');

  if(MenuPinsList.style.display === 'none'){
    MenuPinsList.style.display = 'block';
    MenuPaneHeaderToggle.setAttribute('class','MenuPinsNormal MenuPinsNormalCollpase');
  }else{
    MenuPinsList.style.display = 'none';
    MenuPaneHeaderToggle.setAttribute('class','MenuPinsNormal');
  }
}

And in the out/ecmarkup.css, add these to the end of it:

.MenuPinsNormal {
  cursor: pointer;
  position: absolute;
  right:0px;
  display: inline-block;
  transform: rotate(45deg) translate(-15px, 10px);
}

.MenuPinsNormalCollpase {
  transform: rotate(-45deg) translate(-15px, -15px);
}

Then you will get your collapsable DIY PIN list.

@peterzhangsnail would you be interested in making a PR to https://github.com/bterlson/ecmarkup to add that functionality?

It has flaws. The solution mentioned before only solves this problem on PC. How it may look on the mobile device has not been tested. So a thorough test is necessary. And to your invitation, the answer is yes, of course.

@ljharb I have been running a few tests and make sure that all the media rules get considered. It seems fine to me now. Then replace element.css in the ecmarkup/css/ and menu.js in the ecmarkup/js/ directory with the updated files, run npm run build after that. The ouput works well.

If that could be done in ecmarkup itself, rather than just in this repo, that would be ideal.

@ljharb It can be done, just need to add a file 'pinCollpase.js' to replace the two files with our updated files and change the build script in the package.json into "build": "node pinCollapse.js && npm run build-master"

@ljharb Here's the pinCollapse.js, just make it so,bro.(Of course, use it after double check)
pinCollapse.zip

Any chance you could make a PR to ecmarkup for that?

@ljharb Launch a pull request there, just waiting for the owner's test and merge.