File size: 2,310 Bytes
d51dbe5 67c755a c16c4cc 67c755a d51dbe5 67c755a d51dbe5 c368f70 67c755a d51dbe5 c16c4cc d51dbe5 c16c4cc d51dbe5 c16c4cc d51dbe5 c16c4cc d51dbe5 67c755a d51dbe5 c16c4cc d51dbe5 c16c4cc d51dbe5 67c755a d51dbe5 67c755a c16c4cc d51dbe5 298c3e1 35d793a 1f36718 0b696ef 4a97429 a7925d7 298c3e1 d51dbe5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
nav {
background: rgba(0, 0, 0, 0.98);
backdrop-filter: blur(4px);
padding: 0.75rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #10b981;
position: relative;
z-index: 50;
}
.logo {
color: #10b981;
font-weight: bold;
font-size: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.logo-icon {
width: 20px;
height: 20px;
color: #4299e1;
}
ul {
display: flex;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
a {
color: #10b981;
text-decoration: none;
transition: all 0.2s;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
}
a:hover {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.active {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
@media (max-width: 768px) {
nav {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
ul {
width: 100%;
justify-content: space-around;
}
}
</style>
<nav>
<a href="/" class="logo">
<i data-feather="pen-tool" class="logo-icon"></i>
<span>Mrs T's Funhouse</span>
</a>
<ul>
<li><a href="/" class="active"><i data-feather="home"></i> Dashboard</a></li>
<li><a href="/create.html"><i data-feather="plus"></i> Create</a></li>
<li><a href="/projects.html"><i data-feather="folder"></i> Projects</a></li>
<li><a href="/help.html"><i data-feather="help-circle"></i> Help</a></li>
<li><a href="/download.html"><i data-feather="download"></i> Download</a></li>
</ul>
</nav>
`;
}
}
customElements.define('custom-navbar', CustomNavbar); |