Add front end nav

ValblazeProject/Shared/CultureSelector.razor

@@ -1,17 +1,14 @@
 @using System.Globalization
 @inject NavigationManager NavigationManager
 
-<p>
+<div class="select">
-    <label>
+    <select @bind="Culture">
-        Select your locale:
+        @foreach (var culture in supportedCultures)
-        <select @bind="Culture">
+        {
-            @foreach (var culture in supportedCultures)
+            <option value="@culture">@culture.DisplayName</option>
-            {
+        }
-                <option value="@culture">@culture.DisplayName</option>
+    </select>
-            }
+</div>
-        </select>
-    </label>
-</p>
 
 @code
 {

ValblazeProject/Shared/CultureSelector.razor.css

@@ -0,0 +1,67 @@
+:root {
+    --background-gradient: linear-gradient(30deg, #f39c12 30%, #f1c40f);
+    --gray: #34495e;
+    --darkgray: #2c3e50;
+}
+
+select {
+    /* Reset Select */
+    appearance: none;
+    outline: 0;
+    border: 0;
+    box-shadow: none;
+    /* Personalize */
+    flex: 1;
+    padding: 0 1em;
+    color: #fff;
+    background-color: #2c3e50;
+    background-image: none;
+    cursor: pointer;
+}
+    /* Remove IE arrow */
+    select::-ms-expand {
+        display: none;
+    }
+/* Custom Select wrapper */
+.select {
+    position: relative;
+    display: flex;
+    width: 200px;
+    height: 3em;
+    border-radius: .25em;
+    overflow: hidden;
+}
+    /* Arrow */
+    .select::after {
+        content: '\25BC';
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 1em;
+        background-color: #34495e;
+        transition: .25s all ease;
+        pointer-events: none;
+    }
+    /* Transition */
+    .select:hover::after {
+        color: #f39c12;
+    }
+
+/* Other styles*/
+body {
+    color: #fff;
+    background: var(--background-gradient);
+}
+
+h1 {
+    margin: 0 0 0.25em;
+}
+
+a {
+    font-weight: bold;
+    color: var(--gray);
+    text-decoration: none;
+    padding: .25em;
+    border-radius: .25em;
+    background: white;
+}

ValblazeProject/Shared/MainLayout.razor

@@ -2,7 +2,6 @@
 @using ValblazeProject.UIThemeClasses
 
 <div class="page">
-    <CultureSelector />
     <div class="sidebar">
         <NavMenu />
     </div>

ValblazeProject/Shared/MainLayout.razor.css

@@ -9,7 +9,7 @@ main {
 }
 
 .sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+    background-image: linear-gradient(180deg, #34495e, #2c3e50 70%);
 }
 
 .top-row {
@@ -46,15 +46,14 @@ main {
 }
 
 @media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
 
     .sidebar {
-        width: 250px;
+        display:flex;
-        height: 100vh;
+        height: 80px;
+        align-items:center;
         position: sticky;
-        top: 0;
+        justify-content: center;
+        /*top: 0;*/
     }
 
     .top-row {

ValblazeProject/Shared/NavMenu.razor

@@ -1,10 +1,5 @@
-<div class="top-row ps-3 navbar navbar-dark">
+<div class="logoNav">
-    <div class="container-fluid">
+    <img class="bannerLogo" src="/images/BannerMinecraft.png" />
-        <a class="navbar-brand" href="">ValblazeProject</a>
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-    </div>
 </div>
 
 <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
@@ -36,6 +31,9 @@
         </div>
     </nav>
 </div>
+<div class="langue">
+    <CultureSelector />
+</div>
 
 @code {
     private bool collapseNavMenu = true;

ValblazeProject/Shared/NavMenu.razor.css

@@ -1,3 +1,17 @@
+.flex-column {
+    display: flex;
+    flex-direction: row !important;
+}
+
+.bannerLogo{
+    width: 300px;
+}
+
+.logoNav{
+    position: relative;
+    right: 8%;
+}
+
 .navbar-toggler {
     background-color: rgba(255, 255, 255, 0.1);
 }
@@ -18,17 +32,24 @@
     top: -2px;
 }
 
+.langue {
+    position: relative;
+    left: 8%;
+}
+
 .nav-item {
-    font-size: 0.9rem;
+    display: flex;
-    padding-bottom: 0.5rem;
+    align-items: center;
+    /*font-size: 0.9rem;
+    padding-bottom: 0.5rem;*/
 }
 
     .nav-item:first-of-type {
-        padding-top: 1rem;
+        /*padding-top: 1rem;*/
     }
 
     .nav-item:last-of-type {
-        padding-bottom: 1rem;
+        /*padding-bottom: 1rem;*/
     }
 
     .nav-item ::deep a {
@@ -57,6 +78,6 @@
 
     .collapse {
         /* Never collapse the sidebar for wide screens */
-        display: block;
+        display: flex;
     }
 }

ValblazeProject/ValblazeProject.csproj

@@ -26,7 +26,10 @@
   </ItemGroup>
 
   <ItemGroup>
-    <Folder Include="wwwroot\images\" />
+    <Resource Include="wwwroot\images\Minecraft-logos.jpg" />
+    <Resource Include="wwwroot\images\MinecraftBanner.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
   </ItemGroup>
 
   <ItemGroup>