mirror of
https://github.com/aaru-dps/Aaru.Server.git
synced 2025-12-16 19:24:27 +00:00
Fix navigation menu not hiding on mobile devices.
This commit is contained in:
@@ -1,8 +1,11 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu/>
|
||||
<input id="layout-navbar-toggler" class="navbar-toggler" title="Navigation menu" type="checkbox" />
|
||||
<label for="layout-navbar-toggler" class="navbar-toggler-label" aria-label="Toggle navigation"></label>
|
||||
<div class="sidebar" id="sidebar-container">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<main>
|
||||
|
||||
@@ -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 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@@ -4,67 +4,66 @@
|
||||
@inject IWebHostEnvironment HostEnvironment
|
||||
@inject IConfiguration Configuration
|
||||
|
||||
<div class="navbar navbar-dark ps-3 top-row">
|
||||
<div class="container-fluid">
|
||||
<div class="navmenu-container">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input class="navbar-toggler" title="Navigation menu" type="checkbox"/>
|
||||
|
||||
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
|
||||
<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>
|
||||
|
||||
<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-item px-3 sidebar-nav">
|
||||
@((MarkupString)_sidebarMarkup)
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="auth">
|
||||
<span aria-hidden="true" class="bi bi-lock-nav-menu"></span> Auth Required
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="Account/Manage">
|
||||
<span aria-hidden="true" class="bi bi-person-fill-nav-menu"></span> @context.User.Identity?.Name
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<form action="Account/Logout" method="post">
|
||||
<AntiforgeryToken/>
|
||||
<input name="ReturnUrl" type="hidden" value="@_currentUrl"/>
|
||||
<button class="nav-link" type="submit">
|
||||
<span aria-hidden="true" class="bi bi-arrow-bar-left-nav-menu"></span> Logout
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="Account/Register">
|
||||
<span aria-hidden="true" class="bi bi-person-nav-menu"></span> Register
|
||||
</NavLink>
|
||||
</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>
|
||||
<!-- 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>
|
||||
|
||||
<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-item px-3 sidebar-nav">
|
||||
@((MarkupString)_sidebarMarkup)
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="auth">
|
||||
<span aria-hidden="true" class="bi bi-lock-nav-menu"></span> Auth Required
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="Account/Manage">
|
||||
<span aria-hidden="true"
|
||||
class="bi bi-person-fill-nav-menu"></span> @context.User.Identity?.Name
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<form action="Account/Logout" method="post">
|
||||
<AntiforgeryToken />
|
||||
<input name="ReturnUrl" type="hidden" value="@_currentUrl" />
|
||||
<button class="nav-link" type="submit">
|
||||
<span aria-hidden="true" class="bi bi-arrow-bar-left-nav-menu"></span> Logout
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="Account/Register">
|
||||
<span aria-hidden="true" class="bi bi-person-nav-menu"></span> Register
|
||||
</NavLink>
|
||||
</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>
|
||||
@@ -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 {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
@@ -84,7 +104,7 @@
|
||||
}
|
||||
|
||||
.nav-item ::deep .nav-link {
|
||||
color: #d7d7d7;
|
||||
color: rgb(195, 39, 39) !important;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
@@ -93,6 +113,8 @@
|
||||
align-items: center;
|
||||
line-height: 3rem;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.nav-item ::deep a.active {
|
||||
@@ -105,25 +127,5 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user