Default layout, Responsive sidebar
This commit is contained in:
Andre Beging
30
FoodsharingSiegen.Server/Shared/DefaultLayout.razor
Normal file
30
FoodsharingSiegen.Server/Shared/DefaultLayout.razor
Normal file
@@ -0,0 +1,30 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<PageTitle>FoodsharingSiegen.Server</PageTitle>
|
||||
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
<div class="page">
|
||||
<input type="checkbox" id="menu-toggler"/>
|
||||
<label id="menu-toggler-label" for="menu-toggler">
|
||||
|
||||
<span class="menu-toggler-line"></span>
|
||||
<span class="menu-toggler-line"></span>
|
||||
<span class="menu-toggler-line"></span>
|
||||
</label>
|
||||
|
||||
<aside>
|
||||
<NavMenu/>
|
||||
</aside>
|
||||
<main>
|
||||
@Body
|
||||
</main>
|
||||
</div>
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<RedirectToLogin/>
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>
|
||||
|
||||
<NotificationAlert/>
|
||||
<MessageAlert/>
|
||||
102
FoodsharingSiegen.Server/Shared/DefaultLayout.razor.css
Normal file
102
FoodsharingSiegen.Server/Shared/DefaultLayout.razor.css
Normal file
@@ -0,0 +1,102 @@
|
||||
.page {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.page aside {
|
||||
background-color: #f1e7c9;
|
||||
width: 0;
|
||||
box-shadow: 5px 5px 5px #acacac;
|
||||
transition: width 250ms;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.page aside {
|
||||
width: 250px;
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.page main {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: hidden auto;
|
||||
padding: 60px 10px 10px 10px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.page main {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
#menu-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu-toggler-label {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
#menu-toggler-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#menu-toggler-label span {
|
||||
height: 6px;
|
||||
background-color: #64ae24;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition: all 0.25s ease-out;
|
||||
}
|
||||
|
||||
#menu-toggler-label span:nth-child(2) {
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
#menu-toggler-label span:nth-child(3) {
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
input:checked ~ aside {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
input:checked ~ #menu-toggler-label span:nth-child(1) {
|
||||
transform: translateY(12px) rotate(45deg);
|
||||
}
|
||||
|
||||
input:checked ~ #menu-toggler-label span:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:checked ~ #menu-toggler-label span:nth-child(3) {
|
||||
transform: translateY(-12px) rotate(-45deg);
|
||||
}
|
||||
|
||||
::deep h2 {
|
||||
font-size: 7.8vw;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
::deep h2 {
|
||||
font-size: 4.8vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
::deep h2 {
|
||||
font-size: 3.6vw;
|
||||
}
|
||||
}
|
||||
96
FoodsharingSiegen.Server/Shared/DefaultLayout.razor.scss
Normal file
96
FoodsharingSiegen.Server/Shared/DefaultLayout.razor.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
@import '../Style/_variables';
|
||||
|
||||
$sidebarBreakpoint: $breakpointM;
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
|
||||
aside {
|
||||
background-color: #f1e7c9;
|
||||
width: 0;
|
||||
box-shadow: 5px 5px 5px #acacac;
|
||||
transition: width 250ms;
|
||||
overflow: hidden auto;
|
||||
|
||||
@media screen and (min-width: #{$sidebarBreakpoint}px) {
|
||||
width: 250px;
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: hidden auto;
|
||||
padding: 60px 10px 10px 10px;
|
||||
|
||||
@media screen and (min-width: #{$sidebarBreakpoint}px) {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#menu-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu-toggler-label {
|
||||
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
z-index: 1;
|
||||
|
||||
@media screen and (min-width: #{$sidebarBreakpoint}px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
height: 6px;
|
||||
background-color: #64ae24;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition: all 0.25s ease-out;
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:checked ~ aside {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
input:checked ~ #menu-toggler-label span {
|
||||
&:nth-child(1) {
|
||||
transform: translateY(12px) rotate(45deg);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: translateY(-12px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
::deep {
|
||||
h2 {
|
||||
font-size: 7.8vw;
|
||||
@media screen and (min-width: #{$breakpointXS}px) { font-size: 4.8vw; }
|
||||
@media screen and (min-width: #{$breakpointXS}px) { font-size: 3.6vw; }
|
||||
}
|
||||
}
|
||||
@@ -1,47 +1,27 @@
|
||||
<div class="top-row ps-3 navbar navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="">Foodsharing Siegen</a>
|
||||
<nav class="flex-column">
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="profile" Match="NavLinkMatch.All">
|
||||
<span class="fas fa-user mr-1" aria-hidden="true" style="font-size: 1.4em;"></span> Profil
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
|
||||
<nav class="flex-column">
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="profile" Match="NavLinkMatch.All">
|
||||
<span class="fas fa-user mr-1" aria-hidden="true" style="font-size: 1.4em;"></span> Profil
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<span class="fas fa-tasks mr-1" aria-hidden="true" style="font-size: 1.4em;"></span> Übersicht
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="users" Match="NavLinkMatch.All">
|
||||
<span class="fas fa-users mr-1" aria-hidden="true" style="font-size: 1.4em;"></span> Benutzer
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="audit" Match="NavLinkMatch.All">
|
||||
<span class="fa-solid fa-clock-rotate-left mr-1" aria-hidden="true" style="font-size: 1.4em;"></span> Aktivitäten
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3 pt-5">
|
||||
<NavLink class="nav-link" href="logout" Match="NavLinkMatch.All">
|
||||
<span class="fa-solid fa-door-open mr-1" aria-hidden="true" style="font-size: 1.4em;"></span> Ausloggen
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool collapseNavMenu = true;
|
||||
|
||||
private string? NavMenuCssClass => collapseNavMenu ? "" : null;
|
||||
|
||||
private void ToggleNavMenu()
|
||||
{
|
||||
collapseNavMenu = !collapseNavMenu;
|
||||
}
|
||||
|
||||
}
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<span class="fas fa-tasks mr-1" aria-hidden="true" style="font-size: 1.4em;"></span> Übersicht
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="users" Match="NavLinkMatch.All">
|
||||
<span class="fas fa-users mr-1" aria-hidden="true" style="font-size: 1.4em;"></span> Benutzer
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="audit" Match="NavLinkMatch.All">
|
||||
<span class="fa-solid fa-clock-rotate-left mr-1" aria-hidden="true" style="font-size: 1.4em;"></span> Aktivitäten
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3 pt-5">
|
||||
<NavLink class="nav-link" href="logout" Match="NavLinkMatch.All">
|
||||
<span class="fa-solid fa-door-open mr-1" aria-hidden="true" style="font-size: 1.4em;"></span> Ausloggen
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -1,14 +1,11 @@
|
||||
.navbar-toggler {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
nav {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
height: 60px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
@media screen and (min-width: 992px) {
|
||||
nav {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.oi {
|
||||
@@ -49,13 +46,3 @@
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: #64ae24;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
.collapse {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
.navbar-toggler {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
@import '../Style/_variables';
|
||||
|
||||
.top-row {
|
||||
height: 60px;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
nav {
|
||||
padding-top: 50px;
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
@media screen and (min-width: #{$breakpointM}px) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.oi {
|
||||
@@ -49,14 +46,3 @@
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
color: #64ae24;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user