From 78f88822bcda3bae87b3c23237078408ab664922 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 1 Mar 2026 17:21:59 +0000
Subject: [PATCH 1/2] Initial plan


From abab4312f02c014c96c07b4bb199a99c8eb413d2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 1 Mar 2026 17:27:27 +0000
Subject: [PATCH 2/2] Move Home/Leaderboard icons from bottom nav to top nav;
 show PoFunQuiz title in top nav

Co-authored-by: punkouter26 <121304072+punkouter26@users.noreply.github.com>
---
 .../Components/Layout/MainLayout.razor        | 20 +++--
 .../Components/Layout/MainLayout.razor.css    |  2 +-
 .../Components/Layout/NavMenu.razor           | 23 ++----
 .../Components/Layout/NavMenu.razor.css       | 76 +------------------
 src/PoFunQuiz.Web/Components/Pages/Home.razor |  6 --
 src/PoFunQuiz.Web/wwwroot/app.css             | 32 ++++++++
 6 files changed, 52 insertions(+), 107 deletions(-)

diff --git a/src/PoFunQuiz.Web/Components/Layout/MainLayout.razor b/src/PoFunQuiz.Web/Components/Layout/MainLayout.razor
index 30f8e4a..d039560 100644
--- a/src/PoFunQuiz.Web/Components/Layout/MainLayout.razor
+++ b/src/PoFunQuiz.Web/Components/Layout/MainLayout.razor
@@ -11,12 +11,18 @@
 <div class="app-layout">
     <header class="app-header">
         <div class="header-content">
-            <SectionOutlet SectionName="HeaderContent" />
-            <!-- Default Header Content if Section is empty (Fallback logic would require more complex state, 
-                 so we'll just put the default title in the Home page's SectionContent or use a default here if empty) -->
-             <div class="default-header" style="display: none;"> <!-- Hidden by default, pages should provide content -->
-                <span class="app-title" @onclick="@(() => NavigationManager.NavigateTo("/"))">PoFunQuiz</span>
-             </div>
+            <span class="app-title" role="button" tabindex="0"
+                  @onclick="@(() => NavigationManager.NavigateTo("/"))"
+                  @onkeydown="@((e) => { if (e.Key == "Enter" || e.Key == " ") NavigationManager.NavigateTo("/"); })">PoFunQuiz</span>
+            <nav class="top-nav">
+                <NavLink class="top-nav-item" href="" Match="NavLinkMatch.All">
+                    <span class="material-icons">home</span>
+                </NavLink>
+                <NavLink class="top-nav-item" href="leaderboard">
+                    <span class="material-icons">emoji_events</span>
+                </NavLink>
+                <NavMenu />
+            </nav>
         </div>
     </header>
 
@@ -25,6 +31,4 @@
             @Body
         </div>
     </main>
-
-    <NavMenu />
 </div>
diff --git a/src/PoFunQuiz.Web/Components/Layout/MainLayout.razor.css b/src/PoFunQuiz.Web/Components/Layout/MainLayout.razor.css
index 36dc10c..0a8d8f5 100644
--- a/src/PoFunQuiz.Web/Components/Layout/MainLayout.razor.css
+++ b/src/PoFunQuiz.Web/Components/Layout/MainLayout.razor.css
@@ -37,7 +37,7 @@
 .app-main {
     flex: 1;
     overflow-y: auto;
-    padding-bottom: 70px;
+    padding-bottom: 0;
     -webkit-overflow-scrolling: touch;
     position: relative;
 }
diff --git a/src/PoFunQuiz.Web/Components/Layout/NavMenu.razor b/src/PoFunQuiz.Web/Components/Layout/NavMenu.razor
index fa0c240..9ca7031 100644
--- a/src/PoFunQuiz.Web/Components/Layout/NavMenu.razor
+++ b/src/PoFunQuiz.Web/Components/Layout/NavMenu.razor
@@ -1,19 +1,8 @@
-@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment Env
+@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment Env
 
-<nav class="bottom-nav">
-    <NavLink class="nav-item" href="" Match="NavLinkMatch.All">
-        <span class="material-icons">home</span>
-        <span class="nav-label">Home</span>
+@if (Env.IsDevelopment())
+{
+    <NavLink class="top-nav-item" href="diag">
+        <span class="material-icons">settings</span>
     </NavLink>
-    <NavLink class="nav-item" href="leaderboard">
-        <span class="material-icons">emoji_events</span>
-        <span class="nav-label">Leaderboard</span>
-    </NavLink>
-    @if (Env.IsDevelopment())
-    {
-        <NavLink class="nav-item" href="diag">
-            <span class="material-icons">settings</span>
-            <span class="nav-label">Diag</span>
-        </NavLink>
-    }
-</nav>
+}
diff --git a/src/PoFunQuiz.Web/Components/Layout/NavMenu.razor.css b/src/PoFunQuiz.Web/Components/Layout/NavMenu.razor.css
index b316f99..31086df 100644
--- a/src/PoFunQuiz.Web/Components/Layout/NavMenu.razor.css
+++ b/src/PoFunQuiz.Web/Components/Layout/NavMenu.razor.css
@@ -1,76 +1,2 @@
-.bottom-nav {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    background-color: #ffffff;
-    border-top: 1px solid #e0e0e0;
-    height: 60px;
-    width: 100%;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    z-index: 1000;
-    padding-bottom: env(safe-area-inset-bottom);
-    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
-}
+/* NavMenu — Diag link rendered inside top-nav (styles inherited from global top-nav-item) */
 
-.nav-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
-    color: #9e9e9e;
-    font-size: 0.7rem;
-    flex: 1;
-    max-width: 25%;
-    height: 100%;
-    transition: color 0.2s ease;
-    overflow: hidden;
-}
-
-.nav-item:hover {
-    background-color: rgba(0,0,0,0.02);
-}
-
-.nav-item.active {
-    color: var(--rz-primary);
-}
-
-.nav-item .material-icons {
-    font-size: 22px;
-    margin-bottom: 2px;
-}
-
-.nav-label {
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-}
-
-@media (max-width: 360px) {
-    .nav-label {
-        display: none;
-    }
-    .nav-item .material-icons {
-        font-size: 26px;
-        margin-bottom: 0;
-    }
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-    .bottom-nav {
-        background-color: #1e293b;
-        border-top-color: #334155;
-        box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
-    }
-    .nav-item {
-        color: #64748b;
-    }
-    .nav-item.active {
-        color: var(--rz-primary-light, #818cf8);
-    }
-}
diff --git a/src/PoFunQuiz.Web/Components/Pages/Home.razor b/src/PoFunQuiz.Web/Components/Pages/Home.razor
index bed3cc9..3ca5571 100644
--- a/src/PoFunQuiz.Web/Components/Pages/Home.razor
+++ b/src/PoFunQuiz.Web/Components/Pages/Home.razor
@@ -4,12 +4,6 @@
 
 <PageTitle>PoFunQuiz</PageTitle>
 
-<SectionContent SectionName="HeaderContent">
-    <div class="d-flex align-items-center">
-        <span class="app-title">PoFunQuiz</span>
-    </div>
-</SectionContent>
-
 <div class="landing-container">
     <div class="landing-hero">
         <div class="landing-logo">
diff --git a/src/PoFunQuiz.Web/wwwroot/app.css b/src/PoFunQuiz.Web/wwwroot/app.css
index 97c4aa6..e4076f1 100644
--- a/src/PoFunQuiz.Web/wwwroot/app.css
+++ b/src/PoFunQuiz.Web/wwwroot/app.css
@@ -497,4 +497,36 @@ body {
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
     }
+}
+
+/* ── Top Navigation ───────────────────────────── */
+.top-nav {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.top-nav-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.9);
+    text-decoration: none;
+    padding: 0.4rem;
+    border-radius: 6px;
+    transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.top-nav-item:hover {
+    color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
+.top-nav-item.active {
+    color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.top-nav-item .material-icons {
+    font-size: 22px;
 }
\ No newline at end of file