WiktorWox/indiegameglobe-explorer

1class CustomNavbar extends HTMLElement {
2  connectedCallback() {
3    this.attachShadow({ mode: 'open' });
4    this.shadowRoot.innerHTML = `
5      <style>
6        :host {
7          display: block;
8          position: fixed;
9          top: 0;
10          left: 0;
11          right: 0;
12          z-index: 1000;
13          background: rgba(49, 37, 37, 0.9);
14backdrop-filter: blur(10px);
15          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
16        }
17
18        nav {
19          max-width: 1200px;
20          margin: 0 auto;
21          padding: 1rem 2rem;
22          display: flex;
23          justify-content: space-between;
24          align-items: center;
25        }
26
27        .logo {
28          font-family: 'Press Start 2P', cursive;
29          font-size: 1.25rem;
30          color: white;
31          font-weight: bold;
32          letter-spacing: 1px;
33        }
34
35        .nav-links {
36          display: flex;
37          gap: 2rem;
38          list-style: none;
39          margin: 0;
40          padding: 0;
41        }
42
43        a {
44          color: white;
45          text-decoration: none;
46          font-weight: 500;
47          position: relative;
48          padding: 0.5rem 0;
49        }
50
51        a::after {
52          content: '';
53          position: absolute;
54          bottom: 0;
55          left: 0;
56          width: 0;
57          height: 2px;
58          background-color: #d99859;
59transition: width 0.3s ease;
60        }
61
62        a:hover::after {
63          width: 100%;
64        }
65
66        .mobile-menu-button {
67          display: none;
68          background: none;
69          border: none;
70          color: white;
71          cursor: pointer;
72        }
73
74        @media (max-width: 768px) {
75          .nav-links {
76            display: none;
77          }
78
79          .mobile-menu-button {
80            display: block;
81          }
82        }
83      </style>
84
85      <nav>
86        <div class="relative z-10 max-w-4xl mx-auto text-center px-4 py-8">
87            <div class="flex justify-center mb-8">
88                <img src="https://wiktorwox.pl/images/567x323/WiktorWox_logo.png" width="70">
89            </div>
90        </div>
91
92        <button class="mobile-menu-button" onclick="toggleMobileMenu()">
93          <i data-feather="menu"></i>
94        </button>
95
96        <ul class="nav-links">
97          <li><a href="#główna">Główna</a></li>
98          <li><a href="#o-mnie">Kim Ja Jestem?</a></li>
99          <li><a href="#harmonogram">Harmonogram</a></li>
100          <li><a href="#kontakt">Kontakt</a></li>
101        </ul>
102      </nav>
103    `;
104  }
105}
106
107customElements.define('custom-navbar', CustomNavbar);