From e73355af8ce5bc48e8971c04720f253fe50bd09d Mon Sep 17 00:00:00 2001 From: emkartal1 Date: Fri, 2 Dec 2022 12:05:38 +0100 Subject: [PATCH] Ajout du layout et du navbar --- src/CraftSharp/App.razor | 4 +- src/CraftSharp/CraftSharp.csproj | 8 +++ src/CraftSharp/Pages/Index.razor | 3 +- src/CraftSharp/Shared/CraftLayout.razor | 12 ++++ src/CraftSharp/Shared/CraftLayout.razor.css | 3 + src/CraftSharp/Shared/HeaderLayout.razor | 51 ++++++++++++++ src/CraftSharp/Shared/HeaderLayout.razor.cs | 12 ++++ src/CraftSharp/Shared/HeaderLayout.razor.css | 73 ++++++++++++++++++++ src/CraftSharp/Shared/MainLayout.razor | 2 + src/CraftSharp/Shared/MainLayout.razor.css | 9 ++- src/CraftSharp/Shared/NavMenu.razor | 4 +- 11 files changed, 174 insertions(+), 7 deletions(-) create mode 100644 src/CraftSharp/Shared/CraftLayout.razor create mode 100644 src/CraftSharp/Shared/CraftLayout.razor.css create mode 100644 src/CraftSharp/Shared/HeaderLayout.razor create mode 100644 src/CraftSharp/Shared/HeaderLayout.razor.cs create mode 100644 src/CraftSharp/Shared/HeaderLayout.razor.css diff --git a/src/CraftSharp/App.razor b/src/CraftSharp/App.razor index 6fd3ed1..0643159 100644 --- a/src/CraftSharp/App.razor +++ b/src/CraftSharp/App.razor @@ -1,11 +1,11 @@  - + Not found - +

Sorry, there's nothing at this address.

 diff --git a/src/CraftSharp/CraftSharp.csproj b/src/CraftSharp/CraftSharp.csproj index 44789d7..a9a995b 100644 --- a/src/CraftSharp/CraftSharp.csproj +++ b/src/CraftSharp/CraftSharp.csproj @@ -9,6 +9,14 @@ . + + + + + + + + diff --git a/src/CraftSharp/Pages/Index.razor b/src/CraftSharp/Pages/Index.razor index 873f213..9e483fe 100644 --- a/src/CraftSharp/Pages/Index.razor +++ b/src/CraftSharp/Pages/Index.razor @@ -9,7 +9,8 @@

@Localizer["Opening"]

Hello, world!

- + +
Welcome to your new app. diff --git a/src/CraftSharp/Shared/CraftLayout.razor b/src/CraftSharp/Shared/CraftLayout.razor new file mode 100644 index 0000000..c12c6f4 --- /dev/null +++ b/src/CraftSharp/Shared/CraftLayout.razor @@ -0,0 +1,12 @@ +@inherits LayoutComponentBase + +CraftSharp + +
+
+ +
+
+ @Body +
+
\ No newline at end of file diff --git a/src/CraftSharp/Shared/CraftLayout.razor.css b/src/CraftSharp/Shared/CraftLayout.razor.css new file mode 100644 index 0000000..04f249a --- /dev/null +++ b/src/CraftSharp/Shared/CraftLayout.razor.css @@ -0,0 +1,3 @@ +.sidebar { + background-image: linear-gradient(180deg, rgb(120,51,174) 0%, #411186 90%); +} diff --git a/src/CraftSharp/Shared/HeaderLayout.razor b/src/CraftSharp/Shared/HeaderLayout.razor new file mode 100644 index 0000000..5f42f90 --- /dev/null +++ b/src/CraftSharp/Shared/HeaderLayout.razor @@ -0,0 +1,51 @@ + + +@code { + private bool collapseNavMenu = true; + private string? NavBarCssClass => collapseNavMenu ? null : "show"; + private string? NavButtonCssClass => collapseNavMenu ? "collapsed" : null; + + private void ToggleNavMenu() + { + collapseNavMenu = !collapseNavMenu; + } +} \ No newline at end of file diff --git a/src/CraftSharp/Shared/HeaderLayout.razor.cs b/src/CraftSharp/Shared/HeaderLayout.razor.cs new file mode 100644 index 0000000..f861000 --- /dev/null +++ b/src/CraftSharp/Shared/HeaderLayout.razor.cs @@ -0,0 +1,12 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.Extensions.Localization; + + +namespace CraftSharp.Shared +{ + public partial class HeaderLayout + { + [Inject] + public IStringLocalizer Localizer { get; set; } + } +} diff --git a/src/CraftSharp/Shared/HeaderLayout.razor.css b/src/CraftSharp/Shared/HeaderLayout.razor.css new file mode 100644 index 0000000..db8d508 --- /dev/null +++ b/src/CraftSharp/Shared/HeaderLayout.razor.css @@ -0,0 +1,73 @@ + +.oi { + width: 3rem; + font-size: 1.7rem; + top: -2px; +} + +.nav-image { + width: 18rem; + color: #ffffff; + +} + +.button { + height: 5rem; + width: 11rem; + text-decoration: none; + text-align: center; + color: white; + cursor: pointer; + background: url('Images/btn1.png') no-repeat; + font-family: SilkscreenNormal; + line-height: 26px; + padding-top: 6px; +} + +.button:hover { + background: url('Images/btn2.png') no-repeat; +} + +.nav-item { + font-size: 1.1rem; + padding-bottom: 0.5rem; + font-family: SuperDario; +} + + .nav-item:first-of-type { + padding-top: 1rem; + } + + .nav-item:last-of-type { + padding-bottom: 1rem; + } + + .nav-item ::deep a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + } + + .nav-item ::deep a.active { + background-color: rgba(255,255,255,0.25); + color: white; + } + + .nav-item ::deep a:hover { + background-color: rgba(255,255,255,0.1); + color: white; + } + +@media (min-width: 641px) { + .navbar-toggler { + display: none; + } + + .collapse { + /* Never collapse the sidebar for wide screens */ + display: block; + } +} diff --git a/src/CraftSharp/Shared/MainLayout.razor b/src/CraftSharp/Shared/MainLayout.razor index b3e8948..7b20dca 100644 --- a/src/CraftSharp/Shared/MainLayout.razor +++ b/src/CraftSharp/Shared/MainLayout.razor @@ -4,6 +4,7 @@
+
@@ -21,4 +22,5 @@ @Body +
diff --git a/src/CraftSharp/Shared/MainLayout.razor.css b/src/CraftSharp/Shared/MainLayout.razor.css index a378d29..81763ac 100644 --- a/src/CraftSharp/Shared/MainLayout.razor.css +++ b/src/CraftSharp/Shared/MainLayout.razor.css @@ -6,6 +6,11 @@ main { flex: 1; } +.wrap { + display: flex; + flex-direction: column; +} + .sidebar { background-image: linear-gradient(180deg, rgb(120,51,174) 0%, #411186 90%); } @@ -49,8 +54,8 @@ main { } .sidebar { - width: 250px; - height: 100vh; + width: 100%; + position: sticky; top: 0; } diff --git a/src/CraftSharp/Shared/NavMenu.razor b/src/CraftSharp/Shared/NavMenu.razor index 561cebe..d932678 100644 --- a/src/CraftSharp/Shared/NavMenu.razor +++ b/src/CraftSharp/Shared/NavMenu.razor @@ -7,8 +7,8 @@
-