Fix navigation menu not hiding on mobile devices.

This commit is contained in:
2025-09-11 13:57:01 +01:00
parent 07845d979a
commit 57fc4a81c9
4 changed files with 411 additions and 80 deletions

View File

@@ -1,8 +1,11 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
<div class="page"> <div class="page">
<div class="sidebar"> <input id="layout-navbar-toggler" class="navbar-toggler" title="Navigation menu" type="checkbox" />
<NavMenu/> <label for="layout-navbar-toggler" class="navbar-toggler-label" aria-label="Toggle navigation"></label>
<div class="sidebar" id="sidebar-container">
<NavMenu />
</div> </div>
<main> <main>

View File

@@ -1,3 +1,330 @@
.navbar.top-row {
display: flex;
align-items: center;
justify-content: space-between;
height: 3.5rem;
padding: 0 1rem;
position: relative;
}
.navbar-toggler-label {
display: none;
width: 3.5rem;
height: 2.5rem;
cursor: pointer;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
z-index: 1100;
margin: 0;
}
.navbar.top-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 3.5rem;
padding: 0 1rem;
}
.navbar-toggler-label {
display: none;
position: absolute;
left: 1rem;
top: 0.5rem;
width: 3.5rem;
height: 2.5rem;
cursor: pointer;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
z-index: 1100;
}
.navbar .navbar-brand {
color: #fff;
font-size: 1.3rem;
text-decoration: none;
margin-left: auto;
}
.navbar-toggler {
display: none;
}
@media (max-width: 640px) {
.navbar-toggler-label {
display: block;
}
.sidebar {
display: none;
position: fixed;
top: 0;
left: 0;
width: 80vw;
max-width: 350px;
height: 100vh;
z-index: 1000;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
background: #23222a;
transition: transform 0.2s ease;
}
#layout-navbar-toggler:checked + .navbar-toggler-label + .sidebar {
display: block;
}
}
@media (min-width: 641px) {
.navbar-toggler-label {
display: none !important;
}
.sidebar {
display: block;
position: sticky;
top: 0;
width: 350px;
height: 100vh;
z-index: 1;
box-shadow: none;
background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
}
.navbar.top-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 3.5rem;
padding: 0 1rem;
}
.navbar-toggler-label {
display: none;
width: 3.5rem;
height: 2.5rem;
cursor: pointer;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
z-index: 1100;
margin-right: 0.5rem;
}
.navbar .navbar-brand {
color: #fff;
font-size: 1.3rem;
text-decoration: none;
margin-left: auto;
}
.navbar-toggler {
display: none;
}
@media (max-width: 640px) {
.navbar-toggler-label {
display: block;
}
.navbar .navbar-brand {
margin-left: auto;
}
.sidebar {
display: none;
position: fixed;
top: 0;
left: 0;
width: 80vw;
max-width: 350px;
height: 100vh;
z-index: 1000;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
background: #23222a;
transition: transform 0.2s ease;
}
.navbar-toggler:checked ~ .nav-scrollable,
.navbar-toggler:checked ~ nav,
.navbar-toggler:checked ~ .sidebar {
display: block;
}
}
@media (min-width: 641px) {
.navbar-toggler-label {
display: none !important;
}
.sidebar {
display: block;
position: sticky;
top: 0;
width: 350px;
height: 100vh;
z-index: 1;
box-shadow: none;
background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
}
/* Hamburger toggler and Aaru title alignment in sidebar top row */
.navbar.top-row {
display: flex;
flex-direction: row;
align-items: center;
height: 3.5rem;
padding: 0 1rem;
}
.navbar-toggler-label {
display: none;
position: static;
width: 3.5rem;
height: 2.5rem;
cursor: pointer;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
z-index: 1100;
}
.navbar .navbar-brand {
margin-left: auto;
color: #fff;
font-size: 1.3rem;
text-decoration: none;
}
.navbar-toggler {
display: none;
}
@media (max-width: 640px) {
.navbar-toggler-label {
display: block;
}
.navbar .navbar-brand {
margin-left: auto;
}
}
}
@media (min-width: 641px) {
.navbar-toggler-label {
display: none !important;
}
}
/* Remove .aaru-title-bar styles, and ensure .navbar-brand is right-aligned in sidebar */
.navbar .navbar-brand {
margin-left: auto;
color: #fff;
font-size: 1.3rem;
text-decoration: none;
}
/* Aaru title bar styles */
.aaru-title-bar {
position: fixed;
left: 0;
top: 0;
height: 3.5rem;
display: flex;
align-items: center;
z-index: 1050;
width: 100vw;
background: rgba(35, 34, 42, 0.95);
border-bottom: 1px solid #44434a;
padding-left: 4.5rem;
}
.aaru-title-bar .navbar-brand {
font-size: 1.3rem;
color: #fff;
text-decoration: none;
}
@media (min-width: 641px) {
.aaru-title-bar {
left: 350px;
width: calc(100vw - 350px);
padding-left: 2rem;
background: transparent;
color: #23222a;
border-bottom: none;
}
.aaru-title-bar .navbar-brand {
color: #23222a;
}
}
/* Hamburger menu for mobile */
.navbar-toggler-label {
display: none;
position: fixed;
left: 1rem;
width: 3.5rem;
height: 2.5rem;
cursor: pointer;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
z-index: 1100;
}
.navbar-toggler {
display: none;
}
@media (max-width: 640px) {
.navbar-toggler-label {
display: block;
}
.sidebar {
display: none;
position: fixed;
top: 0;
left: 0;
width: 80vw;
max-width: 350px;
height: 100vh;
z-index: 1000;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
background: #23222a;
transition: transform 0.2s ease;
}
.navbar-toggler:checked ~ .sidebar {
display: block;
}
}
@media (min-width: 641px) {
.navbar-toggler-label {
display: none;
}
.sidebar {
display: block;
position: sticky;
top: 0;
width: 350px;
height: 100vh;
z-index: 1;
box-shadow: none;
background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
}
.page { .page {
position: relative; position: relative;
display: flex; display: flex;

View File

@@ -4,67 +4,66 @@
@inject IWebHostEnvironment HostEnvironment @inject IWebHostEnvironment HostEnvironment
@inject IConfiguration Configuration @inject IConfiguration Configuration
<div class="navbar navbar-dark ps-3 top-row"> <div class="navmenu-container">
<div class="container-fluid"> <div class="navbar navbar-dark ps-3 top-row" style="display: flex; align-items: center; justify-content: flex-end;">
<a class="navbar-brand" href="">Aaru</a> <a class="navbar-brand" href="">Aaru</a>
</div> </div>
</div> <!-- Hamburger toggler moved to MainLayout.razor -->
<div class="nav-scrollable">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span aria-hidden="true" class="bi bi-house-door-fill-nav-menu"></span> Home
</NavLink>
</div>
<input class="navbar-toggler" title="Navigation menu" type="checkbox"/> <div class="nav-item px-3">
<NavLink class="nav-link" href="Stats">
<span aria-hidden="true" class="bi bi-graph-up-nav-menu"></span> Statistics
</NavLink>
</div>
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()"> <div class="nav-item px-3 sidebar-nav">
<nav class="flex-column"> @((MarkupString)_sidebarMarkup)
<div class="nav-item px-3"> </div>
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span aria-hidden="true" class="bi bi-house-door-fill-nav-menu"></span> Home
</NavLink>
</div>
<div class="nav-item px-3"> <div class="nav-item px-3">
<NavLink class="nav-link" href="Stats"> <NavLink class="nav-link" href="auth">
<span aria-hidden="true" class="bi bi-graph-up-nav-menu"></span> Statistics <span aria-hidden="true" class="bi bi-lock-nav-menu"></span> Auth Required
</NavLink> </NavLink>
</div> </div>
<div class="nav-item px-3 sidebar-nav"> <AuthorizeView>
@((MarkupString)_sidebarMarkup) <Authorized>
</div> <div class="nav-item px-3">
<NavLink class="nav-link" href="Account/Manage">
<div class="nav-item px-3"> <span aria-hidden="true"
<NavLink class="nav-link" href="auth"> class="bi bi-person-fill-nav-menu"></span> @context.User.Identity?.Name
<span aria-hidden="true" class="bi bi-lock-nav-menu"></span> Auth Required </NavLink>
</NavLink> </div>
</div> <div class="nav-item px-3">
<form action="Account/Logout" method="post">
<AuthorizeView> <AntiforgeryToken />
<Authorized> <input name="ReturnUrl" type="hidden" value="@_currentUrl" />
<div class="nav-item px-3"> <button class="nav-link" type="submit">
<NavLink class="nav-link" href="Account/Manage"> <span aria-hidden="true" class="bi bi-arrow-bar-left-nav-menu"></span> Logout
<span aria-hidden="true" class="bi bi-person-fill-nav-menu"></span> @context.User.Identity?.Name </button>
</NavLink> </form>
</div> </div>
<div class="nav-item px-3"> </Authorized>
<form action="Account/Logout" method="post"> <NotAuthorized>
<AntiforgeryToken/> <div class="nav-item px-3">
<input name="ReturnUrl" type="hidden" value="@_currentUrl"/> <NavLink class="nav-link" href="Account/Register">
<button class="nav-link" type="submit"> <span aria-hidden="true" class="bi bi-person-nav-menu"></span> Register
<span aria-hidden="true" class="bi bi-arrow-bar-left-nav-menu"></span> Logout </NavLink>
</button> </div>
</form> <div class="nav-item px-3">
</div> <NavLink class="nav-link" href="Account/Login">
</Authorized> <span aria-hidden="true" class="bi bi-person-badge-nav-menu"></span> Login
<NotAuthorized> </NavLink>
<div class="nav-item px-3"> </div>
<NavLink class="nav-link" href="Account/Register"> </NotAuthorized>
<span aria-hidden="true" class="bi bi-person-nav-menu"></span> Register </AuthorizeView>
</NavLink> </nav>
</div> </div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="Account/Login">
<span aria-hidden="true" class="bi bi-person-badge-nav-menu"></span> Login
</NavLink>
</div>
</NotAuthorized>
</AuthorizeView>
</nav>
</div> </div>

View File

@@ -1,3 +1,23 @@
.navbar-toggler-label {
display: block;
position: absolute;
top: 0.5rem;
right: 1rem;
width: 3.5rem;
height: 2.5rem;
cursor: pointer;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
z-index: 10;
}
@media (min-width: 641px) {
.navbar-toggler-label {
display: none;
}
}
.navbar-toggler { .navbar-toggler {
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
@@ -84,7 +104,7 @@
} }
.nav-item ::deep .nav-link { .nav-item ::deep .nav-link {
color: #d7d7d7; color: rgb(195, 39, 39) !important;
background: none; background: none;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
@@ -93,6 +113,8 @@
align-items: center; align-items: center;
line-height: 3rem; line-height: 3rem;
width: 100%; width: 100%;
font-weight: bold;
text-decoration: none !important;
} }
.nav-item ::deep a.active { .nav-item ::deep a.active {
@@ -105,25 +127,5 @@
color: white; color: white;
} }
.nav-scrollable {
display: none;
}
.navbar-toggler:checked ~ .nav-scrollable {
display: block;
}
@media (min-width: 641px) {
.navbar-toggler {
display: none;
}
.nav-scrollable {
/* Never collapse the sidebar for wide screens */
display: block;
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
}