wip

app/templates/controlArea/controlArea.css

@@ -0,0 +1,22 @@
+.controlArea {
+  border-right: 1px solid #d7d7db;
+}
+
+.controlArea > ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.controlArea > ul > li {
+  margin: 12px;
+}
+
+@media (max-device-width: 720px), (max-width: 720px) {
+  .controlArea > ul {
+    flex-direction: row;
+  }
+}

app/templates/controlArea/index.js

@@ -0,0 +1,28 @@
+const html = require('choo/html');
+const assets = require('../../../common/assets');
+const userAccount = require('../userAccount');
+
+module.exports = function(state, emit) {
+  const account = state.capabilities.account
+    ? html`<li>
+  ${userAccount(state, emit)}
+</li>`
+    : null;
+  return html`
+    <nav class="controlArea">
+      <ul>
+        ${account}
+        <li>
+          <a href="/">
+            <img src="${assets.get('addfile.svg')}"/>
+          </a>
+        </li>
+        <li>
+          <a href="/uploads">
+            <img src="${assets.get('blue_file.svg')}"/>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  `;
+};