Add simple NavMenu to StandaloneApp

This commit is contained in:
Steve Sanderson 2018-02-16 16:04:49 +00:00
parent 11bb8eaa6d
commit 96c6d959c0
4 changed files with 36 additions and 7 deletions

View File

@ -1,2 +1,4 @@
@(Layout<StandaloneApp.Shared.MainLayout>())
<h1>Hello, world!</h1>
Welcome to your new app.

View File

@ -1,10 +1,16 @@
@using Microsoft.AspNetCore.Blazor.RenderTree
@(Implements<Microsoft.AspNetCore.Blazor.Layouts.ILayoutComponent>())
<fieldset>
<legend>Layout</legend>
@Body
</fieldset>
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-3'>
<c:NavMenu />
</div>
<div class='col-sm-9'>
@Body
</div>
</div>
</div>
@functions {
public RenderFragment Body { get; set; }

View File

@ -0,0 +1,23 @@
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href='/'>Blazor app</a>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse'>
<ul class='nav navbar-nav'>
<li>
<a class='active' href='#'>
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
</ul>
</div>
</div>
</div>

View File

@ -1,6 +1,4 @@
body {
}
.main-nav li .glyphicon {
.main-nav li .glyphicon {
margin-right: 10px;
}