├── 001-versao-inicial ├── components │ ├── main.js │ └── tree.js ├── index.html └── style.css └── 002-verson-final ├── components ├── main.js └── tree.js ├── index.html └── style.css /001-versao-inicial/components/main.js: -------------------------------------------------------------------------------- 1 | const menu = [ 2 | { id: 1, name: "Desktops", parent: 3 }, 3 | { id: 3, name: "Computers", parent: 8 }, 4 | { id: 4, name: "Smartphones", parent: 6 }, 5 | { id: 6, name: "Portables", parent: 3 }, 6 | { id: 7, name: "Tablets", parent: 6 }, 7 | { id: 8, name: "Electronics", parent: null }, 8 | { id: 18, name: "Camping", parent: null }, 9 | { id: 10, name: "TV", parent: 8 }, 10 | { id: 20, name: '11 pol', parent: 7 }, 11 | { id: 13, name: "Remotes", parent: 14 }, 12 | { id: 14, name: "Accessories", parent: 10 } 13 | ] -------------------------------------------------------------------------------- /001-versao-inicial/components/tree.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rocketseat-content/youtube-codedrops-menu-tree/283dee06bbe6f388897ffb738aeb47e191e86be7/001-versao-inicial/components/tree.js -------------------------------------------------------------------------------- /001-versao-inicial/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tree View 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /001-versao-inicial/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-size: 62.5%; 7 | } 8 | 9 | body { 10 | background: #7159c1; 11 | font-family: "Montserrat", Arial; 12 | 13 | color: #ffffffaa; 14 | 15 | font-size: 2rem; 16 | } 17 | 18 | nav#tree { 19 | margin-top: 45px; 20 | 21 | max-width: 300px; 22 | } 23 | 24 | nav#tree ul { 25 | padding-left: 16px; 26 | } 27 | 28 | nav#tree li { 29 | list-style: none; 30 | 31 | margin-top: 2px; 32 | } 33 | 34 | nav#tree li.has-children { 35 | cursor: pointer; 36 | position: relative; 37 | } 38 | 39 | nav#tree li.has-children:before { 40 | content: '\f107'; 41 | color: #F3F3F4; 42 | position: absolute; 43 | font-family: FontAwesome; 44 | font-size: 26px; 45 | right: 15px; 46 | } 47 | 48 | li > ul { 49 | display: none; 50 | } 51 | 52 | li.open > ul { 53 | display: block; 54 | } -------------------------------------------------------------------------------- /002-verson-final/components/main.js: -------------------------------------------------------------------------------- 1 | import Tree from './tree.js' 2 | 3 | const menu = [ 4 | { id: 1, name: "Desktops", parent: 3 }, 5 | { id: 3, name: "Computers", parent: 8 }, 6 | { id: 4, name: "Smartphones", parent: 6 }, 7 | { id: 6, name: "Portables", parent: 3 }, 8 | { id: 7, name: "Tablets", parent: 6 }, 9 | { id: 8, name: "Electronics", parent: null }, 10 | { id: 18, name: "Camping", parent: null }, 11 | { id: 10, name: "TV", parent: 8 }, 12 | { id: 20, name: '11 pol', parent: 7 }, 13 | { id: 13, name: "Remotes", parent: 14 }, 14 | { id: 14, name: "Accessories", parent: 10 } 15 | ] 16 | 17 | Tree(menu) -------------------------------------------------------------------------------- /002-verson-final/components/tree.js: -------------------------------------------------------------------------------- 1 | export default function(data) { 2 | // pega a tag principal que irá receber o menu 3 | const tree = document.querySelector('nav#tree') 4 | 5 | // recebe toda a arvore de elementos 6 | const menu = document.createElement('ul') 7 | 8 | const firstLevel = data.filter(item => !item.parent) 9 | const getFirstLis = firstLevel.map(buildTree) // retorno novo array com li's 10 | getFirstLis.forEach( li => menu.append(li)) // adicionar li's ao menu 11 | 12 | 13 | function buildTree(item) { 14 | 15 | // primeiro elemento 16 | const li = document.createElement('li') 17 | li.innerHTML = item.name 18 | 19 | 20 | const children = data.filter(child => child.parent === item.id) 21 | 22 | if(children.length > 0) { 23 | 24 | //adiciona um click para os parents 25 | li.addEventListener('click', event => { 26 | event.stopPropagation() 27 | event.target.classList.toggle('open') 28 | }) 29 | 30 | // adiciona uma classe identificadora de que tem filhos 31 | li.classList.add('has-children') 32 | 33 | // constroi os filhos 34 | const subMenu = document.createElement('ul') 35 | children.map(buildTree) 36 | .forEach(li => subMenu.append(li)) 37 | li.append(subMenu) 38 | } 39 | 40 | // adicionar os elements ao menu 41 | return li 42 | } 43 | 44 | // adiciona o menu no HTML 45 | tree.append(menu) 46 | } -------------------------------------------------------------------------------- /002-verson-final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tree View 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /002-verson-final/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-size: 62.5%; 7 | } 8 | 9 | body { 10 | background: #7159c1; 11 | font-family: "Montserrat", Arial; 12 | 13 | color: #ffffffaa; 14 | 15 | font-size: 2rem; 16 | } 17 | 18 | nav#tree { 19 | margin-top: 45px; 20 | 21 | max-width: 300px; 22 | } 23 | 24 | nav#tree ul { 25 | padding-left: 16px; 26 | } 27 | 28 | nav#tree li { 29 | list-style: none; 30 | 31 | margin-top: 2px; 32 | } 33 | 34 | nav#tree li.has-children { 35 | cursor: pointer; 36 | position: relative; 37 | } 38 | 39 | nav#tree li.has-children:before { 40 | content: '\f107'; 41 | color: #F3F3F4; 42 | position: absolute; 43 | font-family: FontAwesome; 44 | font-size: 26px; 45 | right: 15px; 46 | } 47 | 48 | li > ul { 49 | display: none; 50 | } 51 | 52 | li.open > ul { 53 | display: block; 54 | } --------------------------------------------------------------------------------