Add front end nav

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

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

@ -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;
height: 100vh;
display:flex;
height: 80px;
align-items:center;
position: sticky;
top: 0;
justify-content: center;
/*top: 0;*/
}
.top-row {

@ -1,10 +1,5 @@
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<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 class="logoNav">
<img class="bannerLogo" src="/images/BannerMinecraft.png" />
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
@ -36,6 +31,9 @@
</div>
</nav>
</div>
<div class="langue">
<CultureSelector />
</div>
@code {
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 {
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;
padding-bottom: 0.5rem;
display: flex;
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;
}
}

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

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