init

app/components/Header/Header.scss

@@ -0,0 +1,43 @@
+@import '../../scss/variables.scss';
+
+.header {
+  background: $dark-blue--1;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 10px;
+}
+
+.header__draggable-region {
+  -webkit-app-region: drag;
+  flex: 1;
+  height: 100%;
+}
+
+.header-icon {
+  & + & {
+    margin-left: 10px;
+  }
+
+  cursor: pointer;
+
+  border-color: $blue;
+  color: $blue;
+
+  &:hover {
+    border-color: $blue--lighter;
+    color: $blue--lighter;
+  }
+}
+
+.header-icon--minimize {
+  height: 12px;
+  width: 12px;
+  border-bottom: 2px solid;
+}
+
+.header-icon--maximize {
+  height: 10px;
+  width: 10px;
+  border: 2px solid;
+}

app/components/Header/Header.tsx

@@ -0,0 +1,33 @@
+import { remote } from 'electron';
+import React from 'react';
+import './Header.scss';
+
+export class Header extends React.Component<any, any> {
+
+  exit() {
+    window.close();
+  }
+
+  maximize() {
+    if (remote.getCurrentWindow().isMaximized()) {
+      remote.getCurrentWindow().restore();
+    } else {
+      remote.getCurrentWindow().maximize();
+    }
+  }
+
+  minimize() {
+    remote.getCurrentWindow().minimize();
+  }
+
+  render() {
+    return (
+      <div className="header">
+        <div className="header__draggable-region"/>
+        <div className="header-icon header-icon--minimize" onClick={this.minimize.bind(this)}/>
+        <div className="header-icon header-icon--maximize" onClick={this.maximize.bind(this)}/>
+        <div className="fa fa-times fa-lg header-icon" onClick={() => this.exit()}/>
+      </div>
+    );
+  }
+}

app/components/Header/index.ts

@@ -0,0 +1 @@
+export * from './Header';