Add menubar and color constants file

app/src/app.js

@@ -1,6 +1,7 @@
 import Tooltip from './tooltip.js'
 import Cluster from './cluster.js'
 import { Pod, ALL_PODS } from './pod.js'
+import { PRIMARY_VIOLET } from './colors.js'
 const PIXI = require('pixi.js')
 
 export default class App {
@@ -46,7 +47,13 @@ export default class App {
         //Create a container object called the `stage`
         const stage = new PIXI.Container()
 
-        const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 18, fill: 0xaaaaff})
+        const menuBar = new PIXI.Graphics()
+        menuBar.beginFill(PRIMARY_VIOLET, 1)
+        menuBar.drawRect(0, 0, window.innerWidth, 25)
+        menuBar.endFill()
+        stage.addChild(menuBar)
+
+        const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 18})
         searchPrompt.x = 20
         searchPrompt.y = 5
         PIXI.ticker.shared.add(function(_) {
@@ -55,7 +62,7 @@ export default class App {
         })
         stage.addChild(searchPrompt)
 
-        const searchText = new PIXI.Text('', {fontFamily: 'ShareTechMono', fontSize: 18, fill: 0xaaaaff})
+        const searchText = new PIXI.Text('', {fontFamily: 'ShareTechMono', fontSize: 18})
         searchText.x = 40
         searchText.y = 5
         stage.addChild(searchText)
@@ -65,7 +72,6 @@ export default class App {
         viewContainer.y = 40
         stage.addChild(viewContainer)
 
-
         const tooltip = new Tooltip()
         tooltip.draw()
         stage.addChild(tooltip)

app/src/cluster.js

@@ -1,5 +1,6 @@
 import Node from './node.js'
-import {Pod} from './pod.js'
+import { Pod } from './pod.js'
+import { PRIMARY_VIOLET } from './colors.js'
 const PIXI = require('pixi.js')
 
 export default class Cluster extends PIXI.Graphics {
@@ -37,12 +38,12 @@ export default class Cluster extends PIXI.Graphics {
             rows[0] += 20
         }
 
-        this.lineStyle(2, 0xaaaaff, 1)
+        this.lineStyle(2, PRIMARY_VIOLET, 1)
         const width = Math.max(rows[0], rows[1])
         this.drawRect(0, 0, width, nodeBox.height * 2 + 30)
 
         var topHandle = new PIXI.Graphics()
-        topHandle.beginFill(0xaaaaff, 1)
+        topHandle.beginFill(PRIMARY_VIOLET, 1)
         topHandle.drawRect(0, 0, width, 15)
         topHandle.endFill()
         var text = new PIXI.Text(this.cluster.api_server_url, {fontFamily: 'ShareTechMono', fontSize: 10, fill: 0x000000})

app/src/colors.js

@@ -0,0 +1,3 @@
+const PRIMARY_VIOLET = 0xaaaaff
+
+export { PRIMARY_VIOLET }