@@ -3,7 +3,9 @@ import cdIcon from "/img/common/cd_icon_green.png"
3
3
import githubIcon from './assets/github-icon.svg'
4
4
import linkedIcon from './assets/linkedin-icon.svg'
5
5
import instagramIcon from './assets/instagram-icon.svg'
6
-
6
+ import { EventBus } from "../../event-bus" ;
7
+ import { Events } from "../../consts/events" ;
8
+ import { handlers } from "../../consts/handlers" ;
7
9
8
10
const menuTitle : string = "CD-BASH" ;
9
11
@@ -13,47 +15,73 @@ const instagramProfile: string = "https://www.instagram.com/charlesdouc/"
13
15
const footerCopyrights : string = "© 2025 Charles Doucet - All Rights Reserved" ;
14
16
15
17
18
+ const EVENT_BUS = new EventBus < Events > ( ) ;
19
+ EVENT_BUS . subscribe ( 'button_test' , handlers . button_test ) ;
20
+
21
+
16
22
export function VerticalNav ( ) {
17
23
const menuBox = document . createElement ( "div" ) ;
18
24
menuBox . id = "vertical-nav" ;
19
25
20
- menuBox . innerHTML += navHeader ;
26
+ menuBox . appendChild ( navHeaderBlock ( ) ) ;
21
27
menuBox . appendChild ( testButtons ( ) ) ;
22
- menuBox . innerHTML += navFooter ;
28
+ // menuBox.innerHTML += navFooter;
23
29
24
30
return menuBox ;
25
31
}
26
32
27
33
// ----------------------------------------------------------------------
28
34
29
- const navHeader = `
30
- <div class="header">
31
- <div class="top-triangle"></div>
32
- <div class="info">
33
- <img class="icon" src="${ cdIcon } " class="logo vanilla" alt="CD-Bash logo" />
34
- <h5>${ menuTitle } </h5>
35
- </div>
36
- </div>
37
- `
35
+ function navHeaderBlock ( ) {
36
+ const headerContainer = document . createElement ( "div" ) ;
37
+ const topTriangle = document . createElement ( "div" ) ;
38
+ const info = document . createElement ( "div" ) ;
39
+ const icon = document . createElement ( "img" ) ;
40
+ const title = document . createElement ( "h5" ) ;
41
+
42
+ headerContainer . className = "header" ;
43
+ topTriangle . className = "top-triangle" ;
44
+
45
+ info . className = "info" ;
46
+ icon . className = "icon" ;
47
+ icon . src = cdIcon ;
48
+
49
+ title . textContent = menuTitle ;
50
+
51
+ headerContainer . appendChild ( topTriangle ) ;
52
+ headerContainer . appendChild ( info ) ;
53
+ info . appendChild ( icon ) ;
54
+ info . appendChild ( title ) ;
55
+
56
+ return headerContainer ;
57
+ }
58
+
38
59
39
60
function testButtons ( ) {
40
61
const buttonContainer = document . createElement ( "div" ) ;
41
- buttonContainer . className = "button-container" ;
42
-
43
62
const buttonA = document . createElement ( "button" ) ;
44
63
const buttonB = document . createElement ( "button" ) ;
45
64
65
+ buttonContainer . className = "button-container" ;
66
+
67
+ buttonA . id = "button-a" ;
46
68
buttonA . className = "button" ;
47
69
buttonA . textContent = "Button A" ;
70
+ buttonB . id = "button-b" ;
48
71
buttonB . className = "button" ;
49
72
buttonB . textContent = "Button B" ;
50
73
74
+
75
+ buttonA . addEventListener ( 'click' , ( ) => EVENT_BUS . dispatch ( 'button_test' , { path : "Button A" } ) ) ;
76
+ buttonB . addEventListener ( 'click' , ( ) => EVENT_BUS . dispatch ( 'button_test' , { path : "Button B" } ) ) ;
77
+
51
78
buttonContainer . appendChild ( buttonA ) ;
52
79
buttonContainer . appendChild ( buttonB ) ;
53
80
54
81
return buttonContainer ;
55
82
}
56
83
84
+
57
85
const navFooter = `
58
86
<div class="nav-footer">
59
87
<ul class="socials">
@@ -63,4 +91,7 @@ const navFooter = `
63
91
</ul>
64
92
<p class="copyrights">${ footerCopyrights } </p>
65
93
</div>
66
- `
94
+ `
95
+
96
+
97
+
0 commit comments