diff --git a/FoodsharingSiegen.Server/App.razor b/FoodsharingSiegen.Server/App.razor index 9eb3899..4ff94fd 100644 --- a/FoodsharingSiegen.Server/App.razor +++ b/FoodsharingSiegen.Server/App.razor @@ -1,13 +1,13 @@  - + Not found - +

Sorry, there's nothing at this address.

 diff --git a/FoodsharingSiegen.Server/Shared/DefaultLayout.razor b/FoodsharingSiegen.Server/Shared/DefaultLayout.razor new file mode 100644 index 0000000..5c2f36e --- /dev/null +++ b/FoodsharingSiegen.Server/Shared/DefaultLayout.razor @@ -0,0 +1,30 @@ +@inherits LayoutComponentBase + +FoodsharingSiegen.Server + + + +
+ + + + +
+ @Body +
+
+ + + + + + + + \ No newline at end of file diff --git a/FoodsharingSiegen.Server/Shared/DefaultLayout.razor.css b/FoodsharingSiegen.Server/Shared/DefaultLayout.razor.css new file mode 100644 index 0000000..286ca52 --- /dev/null +++ b/FoodsharingSiegen.Server/Shared/DefaultLayout.razor.css @@ -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; + } +} diff --git a/FoodsharingSiegen.Server/Shared/DefaultLayout.razor.scss b/FoodsharingSiegen.Server/Shared/DefaultLayout.razor.scss new file mode 100644 index 0000000..ef0aa28 --- /dev/null +++ b/FoodsharingSiegen.Server/Shared/DefaultLayout.razor.scss @@ -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; } + } +} \ No newline at end of file diff --git a/FoodsharingSiegen.Server/Shared/NavMenu.razor b/FoodsharingSiegen.Server/Shared/NavMenu.razor index 08a8ad9..58aa3c8 100644 --- a/FoodsharingSiegen.Server/Shared/NavMenu.razor +++ b/FoodsharingSiegen.Server/Shared/NavMenu.razor @@ -1,47 +1,27 @@ -
-
- Foodsharing Siegen +
- -
- -
- -@code { - private bool collapseNavMenu = true; - - private string? NavMenuCssClass => collapseNavMenu ? "" : null; - - private void ToggleNavMenu() - { - collapseNavMenu = !collapseNavMenu; - } - -} \ No newline at end of file +
+ + Übersicht + +
+
+ + Benutzer + +
+
+ + Aktivitäten + +
+
+ + Ausloggen + +
+ \ No newline at end of file diff --git a/FoodsharingSiegen.Server/Shared/NavMenu.razor.css b/FoodsharingSiegen.Server/Shared/NavMenu.razor.css index cae2731..ba3f78d 100644 --- a/FoodsharingSiegen.Server/Shared/NavMenu.razor.css +++ b/FoodsharingSiegen.Server/Shared/NavMenu.razor.css @@ -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; - } -} diff --git a/FoodsharingSiegen.Server/Shared/NavMenu.razor.scss b/FoodsharingSiegen.Server/Shared/NavMenu.razor.scss index 3ba4c1b..ff5ae4d 100644 --- a/FoodsharingSiegen.Server/Shared/NavMenu.razor.scss +++ b/FoodsharingSiegen.Server/Shared/NavMenu.razor.scss @@ -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; - } -}