Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions src/PoFunQuiz.Web/Components/Layout/MainLayout.razor
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -25,6 +31,4 @@
@Body
</div>
</main>

<NavMenu />
</div>
2 changes: 1 addition & 1 deletion src/PoFunQuiz.Web/Components/Layout/MainLayout.razor.css
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
.app-main {
flex: 1;
overflow-y: auto;
padding-bottom: 70px;
padding-bottom: 0;
-webkit-overflow-scrolling: touch;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The property -webkit-overflow-scrolling: touch; is largely obsolete, as modern browsers (including iOS Safari) now provide smooth scrolling by default. Consider removing this property to simplify the stylesheet unless you specifically need to support legacy iOS versions.

Recommendation:

/* Remove this line unless legacy iOS support is required */

position: relative;
}
Expand Down
23 changes: 6 additions & 17 deletions src/PoFunQuiz.Web/Components/Layout/NavMenu.razor
Original file line number Diff line number Diff line change
@@ -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>
}
76 changes: 1 addition & 75 deletions src/PoFunQuiz.Web/Components/Layout/NavMenu.razor.css
Original file line number Diff line number Diff line change
@@ -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);
}
}
6 changes: 0 additions & 6 deletions src/PoFunQuiz.Web/Components/Pages/Home.razor
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
32 changes: 32 additions & 0 deletions src/PoFunQuiz.Web/wwwroot/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}