2 files changed, 35 insertions, 45 deletions
diff --git a/animism-align/frontend/app/views/align/containers/script.container.js b/animism-align/frontend/app/views/align/containers/script.container.js
deleted file mode 100644
index 7433edc..0000000
--- a/animism-align/frontend/app/views/align/containers/script.container.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import actions from 'app/actions'
-
-class Timeline extends Component {
-  state = {
-    visible: false,
-  }
-  constructor(props){
-    super(props)
-  }
-  render() {
-    if (this.props.text.loading) return <div />
-    if (!this.state.visible) {
-      return (
-        <div className='script'>
-          <button onClick={() => this.setState({ visible: true })}>
-            +
-          </button>
-        </div>
-      )
-    }
-    return (
-      <div className='script'>
-        <textarea 
-          className='script'
-          onChange={e => actions.site.updateText(e.target.value)}
-          value={this.props.text}
-        />
-        <button onClick={() => this.setState({ visible: false })}>
-          x
-        </button>
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  text: state.site.text,
-})
-
-export default connect(mapStateToProps)(Timeline)
diff --git a/animism-align/frontend/app/views/align/containers/sidebar.container.js b/animism-align/frontend/app/views/align/containers/sidebar.container.js
new file mode 100644
index 0000000..11f5314
--- /dev/null
+++ b/animism-align/frontend/app/views/align/containers/sidebar.container.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+import Script from '../components/sidebar/script.component.js'
+import TableOfContents from '../components/sidebar/tableOfContents.component.js'
+
+export default class Sidebar extends Component {
+  state = {
+    mode: "toc",
+  }
+  render() {
+    if (this.state.mode === "toc") {
+      return (
+        <div className='sidebar'>
+          <button onClick={() => this.setState({ mode: "script" })}>
+            +
+          </button>
+          <TableOfContents />
+        </div>
+      )
+    }
+    return (
+      <div className='sidebar'>
+        <Script />
+        <button onClick={() => this.setState({ mode: "toc" })}>
+          x
+        </button>
+      </div>
+    )
+  }
+}