Build a reusable vertical nav component.

Stängt Publicerat 5 år sedan Betalades vid leverans
Stängt Betalades vid leverans

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

CSS HTML JavaScript PHP Programvaruarkitektur

Projekt-id: #18017242

About the project

6 offerter Distansprojekt Aktivt 5 år sedan

6 frilansare har lagt bud på i genomsnitt $124 för det här jobbet

crocodile305

Hi.. How are you? I saw your description carefully and i 'm very interesting your project. Owing to my rich experience in nav , i can say i can do this perfectly. I have many top skills like CSS,HTML ,PHP , BOOTS Mer

$155 USD inom 3 dagar
(45 omdömen)
6.8
schoudhary1553

This is Vibrant Webtech and I was glad to see that you're looking for help for project Build a reusable vertical nav component.. I've delivered more than 400 + projects in the last 5 years and this makes me very conf Mer

$250 USD inom 4 dagar
(70 omdömen)
6.4
bitterpotato

Hi. I have more than 2 years experience with vue.js. I can help you get this done quickly and efficiently.

$111 USD inom 2 dagar
(10 omdömen)
3.1