Closed

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 [login to view URL], JS, CSS and HTML

Skills: CSS, HTML, Javascript, PHP, Software Architecture

See more: vue sidebar menu, vue navigation menu, react js menu example, react navigation component, vue.js navigation bar, vue menu example, vue navbar component, vue.js hamburger menu, vertical nav bar flash, vertical nav bar, nice vertical nav bars, joomla vertical market component, horizontal nav component flex, flash vertical nav, flash vertical nav bars, vertical nav bars html, vertical nav, vertical nav bar php, code vertical nav bar, expandable vertical nav menu

About the Employer:
( 0 reviews ) Barcelona, Spain

Project ID: #18017242

9 freelancers are bidding on average $134 for this job

JinDongZhe

Dear Client, I have 12 years of experience in website development. I specialize in Laravel, HTML, PHP Codeigniter and Wordpress. I have developed a number of online stores for clients spanning across various indus More

$155 USD in 3 days
(60 Reviews)
6.8
WebExpertsx

We read your requirement about reusable vertical nav components and we want you to know that we have a good past experience in PHP, WordPress,laravel ,angular.js, javascript, Bootstrap, SEO, Online Marketing, Social M More

$35 USD in 1 day
(20 Reviews)
6.7
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 More

$250 USD in 4 days
(49 Reviews)
6.0
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 More

$155 USD in 3 days
(11 Reviews)
5.0
greenforest0204

hello i am very interested in your post project. i have rich experience on it. so i am sure i can give you good result in time. please call me Dmitrii. looking forward to work with you . best regards

$155 USD in 3 days
(30 Reviews)
5.2
mountian1997

Dear sir. I have been specializing in web design & development, including Angular, Node, MongoDB, Laravel,PHP, HTML & HTML 5, PSD to HTML, Ajax, JQuery, Css, JavaScript, Bootstrap, MySQL, Payment integration for 7+ y More

$155 USD in 3 days
(18 Reviews)
4.7
bitterpotato

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

$111 USD in 2 days
(7 Reviews)
2.8
$35 USD in 1 day
(0 Reviews)
0.0
lebeden

Hello, My name is Andrew. I have over 15 years of working experience in web development projects. My experience includes deep knowledge of html, css, javascript. Also I have experience in creating reusable component More

$155 USD in 2 days
(0 Reviews)
0.0