toolbar left in progress

app/components/SimpleEditor/Editor.js

@@ -65,6 +65,7 @@ class Editor extends ProseEditor {
 
     // left side: editor and toolbar
     let toolbar = this._renderToolbar($$)
+    let toolbarLeft = this._renderToolbarLeft($$)
     let editor = this._renderEditor($$)
 
     let SplitPane = this.componentRegistry.get('split-pane')
@@ -107,6 +108,8 @@ class Editor extends ProseEditor {
         commentsPane
       )
 
+    let sideNav = $$('div').addClass('sidenav').append(toolbarLeft)
+
     var contentPanel = $$(ScrollPane, {
       name: 'contentPanel',
       // contextMenu: 'custom',
@@ -179,6 +182,18 @@ class Editor extends ProseEditor {
       .append(viewMode)
   }
 
+  _renderToolbarLeft ($$) {
+    let commandStates = this.commandManager.getCommandStates()
+    return $$('div').addClass('se-toolbar-wrapper').append(
+    $$(Toolbar, {
+      commandStates: commandStates,
+      trackChanges: this.props.trackChanges,
+      trackChangesView: this.state.trackChangesView,
+      toolGroups: ['text']
+    }).ref('toolbarLeft')
+  )
+  }
+
   _renderEditor ($$) {
     const configurator = this.props.configurator
     const editing = this.props.disabled ? 'selection' : 'full'

app/components/SimpleEditor/SimpleEditor.scss

@@ -109,10 +109,11 @@ $active-blue: #4a90e2;
 
         .se-options {
           top: 36px;
+          background-color: #E8E8E8;
         }
 
         .se-option {
-          background-color: $white;
+          background-color: #E8E8E8;
           border: 0;
           font-family: 'Fira Sans';
         }
@@ -229,6 +230,20 @@ $active-blue: #4a90e2;
     background-color: $primary;
     border-right: 1px solid $light-gray;
     margin-top: 1px;
+
+    .sidenav {
+    height: 270px;
+    width: 150px;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #e8e8e8;
+    overflow-x: hidden;
+    transition: 0.5s;
+    margin-top: 256px;
+    box-shadow: 0 0 12px $dark-gray;
+}
   }