tdpeuter/tdpeuter
tdpeuter/tdpeuter
1
Fork 0
Code Issues 5 Pull requests Projects Releases Activity

feat: Basic navbar

Browse source
This commit is contained in:
Tibo De Peuter 2025-09-14 16:11:50 +02:00
parent d10974b5aa
commit a09d431b99
Signed by: tdpeuter
GPG key ID: 38297DE43F75FFE2
4 changed files with 34 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

29
components/navbar.js Normal file
View file

@ -0,0 +1,29 @@
function getNavBar() {
const nav = document.createElement('template');
nav.id = 'navbar-template';
nav.innerHTML = `
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="cv.html">Curriculum Vitae</a></li>
</ul>
</nav>
`;
return nav;
}
class NavBar extends HTMLElement {
constructor() {
super();
const templateContent = getNavBar().content;
const shadowRoot = this.attachShadow({ mode: 'open' });
const navbar = templateContent.cloneNode(true);
shadowRoot.appendChild(navbar);
}
}
customElements.define('nav-bar', NavBar);

3
cv.html
View file

@ -163,7 +163,7 @@
}
</style>
<body>
<nav-bar></nav-bar>
<main class="wrapper">
<header>
<h1>Tibo De Peuter</h1>
@ -477,5 +477,6 @@
reveal();
}
</script>
<script src="script.js"></script>
</body>
</html>

1
index.html
View file

@ -31,6 +31,7 @@
<link rel="apple-touch-icon" href="assets/images/owl_circuit.png">
</head>
<body>
<nav-bar></nav-bar>
<div class="wrapper">
<main>
<div class="landing">

2
script.js
View file

@ -3,4 +3,6 @@ import ('./components/my-marquee.js');
import ('./components/button-collection.js');
import ('./components/navbar.js');
const debug = false;