Add front end nav

pull/9/head
Louwar 3 years ago
parent 807f537808
commit e4225a5a83

@ -1,17 +1,14 @@
@using System.Globalization @using System.Globalization
@inject NavigationManager NavigationManager @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 @code
{ {

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

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

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

@ -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>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu"> <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
@ -36,6 +31,9 @@
</div> </div>
</nav> </nav>
</div> </div>
<div class="langue">
<CultureSelector />
</div>
@code { @code {
private bool collapseNavMenu = true; private bool collapseNavMenu = true;

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

@ -26,7 +26,10 @@
</ItemGroup> </ItemGroup>
<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>
<ItemGroup> <ItemGroup>

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 409 KiB

Loading…
Cancel
Save