Ajout du layout et du navbar

src/CraftSharp/App.razor

@@ -1,11 +1,11 @@
 <Router AppAssembly="@typeof(App).Assembly">
     <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(CraftLayout)" />
         <FocusOnNavigate RouteData="@routeData" Selector="h1" />
     </Found>
     <NotFound>
         <PageTitle>Not found</PageTitle>
-        <LayoutView Layout="@typeof(MainLayout)">
+        <LayoutView Layout="@typeof(CraftLayout)">
             <p role="alert">Sorry, there's nothing at this address.</p>
         </LayoutView>
     </NotFound>

src/CraftSharp/CraftSharp.csproj

@@ -9,6 +9,14 @@
     <DockerfileContext>.</DockerfileContext>
   </PropertyGroup>
 
+  <ItemGroup>
+    <Compile Remove="Shared\HeaderLayout.cs" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Remove="Shared\CraftLayout.css" />
+  </ItemGroup>
+
   <ItemGroup>
     <PackageReference Include="Microsoft.Extensions.Localization" Version="7.0.0" />
     <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.17.0" />

src/CraftSharp/Pages/Index.razor

@@ -9,7 +9,8 @@
 
 <h3>@Localizer["Opening"]</h3>
 <h1>Hello, world!</h1>
-<img src="images/@(Localizer["subtext-img"]).png" />
+<img src="images/@(Localizer["subtext-img"]).png" width="70%" />
+<br />
 
 Welcome to your new app.
 

src/CraftSharp/Shared/CraftLayout.razor

@@ -0,0 +1,12 @@
+@inherits LayoutComponentBase
+
+<PageTitle>CraftSharp</PageTitle>
+
+<div>
+    <div class="sidebar" >
+       <HeaderLayout />
+    </div>
+    <article class="content px-4">
+        @Body
+    </article>
+</div>

src/CraftSharp/Shared/CraftLayout.razor.css

@@ -0,0 +1,3 @@
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(120,51,174) 0%, #411186 90%);
+}

src/CraftSharp/Shared/HeaderLayout.razor

@@ -0,0 +1,51 @@
+<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
+    <div class="container-fluid">
+
+        <img class="nav-image" src="Images/CraftSharp-Logo.png" alt="Logo Application"/>
+        <button class="navbar-toggler @NavButtonCssClass" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
+                aria-controls="navbarCollapse" aria-label="Toggle navigation" @onclick="ToggleNavMenu">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse @NavBarCssClass" id="navbarCollapse" @onclick="ToggleNavMenu">
+            <ul class="navbar-nav me-auto mb-0 mb-md-0">
+                <li class="nav-item">
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                        <span class="oi oi-home"></span> Home
+                    </NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="counter">
+                        <span class="oi oi-plus"></span> @Localizer["Shop"]
+                    </NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="fetchdata">
+                        <span class="oi oi-box"></span> Inventaire
+                    </NavLink>
+                </li>
+            </ul>
+            <div>
+                <div >
+                    <CultureSelector/>
+                </div>
+                <div class="button"> Se connecter
+            </div>
+                <div class="button"> S'inscrire
+            </div>
+        </div>
+        </div>
+    </div>
+</nav>
+
+@code {
+    private bool collapseNavMenu = true;
+    private string? NavBarCssClass => collapseNavMenu ? null : "show";
+    private string? NavButtonCssClass => collapseNavMenu ? "collapsed" : null;
+
+    private void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+}

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<Index> Localizer { get; set; }
+    }
+}

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;
+    }
+}

src/CraftSharp/Shared/MainLayout.razor

@@ -4,6 +4,7 @@
 
 
 <div class="page">
+    <div class="wrap">
     <div class="sidebar">
         <NavMenu />
     </div>
@@ -21,4 +22,5 @@
             @Body
         </article>
     </main>
+    </div>
 </div>

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;
     }

src/CraftSharp/Shared/NavMenu.razor

@@ -7,8 +7,8 @@
 </div>
 
 <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
-    <nav class="flex-column">
-        <div class="nav-item px-3">
+    <nav>
+        <div class="nav-item px-2">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                 <span class="oi oi-key"></span> Ouverture
             </NavLink>