Theres text just sitting on the page that says
Browse files`; } } customElements.define('custom-navbar', CustomNavbar);
style.css
CHANGED
|
@@ -1,54 +1 @@
|
|
| 1 |
-
|
| 2 |
-
connectedCallback() {
|
| 3 |
-
this.attachShadow({ mode: 'open' });
|
| 4 |
-
this.shadowRoot.innerHTML = `
|
| 5 |
-
<style>
|
| 6 |
-
.navbar {
|
| 7 |
-
background-color: white;
|
| 8 |
-
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
| 9 |
-
}
|
| 10 |
-
.notification-dot {
|
| 11 |
-
width: 8px;
|
| 12 |
-
height: 8px;
|
| 13 |
-
top: -2px;
|
| 14 |
-
right: -2px;
|
| 15 |
-
}
|
| 16 |
-
.profile-img {
|
| 17 |
-
width: 32px;
|
| 18 |
-
height: 32px;
|
| 19 |
-
}
|
| 20 |
-
</style>
|
| 21 |
-
<nav class="navbar px-6 py-4 sticky top-0 z-10">
|
| 22 |
-
<div class="max-w-7xl mx-auto flex items-center justify-between">
|
| 23 |
-
<div class="flex items-center space-x-2">
|
| 24 |
-
<i data-feather="message-square" class="text-blue-600"></i>
|
| 25 |
-
<span class="text-xl font-bold text-blue-600">EduPulse</span>
|
| 26 |
-
</div>
|
| 27 |
-
|
| 28 |
-
<div class="hidden md:flex items-center space-x-6">
|
| 29 |
-
<div class="relative">
|
| 30 |
-
<select class="appearance-none bg-gray-100 border-0 rounded-lg px-4 py-2 pr-8 focus:ring-2 focus:ring-blue-500">
|
| 31 |
-
<option>CS 101</option>
|
| 32 |
-
<option>MATH 202</option>
|
| 33 |
-
<option>PHYS 101</option>
|
| 34 |
-
</select>
|
| 35 |
-
<i data-feather="chevron-down" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 pointer-events-none"></i>
|
| 36 |
-
</div>
|
| 37 |
-
</div>
|
| 38 |
-
|
| 39 |
-
<div class="flex items-center space-x-4">
|
| 40 |
-
<button class="p-2 rounded-full hover:bg-gray-100 relative">
|
| 41 |
-
<i data-feather="bell"></i>
|
| 42 |
-
<span class="notification-dot bg-red-500 rounded-full absolute"></span>
|
| 43 |
-
</button>
|
| 44 |
-
<div class="flex items-center space-x-2">
|
| 45 |
-
<img src="http://static.photos/people/200x200/1" alt="Profile" class="profile-img rounded-full">
|
| 46 |
-
<span class="hidden md:inline font-medium">Student</span>
|
| 47 |
-
</div>
|
| 48 |
-
</div>
|
| 49 |
-
</div>
|
| 50 |
-
</nav>
|
| 51 |
-
`;
|
| 52 |
-
}
|
| 53 |
-
}
|
| 54 |
-
customElements.define('custom-navbar', CustomNavbar);
|
|
|
|
| 1 |
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|