Add ability to add panels to the config view

spec/app/config-view-spec.coffee

@@ -0,0 +1,24 @@
+ConfigView = require 'config-view'
+{$$} = require 'space-pen'
+
+describe "ConfigView", ->
+  configView = null
+
+  beforeEach ->
+    configView = new ConfigView
+
+  describe ".addPanel(name, view)", ->
+    fit "adds a menu entry to the left and a panel that can be activated by clicking it", ->
+      configView.addPanel('Panel 1', $$ -> @div id: 'panel-1')
+      configView.addPanel('Panel 2', $$ -> @div id: 'panel-2')
+
+      expect(configView.panelMenu.find('li:contains(Panel 1)')).toExist()
+      expect(configView.panelMenu.find('li:contains(Panel 1)')).toHaveClass('active')
+      expect(configView.panelMenu.find('li:contains(Panel 2)')).toExist()
+
+      configView.attachToDom()
+      expect(configView.panels.find('#panel-1')).toBeVisible()
+      expect(configView.panels.find('#panel-2')).toBeHidden()
+      configView.panelMenu.find('li:contains(Panel 2)').click()
+      expect(configView.panels.find('#panel-2')).toBeVisible()
+      expect(configView.panels.find('#panel-1')).toBeHidden()

src/app/config-view.coffee

@@ -1,9 +1,30 @@
-{View} = require 'space-pen'
+{View, $$} = require 'space-pen'
+$ = require 'jquery'
+_ = require 'underscore'
 
 module.exports =
 class ConfigView extends View
   @content: ->
-    @div id: 'config-view', "Config View"
+    @div id: 'config-view', =>
+      @ol id: 'panel-menu', outlet: 'panelMenu'
+      @div id: 'panels', outlet: 'panels'
 
   initialize: ->
+    @panelsByName = {}
     document.title = "Atom Configuration"
+    @on 'click', '#panel-menu li', (e) =>
+      @showPanel($(e.target).attr('name'))
+
+  addPanel: (name, panel) ->
+    panelItem = $$ -> @li name: name, name
+    @panelMenu.append(panelItem)
+    panel.hide()
+    @panelsByName[name] = panel
+    @panels.append(panel)
+    @showPanel(name) if _.values(@panelsByName).length == 1
+
+  showPanel: (name) ->
+    @panels.children().hide()
+    @panelMenu.children('.active').removeClass('active')
+    @panelsByName[name].show()
+    @panelMenu.children("[name='#{name}']").addClass('active')