5 files changed, 21 insertions, 5 deletions
diff --git a/frontend/views/graph/components/graph.header.js b/frontend/views/graph/components/graph.header.js
index 6a927ec..46ad962 100644
--- a/frontend/views/graph/components/graph.header.js
+++ b/frontend/views/graph/components/graph.header.js
@@ -12,7 +12,7 @@ function GraphHeader(props) {
         <Link to="/" className="logo"><b>{props.site.siteTitle}</b></Link>
       </div>
       <div>
-        <button onClick={() => props.graphActions.showAddPageForm()}>+ Add page</button>
+        <button onClick={() => props.graphActions.toggleAddPageForm()}>+ Add page</button>
       </div>
     </header>
   )
diff --git a/frontend/views/graph/graph.actions.js b/frontend/views/graph/graph.actions.js
index 90d0f96..1ee6999 100644
--- a/frontend/views/graph/graph.actions.js
+++ b/frontend/views/graph/graph.actions.js
@@ -8,6 +8,10 @@ export const hideAddPageForm = () => dispatch => {
   dispatch({ type: types.graph.hide_add_page_form })
 }
 
+export const toggleAddPageForm = () => dispatch => {
+  dispatch({ type: types.graph.toggle_add_page_form })
+}
+
 export const updateGraphPage = page => dispatch => {
   dispatch({ type: types.graph.update_graph_page, page })
 }
diff --git a/frontend/views/graph/graph.container.js b/frontend/views/graph/graph.container.js
index 4c7b7fc..5c6e3b5 100644
--- a/frontend/views/graph/graph.container.js
+++ b/frontend/views/graph/graph.container.js
@@ -43,7 +43,7 @@ class GraphContainer extends Component {
     })
   }
   render() {
-    if (!this.shouldShowGraph()) return null
+    if (!this.shouldShowGraph()) return <div />
     if (!this.props.graph.show.res || this.props.graph.show.loading) {
       return (
         <div>
@@ -61,8 +61,10 @@ class GraphContainer extends Component {
         <GraphHeader />
         <div className='body'>
           <GraphEditor />
-          {this.props.graph.editor.addingPage && <PageNew />}
-          {this.props.graph.editor.editingPage && <PageEdit />}
+          <div className='sidebar'>
+            {this.props.graph.editor.addingPage && <PageNew />}
+            {this.props.graph.editor.editingPage && <PageEdit />}
+          </div>
         </div>
       </div>
     )
diff --git a/frontend/views/graph/graph.css b/frontend/views/graph/graph.css
index 6facb9b..d6a0ff0 100644
--- a/frontend/views/graph/graph.css
+++ b/frontend/views/graph/graph.css
@@ -31,7 +31,7 @@
 .box h1,
 .box h2 {
   font-size: 1rem;
-  margin: 0 0 0.25rem 0;
+  margin: 0 0 0.5rem 0;
 }
 .box form label {
   display: flex;
diff --git a/frontend/views/graph/graph.reducer.js b/frontend/views/graph/graph.reducer.js
index 3dcea1d..336257d 100644
--- a/frontend/views/graph/graph.reducer.js
+++ b/frontend/views/graph/graph.reducer.js
@@ -55,6 +55,16 @@ export default function graphReducer(state = initialState, action) {
         }
       }
 
+    case types.graph.toggle_add_page_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingPage: !state.editor.addingPage,
+          editingPage: false,
+        }
+      }
+
     case types.graph.show_edit_page_form:
       return {
         ...state,