<!-- .toolbar-header sits at the top of your app -->

<div  class="window">

<header class="toolbar toolbar-header">
  <h1 class="title">Photon</h1>
</header>


<!-- Your app's content goes inside .window-content -->
<div class="window-content" id="holder">
  <div class="pane-group">
    <div class="pane pane-sm sidebar">
      <nav class="nav-group">
        <h5 class="nav-group-title">Favorites</h5>
        <span class="nav-group-item">
          <span class="icon icon-home"></span>
          connors
        </span>
        <span class="nav-group-item active">
          <span class="icon icon-light-up"></span>
          Photon
        </span>
        <span class="nav-group-item">
          <span class="icon icon-download"></span>
          Downloads
        </span>
        <span class="nav-group-item">
          <span class="icon icon-folder"></span>
          Documents
        </span>
        <span class="nav-group-item">
          <span class="icon icon-window"></span>
          Applications
        </span>
        <span class="nav-group-item">
          <span class="icon icon-signal"></span>
          AirDrop
        </span>
        <span class="nav-group-item">
          <span class="icon icon-monitor"></span>
          Desktop
        </span>
      </nav>
    </div>

    <div class="pane">
      <table class="table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Kind</th>
            <th>Date Modified</th>
            <th>Size</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="file in files">
            <td>{{file.name}}</td>
            <td>{{file.type}}</td>
            <td>{{file.modified_at}}</td>
            <td>{{file.size}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>


<footer class="toolbar toolbar-footer">
  <h1 class="title">Footer</h1>
</footer>

</div>