4 files changed, 31 insertions, 1 deletions
diff --git a/frontend/app/views/page/components/page.header.js b/frontend/app/views/page/components/page.header.js
index dbdf1b6..d40f6e0 100644
--- a/frontend/app/views/page/components/page.header.js
+++ b/frontend/app/views/page/components/page.header.js
@@ -27,6 +27,7 @@ function PageHeader(props) {
       <div>
         <button onClick={() => props.pageActions.toggleAddTileForm()}>+ Add tile</button>
         <button onClick={() => props.pageActions.toggleTileList()}>Sort tiles</button>
+        <button onClick={() => props.pageActions.togglePopups()}>Toggle popups</button>
         <button onClick={() => props.graphActions.toggleEditPageForm()}>Edit page</button>
         <button onClick={() => props.graphActions.viewPage(props.graph, props.page)}>View page</button>
       </div>
diff --git a/frontend/app/views/page/page.actions.js b/frontend/app/views/page/page.actions.js
index d2bbbe2..c584848 100644
--- a/frontend/app/views/page/page.actions.js
+++ b/frontend/app/views/page/page.actions.js
@@ -50,6 +50,16 @@ export const toggleTileList = () => dispatch => {
   dispatch({ type: types.page.toggle_tile_list })
 }
 
+// Popups
+
+export const togglePopups = () => dispatch => {
+  dispatch({ type: types.page.toggle_popups })
+}
+
+export const toggleSidebarSide = () => dispatch => {
+  dispatch({ type: types.page.toggle_sidebar_side })
+}
+
 // Update local page tile state when we change it
 
 export const updatePageTile = tile => dispatch => {
diff --git a/frontend/app/views/page/page.container.js b/frontend/app/views/page/page.container.js
index 68347b7..decdf79 100644
--- a/frontend/app/views/page/page.container.js
+++ b/frontend/app/views/page/page.container.js
@@ -70,7 +70,7 @@ class PageContainer extends Component {
         <PageHeader />
         <div className='body'>
           <PageEditor />
-          <div className='sidebar'>
+          <div className={this.props.page.editor.sidebarOnRight ? 'sidebar' : 'sidebar left'}>
             {this.props.graph.editor.editingPage && <PageEdit />}
             {this.props.page.editor.addingTile && <TileNew />}
             {this.props.page.editor.editingTile && <TileEdit />}
diff --git a/frontend/app/views/page/page.reducer.js b/frontend/app/views/page/page.reducer.js
index c2d231a..b0c4553 100644
--- a/frontend/app/views/page/page.reducer.js
+++ b/frontend/app/views/page/page.reducer.js
@@ -9,6 +9,8 @@ const initialState = crudState('page', {
     editingTile: false,
     currentEditTileId: 0,
     tileList: false,
+    showingPopups: true,
+    sidebarOnRight: true,
   },
   options: {
   }
@@ -195,6 +197,23 @@ export default function pageReducer(state = initialState, action) {
         }
       }
 
+    case types.page.toggle_popups:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          togglePopups: !state.editor.togglePopups,
+        }
+      }
+
+    case types.page.toggle_sidebar_side:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          sidebarOnRight: !state.editor.sidebarOnRight,
+        }
+      }
 
     default:
       return state