Build a reusable vertical nav component.

It should: - (When menu has sub links) Expand current menu if clicked and collapse all other menus that are not in its parent - When link is visited manually (link pasted in URL), the component should expand to the active link. - Be able to pass the following for each link and or folder - - Menu Name (for links with sub links) or Link Name - - Link URL See this example [login to view URL] Notice how when you load that URL, the sidebar expands to the "Customers" and highlights "List Customers" based on the URL. And notice how if you click one element in the sidebar (like orders or products) it expands that menu and collapses the others and when you click on a link it is highlighted. I already have vue router working properly and my navigation in place highlighting as expected. The only issue is it does not expand/collapse Ideally I would pass in a object similar to this: [ {name: 'foo1', url: '/bar1'}, {name: 'foo2', url: '/bar2', children: [ {name: 'foo11', url: '/bar11'}, {name: 'foo22', url: '/bar22', children: [ {name: 'foo111', url: '/bar111'}, {name: 'foo222', url: '/bar222'}, {name: 'foo333', url: '/bar333'}, ]}, {name: 'foo33', url: '/bar33'}, ]} {name: 'foo3', url: 'bar1'}, ] The following is a broken structure of the current sidebar navigation html: <nav class="navigation"><ul class="mainmenu"><li><a href="/ops" class="router-link-active">Dashboard</a></li><li><a href="/ops/returns" class="">Returns List</a></li><li><a href="/ops/discounts" class="router-link-exact-active router-link-active">Discounts</a></li><li><a href="">Charts-Returns</a><ul class="submenu"><li><a href="">chart1</a></li><li><a href="">chart2</a></li><li><a href="">chart3</a></li></ul></li><li><a href="">Charts-Inventory</a><ul class="submenu"><li><a href="">chart1</a></li><li><a href="">chart2</a></li><li><a href="">chart3</a></li></ul></li><li><a href="">Errors</a><ul class="submenu"><li><a href="">Error Types</a></li><li><a href="">Warehouse</a></li><li><a href="">Shipment</a></li><li><a href="">Item</a></li><li><a href="">TST Website</a></li></ul></li><li><a href="">About</a></li><li><a href="">Long Example</a><ul class="submenu"><li><a href="">Tops</a></li><li><a href="">Bottoms</a></li><li><a href="">Footwear</a></li><li><a href="">Tops</a></li><li><a href="">Bottoms</a></li><li><a href="">Footwear</a></li><li><a href="">Tops</a></li><li><a href="">Bottoms</a></li><li><a href="">Footwear</a></li><li><a href="">Tops</a></li><li><a href="">Bottoms</a></li><li><a href="">Footwear</a></li><li><a href="">Tops</a></li><li><a href="">Bottoms</a></li><li><a href="">Footwear</a></li><li><a href="">Tops</a></li><li><a href="">Bottoms</a></li><li><a href="">Footwear</a></li><li><a href="">Tops</a></li><li><a href="">Bottoms</a></li><li><a href="">Footwear Last</a></li></ul></li><li><a href="">Contact us</a></li></ul></nav> Your finished product should be clean and efficient code. Code should be commented. Note: No additional libraries. Should just be your raw vue.js, JS, CSS and HTML