st.space embedded apps (#1363)

* Component cleanup example

* st.space

Author: sfc-gh-dmatthews

python/api-examples-source/components.cleanup_function.py

@@ -0,0 +1,43 @@
+import streamlit as st
+
+JS = """
+export default function(component) {
+    const { setStateValue, parentElement } = component;
+    const sidebar = document.querySelector('section.stSidebar');
+    const initialState = sidebar.getAttribute('aria-expanded') === 'true';
+
+    // Create observer to watch for aria-expanded attribute changes
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.type === 'attributes' && mutation.attributeName === 'aria-expanded') {
+                const newIsExpanded = sidebar.getAttribute('aria-expanded') === 'true';
+                setStateValue('expanded', newIsExpanded);
+            }
+        });
+    });
+
+    // Start observing
+    observer.observe(sidebar, {
+        attributes: true,
+        attributeFilter: ['aria-expanded']
+    });
+
+    // Set initial state
+    setStateValue('expanded', initialState);
+
+    // Cleanup function to remove the observer
+    return () => {
+        observer.disconnect();
+    };
+
+};
+"""
+
+my_component = st.components.v2.component(
+    "sidebar_expansion_detector",
+    js=JS,
+)
+
+st.sidebar.write("Sidebar content")
+result = my_component(on_expanded_change=lambda: None)
+result

python/api-examples-source/layout.space_horizontal.py

@@ -0,0 +1,6 @@
+import streamlit as st
+
+with st.container(horizontal=True):
+    st.button("Left")
+    st.space("stretch")
+    st.button("Right")

python/api-examples-source/layout.space_vertical.py

@@ -0,0 +1,11 @@
+import streamlit as st
+
+left, middle, right = st.columns(3)
+
+left.space("medium")
+left.button("Left button", width="stretch")
+
+middle.space("small")
+middle.text_input("Middle input")
+
+right.audio_input("Right uploader")