Index
@page "/"
<nav class="navbar navbar-expand d-flex flex-column @(AnimateNav)" id="sidebar">
<div class="d-flex align-items-start">
<div class="p-2 flex-fill mt-2"><img src="imgs/darwill-logo-header-sml_1.png" alt="Darwill" width="108" height="32" /></div>
<div class="d-flex p-2 flex-fill pl-5 mt-2">
<a href=""><div class="p-2 flex-fill icon-nav-bar pl-4"><i class="far fa-bell fa-lg"></i></div></a>
<a href=""><div class="p-2 flex-fill icon-nav-bar"><i class="far fa-user-circle fa-lg"></i></div></a>
</div>
</div>
<div class="d-flex flex-column align-items-center p-4 w-100" href="#">
<img src="imgs/New Project.png" alt="Profile" width="140" height="140" />
<div class="d-flex flex-row pt-4 name">Joseph Kuzera</div>
<div class="d-flex flex-row email">jkuzera@darwill.com</div>
</div>
<div class="d-flex flex-column align-items-start pl-2 pr-2 pt-3 w-100">
<div class="d-flex flex-row nav-section-title">SECTION 1</div>
<div class="d-flex flex-row nav-section-title-desc">decription of section</div>
</div>
<a class="d-flex flex-column align-items-start p-2 mt-2 w-100 nav-items" href="counter">
<div class="d-flex flex-row">
<i class="fas fa-chart-pie fa-lg pt-1"></i>
<div class="pl-3">Overview</div>
</div>
</a>
<a class="d-flex flex-column align-items-start p-2 mt-2 w-100 nav-items" href="#">
<div class="d-flex flex-row">
<i class="fas fa-chart-pie fa-lg pt-1"></i>
<div class="pl-3">Overview</div>
</div>
</a>
<a class="d-flex flex-column align-items-start p-2 mt-2 w-100 nav-items" href="#">
<div class="d-flex flex-row">
<i class="fas fa-chart-pie fa-lg pt-1"></i>
<div class="pl-3">Overview</div>
</div>
</a>
<a class="d-flex flex-column align-items-start p-2 mt-2 w-100 nav-items" href="#">
<div class="d-flex flex-row">
<i class="fas fa-chart-pie fa-lg pt-1"></i>
<div class="pl-3">Overview</div>
</div>
</a>
</nav>
<div class="my-container-static active-cont">
<div class="d-flex flex-column w-100 pl-4 pr-4" style="height: 80px; background-color: #ECECEC;">
<div class="d-flex flex-row h-100 align-items-center top-nav-bar justify-content-between">
<button class="button icon-hov" id="menu-btn"><div class="d-flex" style="padding: .7rem .7rem .7rem .7rem;"><i class="fas fa-bars fa-lg"></i></div></button>
<div class="d-flex justify-content-evenly">
<div class=""><button class="button icon-hov" @onclick="navhide"><div class="d-flex" style="padding: .7rem .7rem .7rem .7rem;"><i class="fas fa-expand-arrows-alt fa-lg"></i></div></button></div>
<div class="pl-3"><button class="button icon-hov"><div class="d-flex" style="padding: .7rem .7rem .7rem .7rem;"><i class="fas fa-search fa-lg"></i></div></button></div>
<div class="pl-3"><button class="button icon-hov"><div class="d-flex" style="padding: .7rem .7rem .7rem .7rem;"><i class="fas fa-draw-polygon fa-rotate-90 fa-lg"></i></div></button></div>
<div class="pl-3"><button class="button icon-hov"><div class="d-flex" style="padding: .7rem .7rem .7rem .7rem;"><i class="fab fa-facebook-messenger fa-lg"></i></div></button></div>
</div>
</div>
</div>
<div class="d-flex flex-r w-100" style="height: 240px; background-color: #004694; ">
<div class="d-flex h-100 align-items-center" style="margin: 0px 120px 0px 120px;">
<img src="imgs/New Project.png" alt="Profile" width="110" height="110" />
<div class="d-flex flex-column pl-4">
<div class="welcome-text">Welcome back, Joseph!</div>
<div class="d-flex flex-row pl-1">
<div class="welcome-text-desc"><i class="fas fa-bell fa-lg"></i></div>
<div class="welcome-text-desc pl-2">You have 2 new messages and 15 new jobs</div>
</div>
</div>
</div>
</div>
</div>
@code {
string AnimateNav = string.Empty;
void navhide()
{
AnimateNav = "active-nav";
StateHasChanged();
}
}
namespace BlazorFiddleProject
{
using Microsoft.AspNetCore.Components.Builder;
using Microsoft.Extensions.DependencyInjection;
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
}
public void Configure(IComponentsApplicationBuilder app)
{
app.AddComponent<App>("app");
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<title>BlazorFiddleProject</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="_content/MatBlazor/dist/matBlazor.js"></script>
<style>
app { }
</style>
<script type="text/javascript">
</script>
</head>
<body>
<app>Loading...</app>
<script src="_framework/blazor.webassembly.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Add component
BlazorFiddle was updated from Blazor 0.7 to .NET 6.0.
Your old source code could not work. You need to upgrade to latest.