├── 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 | }
--------------------------------------------------------------------------------