onlyurei/knockout-spa

<header>
  <nav class="top-nav blue">
    <div class="nav-wrapper padding-left-right">
      <a data-bind="jquery: { method: 'sideNav' }"
         data-activates="side-nav" class="clickable button-collapse hide-on-large-only">
        <i class="mdi-navigation-menu"></i>
      </a>
      <a data-bind="text: page.name.titleize()" class="page-title"></a>
      <ul data-bind="foreach: config.locales" class="right">
        <li>
          <a data-bind="string: 'locale.' + $data,
                        click: function () { ($data !== $root.config().locale) && $root.config.setLocale($data); },
                        css: { underline: $data === $root.config().locale, clickable: $data !== $root.config().locale }"></a>
        </li>
      </ul>
    </div>
  </nav>
  <ul id="side-nav" class="side-nav fixed">
    <li data-bind="css: { bold: page.name == 'home' }">
      <a data-bind="string: 'nav.home'" href="/" class="waves-effect"></a>
    </li>
    <li data-bind="css: { bold: page.name == 'files' }">
      <a data-bind="string: 'nav.files'" href="/files" class="waves-effect"></a>
    </li>
    <li data-bind="css: { bold: page.name == 'files-dependencies' }">
      <a data-bind="string: 'nav.files-dependencies'" href="/files/dependencies" class="waves-effect"></a>
    </li>
    <li data-bind="css: { bold: page.name == 'resources' }">
      <a data-bind="string: 'nav.resources'" href="/resources" class="waves-effect"></a>
    </li>
  </ul>
</header>