26-3 Ajout d'une barre de navigation

Dernière étape pour améliorer le visuel, ajouter une barre de navigation!

Pour ce faire, on peut créer une composante Navbar. Cette dernière sera créée dans un dossier de composantes partagées, à l'extérieur du dossier Pages.

Créer un dossier Components à la racine du projet Admin.
Sous le dossier Components -> Add -> Blazor Component
Nommez la composante Navbar

Barre de navigation de base

Snowfall.Web.Admin/Components/Navbar.razor
<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm border-bottom mb-5">
        <div class="container-fluid">
            <NavLink href="" class="navbar-brand">Snowfall</NavLink>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <NavLink class="nav-link" ActiveClass="active" href="evenements">Gestion des événements</NavLink>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

info

Remarquez l'utilisation de l'attribut ActiveClass="active" sur la composante NavLink de gestion des événements.

Blazor assignera automatiquement la classe active au lien s'il détecte que la route associée au lien est active.

Ajouter la référence au dossier Components au fichier _Imports.razor

Snowfall.Web.Admin/_Imports.razor
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Snowfall.Web.Admin
@using Snowfall.Web.Admin.Layout
@using Snowfall.Web.Admin.Components

Ajouter le composant au MainLayout

Snowfall.Web.Admin/Layout/MainLayout.razor
@inherits LayoutComponentBase

<Navbar></Navbar>

<div class="container">
    <main role="main" class="pb-3">
        @Body
    </main>
</div>

Test!

Lancez l'application et vous devriez avoir une magnifique barre de navigation!

http://localhost:4200

Test!​

Test!