Basic layout and categories nav

app/components/categories-nav/component.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+
+  categories: null
+
+});

app/components/categories-nav/template.hbs

@@ -0,0 +1,9 @@
+{{#if categories}}
+  <nav>
+    <ul>
+      {{#each categories as |category|}}
+        <li><a>{{category}}</a></li>
+      {{/each}}
+    </ul>
+  </nav>
+{{/if}}

app/controllers/application.js

@@ -1,12 +1,24 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
+import { observer } from '@ember/object';
 
 export default Controller.extend({
 
   storage: service(),
 
   connecting: alias('storage.connecting'),
-  connected: alias('storage.connected')
+  connected: alias('storage.connected'),
+
+  categories: null,
+
+  handleConnected: observer('connected', function() {
+    const client = this.get('storage.client');
+
+    client.getListing('').then(listing => {
+      let dirnames = Object.keys(listing);
+      this.set('categories', dirnames.map(i => i.replace('/', '')));
+    });
+  })
 
 });

app/controllers/index.js

@@ -1,4 +1,12 @@
 import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
 
 export default Controller.extend({
+
+  storage: service(),
+
+  connecting: alias('storage.connecting'),
+  connected: alias('storage.connected')
+
 });

app/services/storage.js

@@ -8,6 +8,7 @@ export default Service.extend({
   widget: null,
   connecting: true,
   connected: false,
+  client: null,
 
   setup: function() {
     const rs = new RemoteStorage({
@@ -65,6 +66,7 @@ export default Service.extend({
 
     this.set('rs', rs);
     this.set('widget', widget);
+    this.set('client', rs.scope('/'));
   }.on('init')
 
 });

app/styles/_colors.scss

@@ -0,0 +1,20 @@
+$dark-grey-1: #2a3743;
+$dark-grey-2: #344453;
+$light-grey-1: #b5c3d1;
+
+#app-container {
+  > aside {
+    background-color: $dark-grey-1;
+    color: $light-grey-1;
+
+    a {
+      color: $light-grey-1;
+      text-decoration: none;
+    }
+  }
+
+  > main {
+    // background-color: $dark-grey-2;
+    background-color: #fff;
+  }
+}

app/styles/_layout.scss

@@ -0,0 +1,46 @@
+* {
+  box-sizing: border-box;
+}
+
+#remotestorage-widget {
+  position: fixed;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+#app-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+
+  > aside {
+    flex: 0 0 16rem;
+    padding: 2rem;
+    overflow: auto;
+
+    nav {
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      a {
+        display: block;
+        padding: 0.2rem 0;
+      }
+    }
+  }
+
+  > main {
+    flex: 1;
+    padding: 2rem;
+    overflow: auto;
+  }
+}

app/styles/app.scss

@@ -1,14 +1,12 @@
 @import "bourbon";
+@import "colors";
+@import "layout";
 
 body {
   background-color: white;
   font-size: 16px;
-  font-family: sans-serif;
+  font-family: Open Sans, sans-serif;
   color: #222;
-}
-
-#remotestorage-widget {
-  position: fixed;
-  top: 0.5rem;
-  right: 0.5rem;
+  margin: 0;
+  padding: 0;
 }

app/templates/application.hbs

@@ -1,13 +1,10 @@
-<h2 id="title">Inspektor</h2>
-
-{{#if connecting}}
-  Connecting...
-{{else}}
+<div id="app-container">
+  <aside>
     {{#if connected}}
-    Connected.
-  {{else}}
-    Not connected.
+      {{categories-nav categories=categories}}
     {{/if}}
-{{/if}}
-
-{{outlet}}
+  </aside>
+  <main>
+    {{outlet}}
+  </main>
+</div>

app/templates/index.hbs

@@ -1,3 +1,9 @@
-index.hbs
-
-{{outlet}}
+{{#if connecting}}
+  Connecting...
+{{else}}
+  {{#if connected}}
+    Connected.
+  {{else}}
+    Not connected.
+  {{/if}}
+{{/if}}

tests/integration/components/categories-nav/component-test.js

@@ -0,0 +1,24 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('categories-nav', 'Integration | Component | categories nav', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{categories-nav}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#categories-nav}}
+      template block text
+    {{/categories-nav}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});