NavBar principale finie

vueNavBar
Shana CASCARRA 1 year ago
parent e94d418636
commit a754cc5b55

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

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

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

@ -1,13 +1,63 @@
body{ body{
color : snow; font-size : 17px;
} }
.bar-container{ .nav-link{
background-color : black; color : white;
margin : 0;
} }
/* NavBarPrincipale.css */
.logo{ .bar-container {
width : 80px; 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