<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link href="hashnav.css" rel="stylesheet">
        <link href="ratchet.min.css" rel="stylesheet">
        <STYLE TYPE="text/css" MEDIA=screen>
            <!--
                .current-page {
                    margin: 25px;
                    width: 60%;
                }
            -->
        </STYLE>
    </head>
    <body>
        <div id="current-page" class="current-page">
        </div>
        <nav class="bar bar-tab">
            <a class="tab-item active" href="#/foo">
                <span class="tab-label">Foo</span>
            </a>
            <a class="tab-item" href="#/bar">
                <span class="tab-label">Bar</span>
            </a>
            <a class="tab-item" href="#/baz">
                <span class="tab-label">Baz</span>
            </a>
        </nav>
        <script src="/lib/jquery.js"></script>
        <script src="hashnav.js"></script>
        <script src="app.js"></script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link href="hashnav.css" rel="stylesheet">
        <link href="ratchet.min.css" rel="stylesheet">
        <STYLE TYPE="text/css" MEDIA=screen>
            <!--
                .current-page {
                    margin: 25px;
                    width: 60%;
                }
            -->
        </STYLE>
    </head>
    <body>
        <header class="bar bar-nav">
            <a href="/">Home</a>
        </header>
        <div id="current-page" class="current-page content">
        </div>
        <nav class="bar bar-tab">
            <a class="tab-item active" href="#/foo">
                <span class="tab-label">Foo</span>
            </a>
            <a class="tab-item" href="#/bar">
                <span class="tab-label">Bar</span>
            </a>
            <a class="tab-item" href="#/baz">
                <span class="tab-label">Baz</span>
            </a>
        </nav>
        <script src="/lib/jquery.js"></script>
        <script src="hashnav.js"></script>
        <script src="app.js"></script>
    </body>
</html>

Add link to home in header navbar
Add link to home in header navbar

This is to test transition to a top level page not on the tab bar
