Adding sidebar to main concepts (streamlit#507)

* Adding sidebar to main concepts.

* Draft of sidebar content.

* Addressing Thiago's comments.

* report -> app.

* Addressing Thiago's comment in PR507.

docs/api.md

@@ -138,6 +138,22 @@ With widgets, Streamlit allows you to bake interactivity directly into your apps
 .. autofunction:: streamlit.time_input
 ```
 
+## Add widgets to sidebar
+
+Not only can you add interactivity to your report with widgets, you can organize them into a sidebar with `st.write.[element_name]`. Each element that's passed to `st.sidebar` is pinned to the left, allowing users to focus on the content in your app. The only elements that aren't supported are: `st.write` (you
+should use `st.sidebar.markdown()` instead), `st.echo`, and `st.spinner`.
+
+Here's an example of how you'd add a checkbox to your sidebar.
+
+```python
+import streamlit as st
+
+add_selectbox = st.sidebar.checkbox(
+    'How would you like to be contacted?',
+    ('Email', 'Home phone', 'Mobile phone'))
+)
+```
+
 ## Display code
 
 Sometimes you want your Streamlit app to contain _both_ your usual

docs/getting_started.md

@@ -90,8 +90,8 @@ Let's add a title to test things out:
 st.title('My first app')
 ```
 
-That's it! Your report has a title. You can use specific text functions to add
-content to your report, or you can use [`st.write()`](api.html#streamlit.write)
+That's it! Your app has a title. You can use specific text functions to add
+content to your app, or you can use [`st.write()`](api.html#streamlit.write)
 and add your own markdown.
 
 ### Write a data frame
@@ -228,7 +228,7 @@ option = st.selectbox(
 
 For a cleaner look, you can move your widgets into a sidebar. This keeps your
 app central, while widgets are pinned to the left. Let's take a look at how you
-can use [`st.sidebar()`](api.html#streamlit.sidebar) in your app.
+can use [`st.sidebar`](api.html#add-widgets-to-sidebar) in your app.
 
 ```Python
 option = st.sidebar.selectbox(
@@ -238,9 +238,11 @@ option = st.sidebar.selectbox(
 'You selected:', option
 ```
 
-Most of the elements you can put into the main part of your app with an
-`st.something()` call can also be put into a sidebar with
-`st.sidebar.something()`. The only exceptions right now are `st.write` (you
+Most of the elements you can put into your app can also be put into a sidebar using this syntax:
+`st.sidebar.[element_name]()`. Here are a few examples that show how it's used: `st.sidebar.markdown()`, `st.sidebar.slider()`, `st.sidebar.line_chart()`.
+
+
+The only exceptions right now are `st.write` (you
 should use `st.sidebar.markdown()` instead), `st.echo`, and `st.spinner`. Rest
 assured, though, we're currently working on adding support for those too!
 

docs/main_concepts.md

@@ -53,13 +53,34 @@ While these limitations are important to keep in mind, most of the time, they ar
 
 When you've got the data or model into the state that you want to explore, you can add in widgets like [`st.slider()`](api.html#streamlit.slider), [`st.button()`](api.html#streamlit.button) or [`st.selectbox()`](api.html#streamlit.selectbox). It's really straightforward - just treat widgets as variables. There are no callbacks in Streamlit! Every interaction simply reruns the script from top-to-bottom. Streamlit assigns each variable an up-to-date value given the app state. This approach leads to really clean code:
 
-```
+```python
 import streamlit as st
 x = st.slider('x')
 st.write(x, 'squared is', x * x)
 
 ```
 
+## Sidebar
+
+Streamlit makes it easy to organize your widgets in a left panel sidebar with [`st.sidebar`](api.html#add-widgets-to-sidebar). Each element that's passed to [`st.sidebar`](api.html#add-widgets-to-sidebar) is pinned to the left, allowing users to focus on the content in your app. The only elements that aren't supported are: `st.write` (you
+should use `st.sidebar.markdown()` instead), `st.echo`, and `st.spinner`.
+
+```python
+import streamlit as st
+
+# Adds a checkbox to the sidebar
+add_selectbox = st.sidebar.checkbox(
+    'How would you like to be contacted?',
+    ('Email', 'Home phone', 'Mobile phone'))
+)
+
+# Adds a slider to the sidebar
+add_slider = st.sidebar.slider(
+    'Select a range of values',
+    0.0, 100.0, (25.0, 75.0))
+)
+```
+
 ## App model
 
 Now that you have an idea of what Streamlit is, let's close the loop and review how it works: