edit header style

src/CraftSharp/Shared/CraftLayout.razor

@@ -3,9 +3,7 @@
 <PageTitle>CraftSharp</PageTitle>
 
 <div>
-    <div class="sidebar" >
     <HeaderLayout/>
-    </div>
     <article class="content px-4">
         @Body
     </article>

src/CraftSharp/Shared/CraftLayout.razor.css

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

src/CraftSharp/Shared/HeaderLayout.razor

@@ -1,49 +1,50 @@
-<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
+<div class="topbar">
+    <nav class="navbar navbar-expand-md mb-4">
         <div class="container-fluid bar">
             <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>
+                <ul class="navbar-nav me-auto mb-0 mb-md-0 topbar_content" >
                     <li class="nav-item">
                         <NavLink class="nav-link" href="List">
-                        <span class="oi oi-box"></span> List
+                            <span class="topbar_item">
+                                <img src="/Images/inventory_icon.png" class="topbar_itemimg"/> Inventaire
+                            </span>
                         </NavLink>
                     </li>
 
                      
                     <li class="nav-item">
                         <NavLink class="nav-link" href="counter">
-                        <span class="oi oi-plus"></span> @Localizer["Shop"]
+                            <span class="topbar_item">
+                                <img src="/Images/shop_icon.png" class="topbar_itemimg"/> Magasin
+                            </span>
                         </NavLink>
                     </li>
+                    <span>
+                        <img class="nav-image" src="Images/CraftSharp-Logo.png" alt="Logo Application"/>
+                     </span>
+
                     <li class="nav-item">
                         <NavLink class="nav-link" href="fetchdata">
-                        <span class="oi oi-list-rich"></span> Inventaire
+                            <span class="topbar_item">
+                                <img src="/Images/opening_icon.png" class="topbar_itemimg"/> Ouverture
+                            </span>
                         </NavLink>
                     </li>
+                     <span class="btn_wrap">
+                        <div class="button"> Se connecter</div>
+                        <div class="button"> S'inscrire</div>
+                     </span>
                 </ul>
-            <div>
-                <div >
-                    <CultureSelector/>
-                </div>
-                <div class="button"> Se connecter
             </div>
-                <div class="button"> S'inscrire
-            </div>
-            </div>
-        </div>
-         <img class="nav-image" src="Images/CraftSharp-Logo.png" alt="Logo Application"/>
         </div>
     </nav>
+</div>
+
+
 
 @code {
     private bool collapseNavMenu = true;

src/CraftSharp/Shared/HeaderLayout.razor.css

@@ -1,43 +1,88 @@
 
+.topbar {
+    background: url("../Images/nav_back.jpg") top center/cover no-repeat fixed;
+    align-content: center;
+}
+
 .oi {
     width: 3rem;
     font-size: 1.7rem;
     top: -2px;
 }
 
+.btn_wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    height: 150px;
+}
+
 .bar{
     display: flex;
 }
 
+.nav-item {
+    height: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.topbar_itemimg {
+    height: 3rem;
+}
+
 .nav-image {
     width: 18rem;
     color: #ffffff;
     margin-top: 100px;
-    width: 50%;
+    width: 20%;
     position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+}
+
+.topbar_item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 .navbar {
+    background-color: transparent;
     overflow: visible;
     position: static;
     height: 150px;
 }
 
+nav-link {
+    height: 100%;
+}
+
+.topbar_content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
 .button {
-    height: 5rem;
     width: 11rem;
     text-decoration: none;
     text-align: center;
     color: white;
     cursor: pointer;
-    background: url('Images/btn1.png') no-repeat;
+    background: url('Images/btn1.png') center center/contain no-repeat;
+    background-size: 100% 100%;
     font-family: SilkscreenNormal;
     line-height: 26px;
     padding-top: 6px;
 }
 
     .button:hover {
-    background: url('Images/btn2.png') no-repeat;
+        background: url('Images/btn2.png')center center/contain no-repeat;
+        background-size: 100% 100%;
     }
 
 .nav-item {