Skip to content

Commit 210cb51

Browse files
cd-bashcd-bash
committed
feat: nav breadcrumbs first version
1 parent 20e3488 commit 210cb51

File tree

6 files changed

+164
-50
lines changed

6 files changed

+164
-50
lines changed

‎src/components/vertical-nav/breadcrumbs-nav.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
enum LinkCategory {
2+
HOME = "#3BFFC5",
3+
INTERACTIVES = "#3B62FF",
4+
PROJECT = "#1E1E1E",
5+
}
6+
7+
type BreadcrumbLink = [
8+
crumbName: string,
9+
href: string,
10+
category: LinkCategory
11+
];
12+
13+
const CURRENT_TRACK: BreadcrumbLink[] = [
14+
["home", "/", LinkCategory.HOME],
15+
["interactives", "/interactives", LinkCategory.INTERACTIVES],
16+
["space compass", "/space-compass", LinkCategory.PROJECT],
17+
]
18+
19+
//-----------------------------------------------------------------------
20+
21+
export function trackBreadcrumbs() {
22+
const breadcrumbsContainer = document.createElement("div");
23+
const title = document.createElement("h3");
24+
const breadcrumbs = document.createElement("ul");
25+
26+
breadcrumbsContainer.className = "breadcrumbs-nav";
27+
title.textContent = "Track:"
28+
29+
breadcrumbsContainer.appendChild(title);
30+
breadcrumbsContainer.appendChild(breadcrumbs);
31+
32+
CURRENT_TRACK.forEach(BreadcrumbLink => {
33+
const [crumbName, href, category] = BreadcrumbLink;
34+
const crumb = document.createElement("li");
35+
const link = document.createElement("a");
36+
const separator = document.createElement("span");
37+
38+
link.href = href;
39+
link.textContent = crumbName;
40+
link.style.backgroundColor = category;
41+
separator.textContent = "/";
42+
43+
breadcrumbs.appendChild(crumb);
44+
crumb.appendChild(link);
45+
crumb.appendChild(separator);
46+
})
47+
48+
return breadcrumbsContainer;
49+
}

‎src/components/vertical-nav/footer-nav.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,23 @@
22
import linkedIcon from "./assets/linkedin-icon.svg";
33
import instagramIcon from "./assets/instagram-icon.svg";
44

5-
const menuTitle: string = "CD-BASH";
6-
75
const githubProfile: string = "https://github.com/CD-BASH"
86
const linkedinProfile: string = "https://www.linkedin.com/in/charlesdouc/"
97
const instagramProfile: string = "https://www.instagram.com/charlesdouc/"
108
const footerCopyrights: string = "© 2025 Charles Doucet - All Rights Reserved";
119

1210
type SocialLink = [
13-
socialName: string,
1411
path: string,
1512
image: string,
1613
]
1714

18-
const FOO_SOCIALS = [
19-
["Github", githubProfile, githubIcon],
20-
["LinkedIn", linkedinProfile, linkedIcon],
21-
["Instagram", instagramProfile, instagramIcon]
15+
const FOO_SOCIALS: SocialLink[] = [
16+
[githubProfile, githubIcon],
17+
[linkedinProfile, linkedIcon],
18+
[instagramProfile, instagramIcon]
2219
]
2320

21+
//-----------------------------------------------------------------------
2422

2523
export function footerNav() {
2624
const footerContainer = document.createElement("div");
@@ -36,7 +34,7 @@ export function footerNav() {
3634
footerContainer.appendChild(copyrights);
3735

3836
FOO_SOCIALS.forEach(social => {
39-
const [name, path, image] = social;
37+
const [path, image] = social;
4038
const socialLink = document.createElement("li");
4139
const link = document.createElement("a");
4240
const icon = document.createElement("img");

‎src/components/vertical-nav/header-nav.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import cdIcon from "/img/common/cd_icon_green.png";
2+
3+
const menuTitle = "CD-BASH";
4+
5+
//-----------------------------------------------------------------------
6+
7+
export function headerNav() {
8+
const headerContainer = document.createElement("div");
9+
const topTriangle = document.createElement("div");
10+
const info = document.createElement("div");
11+
const icon = document.createElement("img");
12+
const title = document.createElement("h5");
13+
14+
headerContainer.className = "header";
15+
topTriangle.className = "top-triangle";
16+
17+
info.className = "info";
18+
icon.className = "icon";
19+
icon.src = cdIcon;
20+
21+
title.textContent = menuTitle;
22+
23+
headerContainer.appendChild(topTriangle);
24+
headerContainer.appendChild(info);
25+
info.appendChild(icon);
26+
info.appendChild(title);
27+
28+
return headerContainer;
29+
}

‎src/components/vertical-nav/index.ts‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,25 @@
11
import './styles.css';
2-
export * from "./vertical-nav";
2+
import {headerNav} from "./header-nav.ts";
3+
import {footerNav} from "./footer-nav.ts";
4+
import {trackBreadcrumbs} from "./breadcrumbs-nav.ts";
5+
export * from "./header-nav.ts";
6+
export * from "./breadcrumbs-nav.ts";
7+
export * from "./footer-nav.ts";
8+
9+
//-----------------------------------------------------------------------
10+
11+
export function VerticalNav() {
12+
const navBox = document.createElement("div");
13+
const navWrapper = document.createElement("div");
14+
15+
navBox.id = "vertical-nav";
16+
navWrapper.className = "nav-wrapper";
17+
18+
19+
navBox.appendChild(headerNav());
20+
navBox.appendChild(navWrapper);
21+
navWrapper.appendChild(trackBreadcrumbs());
22+
navBox.appendChild(footerNav());
23+
24+
return navBox;
25+
}

‎src/components/vertical-nav/styles.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@
77
background-color: #080808;
88
box-shadow: 0px 0px 0px 16px rgba(8,8,8,0.5), 0px 0px 0px 8px rgba(8,8,8,0.5);
99

10+
.nav-wrapper {
11+
width: 230px;
12+
margin: 0 auto;
13+
}
14+
1015
.top-triangle {
1116
position: relative;
1217
width: 100%;
@@ -80,5 +85,54 @@
8085
color: black;
8186
}
8287

88+
.breadcrumbs-nav {
89+
list-style-type: none;
90+
margin: 0;
91+
padding: 0;
92+
}
93+
94+
.breadcrumbs-nav h3 {
95+
font-family: "Cabin", sans-serif;
96+
color: #a1a1a1;
97+
font-weight: bold;
98+
text-transform: uppercase;
99+
margin: 15px 0 5px 0;
100+
padding: 0;
101+
}
102+
103+
.breadcrumbs-nav ul {
104+
list-style-type: none;
105+
margin: 0;
106+
padding: 0;
107+
}
108+
109+
.breadcrumbs-nav li {
110+
display: inline-block;
111+
margin: 0 5px;
112+
line-height: 210%;
113+
color: white;
114+
font-family: "handjet", serif;
115+
}
116+
117+
.breadcrumbs-nav li a {
118+
font-family: "handjet", serif;
119+
font-weight: 700;
120+
text-decoration: none;
121+
color: black;
122+
padding: 4px 6px;
123+
margin-right: 5px;
124+
125+
}
126+
127+
.breadcrumbs-nav li:last-child {
128+
a {
129+
color: white;
130+
}
131+
span {
132+
display: none;
133+
}
134+
135+
}
136+
83137
}
84138

‎src/components/vertical-nav/vertical-nav.ts‎

Lines changed: 2 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import './styles.css'
2-
import cdIcon from "/img/common/cd_icon_green.png"
32

43
import {EventBus} from "../../event-bus";
54
import {Events} from "../../consts/events";
@@ -8,47 +7,9 @@ import {handlers} from "../../consts/handlers";
87
const EVENT_BUS = new EventBus<Events>();
98
EVENT_BUS.subscribe('button_test', handlers.button_test);
109

11-
12-
13-
export function VerticalNav() {
14-
const menuBox = document.createElement("div");
15-
menuBox.id = "vertical-nav";
16-
17-
menuBox.appendChild(navHeader());
18-
menuBox.appendChild(testButtons());
19-
menuBox.appendChild(navFooter());
20-
21-
return menuBox;
22-
}
23-
2410
// ----------------------------------------------------------------------
2511

26-
function navHeader() {
27-
const headerContainer = document.createElement("div");
28-
const topTriangle = document.createElement("div");
29-
const info = document.createElement("div");
30-
const icon = document.createElement("img");
31-
const title = document.createElement("h5");
32-
33-
headerContainer.className = "header";
34-
topTriangle.className = "top-triangle";
35-
36-
info.className = "info";
37-
icon.className = "icon";
38-
icon.src = cdIcon;
39-
40-
title.textContent = menuTitle;
41-
42-
headerContainer.appendChild(topTriangle);
43-
headerContainer.appendChild(info);
44-
info.appendChild(icon);
45-
info.appendChild(title);
46-
47-
return headerContainer;
48-
}
49-
50-
51-
function testButtons() {
12+
/*function testButtons() {
5213
const buttonContainer = document.createElement("div");
5314
const buttonA = document.createElement("button");
5415
const buttonB = document.createElement("button");
@@ -70,6 +31,6 @@ function testButtons() {
7031
buttonContainer.appendChild(buttonB);
7132
7233
return buttonContainer;
73-
}
34+
}*/
7435

7536

0 commit comments

Comments
 (0)