<div class="page-header" data-ng-controller="HeaderController">
  <div class="logo pull-left">
    <a class="navbar-brand" href="/" mean-token="'site-title'">PING PONGS</a>
  </div>

  <div class="left pull-left">
    <ul class="navbar-nav nav">
      <li data-ng-repeat="item in menus.main" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">
          <a mean-token="item.link" ui-sref='{{item.link}}'>{{item.title}}</a>
      </li>
    </ul>
  </div>

  <div class="account">
    <div id="text-edit">
      <div class="pull-right" data-ng-show="global.authenticated" mean-token-editable></div>
    </div>
    <ul class="navbar-nav nav" data-ng-hide="global.authenticated">
        <li><a ui-sref='auth.register'>Register</a>
        </li>
        <li class="divider-vertical"></li>
        <li><a ui-sref='auth.login'>Login</a>
        </li>
    </ul>
    <ul class="navbar-nav nav" data-ng-show="global.authenticated">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                {{global.user}} <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="/logout">Signout</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

<div class="contain-to-grid sticky">
  <nav class="top-bar" data-topbar data-ng-controller="HeaderController">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#" href="/">Ping Pong</a></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
    </ul>

    <section class="top-bar-section">
      <ul class="right" data-ng-hide="global.authenticated">
        <li class="has-form">
          <a href="/play" class="button">Play Pong</a>
        </li>
      </ul>

      <ul class="right" data-ng-show="global.authenticated">
        <li class="has-dropdown">
          <a href="#!">{{global.user}}</a>
          <ul class="dropdown">
            <li><a href="#!">Profile</a></li>
            <li><a href="#!">Logout</a></li>
          </ul>
        </li>
        <li class="has-form">
          <a href="/play" class="button">Play Pong</a>
        </li>
      </ul>
    </section>
  </nav>
</div>
Switch up to use foundation's menu bar.
Switch up to use foundation's menu bar.
