https://www.bunked.ai/components/header.js

1class Header extends HTMLElement {
2    constructor()  {
3        super();
4    }
5
6    connectedCallback() {
7        this.innerHTML = `
8            <!-- Navbar -->
9            <nav class="navbar navbar-expand-lg navbar-dark sticky-top bg-dark" style="z-index: 10; min-height: 58.59px">
10            <!-- Container wrapper -->
11            <div class="container d-flex align-items-center">
12                <!-- Toggle button -->
13                <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
14                data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
15                aria-label="Toggle navigation">
16                <i class="fas fa-bars"></i>
17                </button>
18    
19                <!-- Collapsible wrapper -->
20                <div class="collapse navbar-collapse" id="navbarSupportedContent">
21                <!-- Navbar brand -->
22                <a class="navbar-brand mt-2 mt-lg-0" href="/">
23                    <img src="/img/logo_inverse.png" height="33" alt="bunked Logo"
24                    loading="lazy" />
25                </a>
26                <!-- Left links -->
27                <ul class="navbar-nav me-auto mb-2 mb-lg-0 align-items-center">
28                    <li class="nav-item">
29                        <a class="nav-link text-secondary fw-bold" href="/authenticator"><button class="btn btn-outline-light">Authenticator</button></a>
30                    </li>
31                    <li class="nav-item">
32                        <a class="nav-link text-secondary fw-bold" href="/#team">Team</a>
33                    </li>
34                    <li class="nav-item">
35                        <a class="nav-link text-secondary fw-bold" href="/contact-us">Contact</a>
36                    </li>
37                    <li class="nav-item">
38                        <a class="nav-link text-secondary fw-bold" href="/blog">Blog</a>
39                    </li>
40                </ul>
41                <!-- Left links -->
42                </div>
43                <!-- Collapsible wrapper -->
44    
45                <!-- Right elements -->
46                <div class="d-flex align-items-center">
47                <!-- Icon -->
48                <a class="text-secondary me-3" href="https://x.com/bunkedai" rel="nofollow" target="_blank">
49                    <i class="fab fa-twitter"></i>
50                </a>
51                <!-- Company name  -->
52                <a href="/"><h5 class="nav-item text-secondary mx-3 mt-1">bunked</h5></a>
53    
54                <!-- Right elements -->
55            </div>
56            <!-- Container wrapper -->
57            </nav>
58            <!-- Navbar -->
59        `;
60    }
61
62}
63
64customElements.define('header-component', Header);