feat: Complete navigation system overhaul with new features

.github/workflows/build-and-test.yml

@@ -1,9 +1,10 @@
 name: Build and Test
 
-# Run on PRs and pushes to any branch
+# Run on PRs to main and direct pushes to main
+# This avoids duplicate runs when pushing to a PR branch
 on:
   push:
-    branches: [ '**' ]
+    branches: [ main ]
   pull_request:
     branches: [ main ]
 

.gitignore

@@ -385,4 +385,4 @@ FodyWeavers.xsd
 *.sln.iml
 
 # macOS
-.DS_Store
+.DS_Storescreenshots/

Layout/MainLayout.razor

@@ -1,7 +1,16 @@
 @inherits LayoutComponentBase
 @inject IJSRuntime JSRuntime
 
-<div class="animated-bg"></div>
+<div class="animated-bg">
+    <div class="bitcoin-bg-symbol">₿</div>
+    <div class="bitcoin-bg-symbol">₿</div>
+    <div class="bitcoin-bg-symbol">₿</div>
+    <div class="bitcoin-bg-symbol">₿</div>
+    <div class="bitcoin-bg-symbol">₿</div>
+    <div class="bitcoin-bg-symbol">₿</div>
+    <div class="bitcoin-bg-symbol">₿</div>
+    <div class="bitcoin-bg-symbol">₿</div>
+</div>
 <div class="particles" id="global-particles"></div>
 
 <div class="page">
@@ -27,6 +36,7 @@
 }
 
 <style>
+    /* Enhanced animated background with dark pink and bitcoin colors */
     .animated-bg {
         position: fixed;
         top: 0;
@@ -38,43 +48,59 @@
         overflow: hidden;
     }
 
+    /* Vibrant dark orange gradient layers - the future is bright and orange */
     .animated-bg::before {
         content: '';
         position: absolute;
-        top: -50%;
-        left: -50%;
-        width: 200%;
-        height: 200%;
+        top: -100%;
+        left: -100%;
+        width: 300%;
+        height: 300%;
         background: 
-            radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
-            radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.08) 0%, transparent 50%),
-            radial-gradient(circle at 40% 20%, rgba(34, 197, 94, 0.06) 0%, transparent 50%),
-            radial-gradient(circle at 90% 10%, rgba(251, 191, 36, 0.06) 0%, transparent 50%);
-        animation: bgFloat 30s ease-in-out infinite;
+            radial-gradient(circle at 20% 50%, rgba(255, 140, 0, 0.15) 0%, transparent 50%),
+            radial-gradient(circle at 80% 80%, rgba(247, 147, 26, 0.12) 0%, transparent 50%),
+            radial-gradient(circle at 40% 20%, rgba(255, 165, 0, 0.1) 0%, transparent 50%),
+            radial-gradient(circle at 90% 10%, rgba(255, 140, 0, 0.08) 0%, transparent 40%),
+            radial-gradient(circle at 60% 60%, rgba(220, 110, 30, 0.15) 0%, transparent 60%),
+            radial-gradient(circle at 30% 70%, rgba(240, 120, 20, 0.1) 0%, transparent 45%),
+            radial-gradient(circle at 50% 90%, rgba(255, 165, 0, 0.12) 0%, transparent 35%);
+        animation: bgFloat 40s ease-in-out infinite;
+        filter: blur(60px);
+        opacity: 0.9;
     }
 
-    .animated-bg::after {
-        content: '';
+    /* Bitcoin symbols with orange glow - embracing the bright orange future */
+    .bitcoin-bg-symbol {
         position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: 
-            repeating-linear-gradient(
-                90deg,
-                transparent,
-                transparent 2px,
-                rgba(139, 92, 246, 0.03) 2px,
-                rgba(139, 92, 246, 0.03) 4px
-            ),
-            repeating-linear-gradient(
-                0deg,
-                transparent,
-                transparent 2px,
-                rgba(236, 72, 153, 0.03) 2px,
-                rgba(236, 72, 153, 0.03) 4px
-            );
+        font-size: 50px;
+        color: rgba(255, 140, 0, 0.3);
+        font-weight: 700;
+        animation: floatSymbol 45s infinite ease-in-out, orangePulse 10s ease-in-out infinite, rotate 90s linear infinite;
+        pointer-events: none;
+        user-select: none;
+        text-shadow: 
+            0 0 20px rgba(255, 140, 0, 0.4),
+            0 0 40px rgba(247, 147, 26, 0.2),
+            0 0 60px rgba(255, 165, 0, 0.1);
+        opacity: 0.6;
+    }
+
+    .bitcoin-bg-symbol:nth-child(1) { left: 15%; top: 10%; animation-delay: 0s; font-size: 60px; }
+    .bitcoin-bg-symbol:nth-child(2) { left: 85%; top: 75%; animation-delay: 5s; font-size: 45px; }
+    .bitcoin-bg-symbol:nth-child(3) { left: 25%; top: 85%; animation-delay: 10s; font-size: 55px; }
+    .bitcoin-bg-symbol:nth-child(4) { left: 75%; top: 25%; animation-delay: 15s; font-size: 50px; }
+    .bitcoin-bg-symbol:nth-child(5) { left: 50%; top: 50%; animation-delay: 20s; font-size: 70px; }
+    .bitcoin-bg-symbol:nth-child(6) { left: 5%; top: 45%; animation-delay: 25s; font-size: 40px; }
+    .bitcoin-bg-symbol:nth-child(7) { left: 95%; top: 35%; animation-delay: 30s; font-size: 48px; }
+    .bitcoin-bg-symbol:nth-child(8) { left: 45%; top: 5%; animation-delay: 35s; font-size: 52px; }
+
+    /* Floating orbs layer */
+    .animated-bg > .orb {
+        position: absolute;
+        border-radius: 50%;
+        filter: blur(80px);
+        opacity: 0.4;
+        animation: orbFloat 20s ease-in-out infinite;
     }
 
     .particles {
@@ -96,9 +122,15 @@
     }
 
     .sidebar {
-        background: var(--card) !important;
-        border-right: 1px solid var(--border);
+        background: linear-gradient(180deg, 
+            rgba(26, 26, 26, 0.95) 0%, 
+            rgba(42, 26, 10, 0.9) 50%, 
+            rgba(26, 26, 26, 0.95) 100%) !important;
+        backdrop-filter: blur(20px);
+        border-right: 1px solid var(--dark-orange-glow);
         min-height: 100vh;
+        transition: transform 0.3s ease;
+        box-shadow: 0 0 20px rgba(255, 140, 0, 0.1);
     }
 
     main {
@@ -110,18 +142,138 @@
         background: transparent;
     }
 
+    /* Enhanced animations */
     @@keyframes bgFloat {
         0%, 100% {
             transform: translate(0, 0) rotate(0deg) scale(1);
         }
+        20% {
+            transform: translate(-50px, -50px) rotate(45deg) scale(1.2);
+        }
+        40% {
+            transform: translate(50px, -100px) rotate(90deg) scale(1.1);
+        }
+        60% {
+            transform: translate(-100px, 50px) rotate(180deg) scale(1.3);
+        }
+        80% {
+            transform: translate(100px, 100px) rotate(270deg) scale(1.15);
+        }
+    }
+
+    @@keyframes floatSymbol {
+        0%, 100% {
+            transform: translate(0, 0) scale(1);
+        }
         25% {
-            transform: translate(-30px, -30px) rotate(1deg) scale(1.1);
+            transform: translate(20px, -20px) scale(1.05);
         }
         50% {
-            transform: translate(20px, -40px) rotate(-1deg) scale(1.05);
+            transform: translate(-15px, 15px) scale(0.95);
         }
         75% {
-            transform: translate(-20px, 20px) rotate(2deg) scale(1.15);
+            transform: translate(25px, 5px) scale(1.02);
+        }
+    }
+
+    @@keyframes fadeInOut {
+        0%, 100% {
+            opacity: 0.05;
+        }
+        50% {
+            opacity: 0.15;
+        }
+    }
+
+    @@keyframes rotate {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    @@keyframes orangePulse {
+        0%, 100% {
+            opacity: 0.3;
+            text-shadow: 
+                0 0 20px rgba(255, 140, 0, 0.4),
+                0 0 40px rgba(247, 147, 26, 0.2),
+                0 0 60px rgba(255, 165, 0, 0.1);
+        }
+        50% {
+            opacity: 0.8;
+            text-shadow: 
+                0 0 30px rgba(255, 140, 0, 0.6),
+                0 0 60px rgba(247, 147, 26, 0.4),
+                0 0 90px rgba(255, 165, 0, 0.2);
+        }
+    }
+
+    @@keyframes orbFloat {
+        0%, 100% {
+            transform: translate(0, 0) scale(1);
+        }
+        33% {
+            transform: translate(100px, -100px) scale(1.2);
+        }
+        66% {
+            transform: translate(-100px, 100px) scale(0.8);
+        }
+    }
+
+    @@keyframes pulse {
+        0%, 100% {
+            opacity: 0.2;
+            filter: brightness(1);
+        }
+        50% {
+            opacity: 0.3;
+            filter: brightness(1.2);
+        }
+    }
+
+    /* Mobile-specific adjustments */
+    @@media (max-width: 768px) {
+        .sidebar {
+            position: fixed;
+            left: 0;
+            top: 0;
+            width: 250px;
+            transform: translateX(-100%);
+            z-index: 1000;
+        }
+
+        .sidebar.open {
+            transform: translateX(0);
+        }
+
+        /* Reduce animation complexity on mobile for performance */
+        .animated-bg::before {
+            filter: blur(60px);
+            animation-duration: 45s;
+        }
+
+        .animated-bg::after {
+            display: none;
+        }
+    }
+
+    /* High contrast mode support */
+    @@media (prefers-contrast: high) {
+        .animated-bg::before,
+        .animated-bg::after {
+            opacity: 0.5;
+        }
+    }
+
+    /* Reduced motion support */
+    @@media (prefers-reduced-motion: reduce) {
+        .animated-bg::before,
+        .animated-bg::after,
+        .particles * {
+            animation: none !important;
         }
     }
 </style>

Layout/MainLayout.razor.css

@@ -52,7 +52,7 @@ main {
     }
 
     .sidebar {
-        width: 250px;
+        width: 280px;
         height: 100vh;
         position: sticky;
         top: 0;