Added header bar for navigating home

apps/chat/src/js/components/lib/header-bar.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+
+import { IconHome } from '/components/lib/icons/icon-home';
+
+
+export class HeaderBar extends Component {
+
+  render() {
+    return (
+      <div className="bg-black w-100" style={{ height: 48, padding: 8 }}>
+        <a className="db"
+          style={{ background: '#1A1A1A', borderRadius: 16, width: 32, height: 32 }}
+          href='/'>
+          <IconHome />
+        </a>
+      </div>
+    );
+  }
+}
+
+

apps/chat/src/js/components/lib/icons/icon-home.js

@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+export class IconHome extends Component {
+  render() {
+    return (
+      <img src="/~chat/img/Home.png" width={32} height={32} />
+    );
+  }
+}

apps/chat/src/js/components/skeleton.js

@@ -1,16 +1,23 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 
+import { HeaderBar } from '/components/lib/header-bar.js';
 
 export class Skeleton extends Component {
   render() {
     return (
-      <div className="cf h-100 w-100 absolute flex">
+      <div className="h-100 w-100 absolute">
-        <div className="fl h-100 br overflow-x-hidden" style={{ flexBasis: 320 }}>
+        <HeaderBar />
-          {this.props.sidebar}
+        <div className="cf w-100 absolute flex"
-        </div>
+          style={{
-        <div className="h-100 fr" style={{ flexGrow: 1 }}>
+            height: 'calc(100% - 48px)' 
-          {this.props.children}
+          }}>
+          <div className="fl h-100 br overflow-x-hidden" style={{ flexBasis: 320 }}>
+            {this.props.sidebar}
+          </div>
+          <div className="h-100 fr" style={{ flexGrow: 1 }}>
+            {this.props.children}
+          </div>
         </div>
       </div>
     );