menu.jsx

menu.jsx

// menu.jsx

var m = require('mithril');

function view(ctrl) {

  function redirect(e) {
    e.preventDefault();
    m.route(e.target.getAttribute('href'));
  }

  function login() {
    ctrl.login();
  }

  function logout(e) {
    e.preventDefault();
    ctrl.logout();
  }

  return <nav>
    <ul class="flex-container">
      <li>
        <span class="logo"><img src="/assets/logo.png" width="16px" height="16px" alt="logo"/></span>
        <a href="/" class="menu-heading">ChordKitchen</a>
      </li>
      <li>
        <a href="/search" onclick={redirect}><i class="fa fa-fw fa-search"></i>コード譜を探す</a>
      </li>
      <li>
        <a href="/sheet/_" onclick={redirect}><i class="fa fa-fw fa-plus-square"></i>コード譜を作る</a>
      </li>
      {(function() {
        if(ctrl.authenticated()) {
          return [
            <li>
              <a href="/mypage" onclick={redirect}><i class="fa fa-fw fa-user"></i>マイページ</a>
            </li>,
            <li>
              <a href="/" onclick={logout}><i class="fa fa-fw fa-sign-out"></i>ログアウト</a>
            </li>
          ];
        }
        return <li>
          <a href="/login/twitter" onclick={login}><i class="fa fa-fw fa-sign-in"></i>ログイン</a>
        </li>;
      })()}
    </ul>
  </nav>
}
exports.view = view;