Reworked Navbar

flightscore/src/components/nav-bar.css

@@ -1,76 +1,98 @@
 nav {
-    backdrop-filter: blur(10px);
+  backdrop-filter: blur(18px) saturate(180%);
+  -webkit-backdrop-filter: blur(18px) saturate(180%);
   background: var(--color-bg-nav);
   border-bottom: 1px solid var(--color-border);
   display: flex;
   justify-content: space-between;
   align-items: center;
-    padding: 0.75rem 1.5rem;
+  padding: 0 2rem;
+  height: 3.5rem;
   position: sticky;
   top: 0;
   z-index: 100;
+  transition: background 0.3s ease;
 }
 
 .brand {
-    font-weight: 700;
-    font-size: 1.1rem;
-    user-select: none;
-    width: fit-content;
   display: flex;
-    justify-content: center;
   align-items: center;
-        padding-right: 1rem;
-
+  gap: 0.65rem;
+  user-select: none;
+  cursor: default;
 }
 
 .brand img {
   width: auto;
-    height: 2rem;
-    padding-right: 1rem;
+  height: 1.6rem;
+  flex-shrink: 0;
+}
+
+.brand span {
+  font-weight: 700;
+  font-size: 1.05rem;
+  letter-spacing: -0.02em;
+  background: linear-gradient(
+    135deg,
+    var(--color-text) 0%,
+    var(--color-accent) 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 .links {
   display: flex;
-    gap: 1.25rem;
+  gap: 1.75rem;
   align-items: center;
 }
 
-.links a {
-    text-decoration: none;
-}
-
-a {
-    color: var(--color-text);
-    font-weight: 500;
+.theme-toggle {
   position: relative;
-}
-
-a::after {
-    content: '';
-    position: absolute;
-    bottom: -6px;
-    left: 0;
-    width: 0%;
-    height: 2px;
-    background: var(--color-accent);
-    transition: 0.3s ease;
-}
-
-a:hover::after {
-    width: 100%;
-}
-
-button {
-    background: none;
+  display: grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  margin-left: 0.5rem;
+  background: transparent;
   border: 1px solid var(--color-border);
-    border-radius: 5px;
-    padding: 0.4rem 0.6rem;
+  border-radius: 0.5rem;
   color: var(--color-text);
   cursor: pointer;
-    transition: all 0.3s ease;
+  transition:
+    border-color 0.25s ease,
+    color 0.25s ease,
+    background 0.25s ease,
+    transform 0.2s ease;
+  overflow: hidden;
 }
 
-button:hover {
+.theme-toggle:hover {
   border-color: var(--color-accent);
   color: var(--color-accent);
+  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
+  transform: scale(1.05);
+}
+
+.theme-toggle:active {
+  transform: scale(0.95);
+}
+
+.icon {
+  position: absolute;
+  width: 1.1rem;
+  height: 1.1rem;
+  opacity: 0;
+  transform: rotate(-90deg) scale(0.6);
+  transition:
+    opacity 0.35s ease,
+    transform 0.35s ease;
+  pointer-events: none;
+}
+
+.icon.visible {
+  opacity: 1;
+  transform: rotate(0deg) scale(1);
 }

flightscore/src/components/nav-bar.ts

@@ -23,24 +23,52 @@ export class NavBar extends LitElement {
     localStorage.setItem('theme', this.theme);
   }
 
-  navigate(path: string) {
-    this.dispatchEvent(
-      new CustomEvent('nav', { detail: { path }, bubbles: true, composed: true })
-    );
-  }
-
   render() {
     return html`
       <nav>
-        <div class="brand"><img src="/logo.svg" alt="Flight Score Logo" /> FlightScore</div>
+        <div class="brand">
+          <img src="/logo.svg" alt="Flight Score Logo" />
+          <span>FlightScore</span>
+        </div>
         <div class="links">
           <ui-link href="/">Home</ui-link>
           <ui-link href="/competitions">Competitions</ui-link>
           <ui-link href="/login">Login</ui-link>
-      
-      
-          <button @click=${this.toggleTheme}>
-            ${this.theme === 'light' ? '🌙 Dark' : '☀️ Light'}
+          <button
+            class="theme-toggle"
+            @click=${this.toggleTheme}
+            aria-label="Toggle theme"
+          >
+            <svg
+              class="icon ${this.theme === 'light' ? 'visible' : ''}"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z" />
+            </svg>
+            <svg
+              class="icon ${this.theme === 'dark' ? 'visible' : ''}"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="12" cy="12" r="5" />
+              <line x1="12" y1="1" x2="12" y2="3" />
+              <line x1="12" y1="21" x2="12" y2="23" />
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+              <line x1="1" y1="12" x2="3" y2="12" />
+              <line x1="21" y1="12" x2="23" y2="12" />
+              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+            </svg>
           </button>
         </div>
       </nav>

flightscore/src/components/ui-link.css

@@ -2,20 +2,29 @@ a {
   position: relative;
   color: var(--color-text);
   font-weight: 500;
+  font-size: 0.9rem;
+  letter-spacing: 0.01em;
   text-decoration: none;
-  transition: color 0.25s ease;
   display: inline-block;
+  padding: 0.25rem 0;
+  transition: color 0.25s ease;
 }
 
 a::after {
-  content: '';
+  content: "";
   position: absolute;
-  left: 0;
-  bottom: -2px;
-  width: 0%;
+  left: 50%;
+  bottom: -1px;
+  width: 0;
   height: 2px;
   background: var(--color-accent);
-  transition: width 0.3s ease;
+  border-radius: 1px;
+  transform: translateX(-50%);
+  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+a:hover {
+  color: var(--color-accent);
 }
 
 a:hover::after,