NavBar principale finie

vueNavBar
Shana CASCARRA 1 year ago
parent e94d418636
commit a754cc5b55

@ -1,45 +1,36 @@
@page "/NavBar"
@inherits LayoutComponentBase
<head>
<link rel="stylesheet" href="css/composants/navBar/NavBarPrincipale.css" />
</head>
<h3>NavBarPrincipale</h3>
<Bar Breakpoint="Breakpoint.Desktop"
class="bar-container">
<Bar Breakpoint="Breakpoint.Desktop" class="bar-container">
<BarBrand>
<img class="logo" src="/ressources/images/logo/logo.png" Text="Logo de Verax" Fluid />
</BarBrand>
<BarToggler />
<BarMenu>
<BarStart>
<BarItem>
<BarLink @onclick="@NavUtilisateurs">Utilisateurs</BarLink>
</BarItem>
<BarItem>
<BarLink @onclick="@NavArticles">Articles</BarLink>
@* <BarDropdown>
<BarDropdownToggle>Dropdown</BarDropdownToggle>
<BarDropdownMenu>
<BarDropdownItem>Action</BarDropdownItem>
<BarDropdownDivider />
<BarDropdownItem>Another action</BarDropdownItem>
</BarDropdownMenu>
</BarDropdown> *@
</BarItem>
<BarItem>
<BarLink @onclick="@NavModerateurs">Modérateurs</BarLink>
</BarItem>
</BarStart>
<BarBrand>
role/nom
</BarBrand>
<BarEnd>
<BarItem>
<Button Color="Color.Primary">Deconnexion</Button>
</BarItem>
</BarEnd>
<BarMenu class="bar-menu">
<BarItem>
<BarLink class="bar-link" @onclick="@NavUtilisateurs">Utilisateurs</BarLink>
</BarItem>
<BarItem>
<BarLink class="bar-link" @onclick="@NavArticles">Articles</BarLink>
</BarItem>
<BarItem>
<BarLink class="bar-link" @onclick="@NavModerateurs">Modérateurs</BarLink>
</BarItem>
</BarMenu>
<BarEnd>
<BarItem class="bar-role">
@DonneurEtat.NomUtilisateur
</BarItem>
<BarItem>
<Button Color="Color.Primary">Deconnexion</Button>
</BarItem>
</BarEnd>
</Bar>
@Body

@ -4,6 +4,8 @@ namespace VeraxShield.composants.affichages.navBar
{
public partial class NavBarPrincipale
{
[Inject]
private DonneurEtat DonneurEtat { get; set; }
[Inject]
private NavigationManager NavigationManager { get; set; }

@ -7,6 +7,8 @@ public class DonneurEtat : AuthenticationStateProvider
private IAuthentificationService _serviceAuthentification;
private UtilisateurCourant _utilisateurCourant;
public string NomUtilisateur => _utilisateurCourant?.Nom;
public DonneurEtat(IAuthentificationService service)
{
this._serviceAuthentification = service;

@ -1,13 +1,63 @@
body{
color : snow;
font-size : 17px;
}
.bar-container{
background-color : black;
.nav-link{
color : white;
margin : 0;
}
/* NavBarPrincipale.css */
.logo{
width : 80px;
.bar-container {
display : flex;
justify-content : space-between;
align-items : center;
background-color : #053679;
}
.bar-menu {
display : flex;
justify-content : space-around;
align-items : center;
flex-grow : 1; /* Permet à la bar-menu de prendre tout l'espace disponible */
}
.bar-menu .bar-item:first-child {
margin-left : 0;
}
.bar-menu .bar-item:last-child {
margin-right : 0;
}
.bar-menu .bar-link:hover {
text-decoration : none;
color : #D4DBE6;
transform : scale(1.1);
}
.btn-primary {
background-color : #E5E5E5;
color : #053679;
border-color: #053679;
}
.bar-role{
color : black;
font-weight : 500;
font-size : 15px;
margin-right : 20px;
align-self : center;
border : 2px solid black;
padding : 3px;
border-radius : 5px;
}
.logo {
width : 55px;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 176 KiB

After

Width:  |  Height:  |  Size: 98 KiB

Loading…
Cancel
Save