github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-22 17:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change ReactSpa template to something more like a dashboard with sidebar navigation

Browse Source
This commit is contained in:
SteveSandersonMS
2016-02-24 14:41:29 +00:00
parent eac76683cc
commit a6ea8b5101
9 changed files with 122 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
templates/ReactSpa/ClientApp/components/NavMenu.tsx
View File

@@ -1,9 +1,10 @@
import * as React from 'react';
import { Link } from 'react-router';
export class NavMenu extends React.Component<void, void> {
public render() {
return <div className="navbar navbar-inverse navbar-fixed-top">
<div className="container">
return <div className="main-nav">
<div className="navbar navbar-inverse">
<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span className="sr-only">Toggle navigation</span>
@@ -13,11 +14,24 @@ export class NavMenu extends React.Component<void, void> {
</button>
<Link className="navbar-brand" to={ '/' }>WebApplicationBasic</Link>
</div>
<div className="clearfix"></div>
<div className="navbar-collapse collapse">
<ul className="nav navbar-nav">
<li><Link to={ '/' }>Home</Link></li>
<li><Link to={ '/about' }>About</Link></li>
<li><Link to={ '/counter' }>Counter</Link></li>
<li>
<Link to={ '/' } activeClassName='active'>
<span className="glyphicon glyphicon-home"></span> Home
</Link>
</li>
<li>
<Link to={ 'about' } activeClassName='active'>
<span className="glyphicon glyphicon-info-sign"></span> About
</Link>
</li>
<li>
<Link to={ '/counter' } activeClassName='active'>
<span className="glyphicon glyphicon-education"></span> Counter
</Link>
</li>
</ul>
</div>
</div>