tabs prototype

app.py

@@ -6,7 +6,7 @@ If you're not a hedgehog, you shouldn't reuse this code. Use this instead: https
 import streamlit as st
 
 
-from st_helpers import make_header, content_text, content_title, cite, make_footer
+from st_helpers import make_header, content_text, content_title, cite, make_footer, draw_tab_selector
 from charts import draw_current_progress
 
 st.set_page_config(page_title="Training Transformers Together", layout="centered")
@@ -57,6 +57,46 @@ Please note that we currently limit the number of colab participants to <b>TODO<
 with other users. If there are too many active peers, take a look at alternative starter kits here <b>TODO</b>
 """)
 
+content_title("But how does it work?")
+content_text("<b> TODO </b> General Story That Weaves Together Three Tabs Below . Lorem ipsum dolor sit amet, "
+             "consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim"
+             " ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
+             "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
+             "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
+
+query_params = st.experimental_get_query_params()
+tabs = ["Efficient Training", "Security & Privacy", "Make Your Own (TBU)"]
+active_tab = query_params["tab"][0] if "tab" in query_params else tabs[0]
+if active_tab not in tabs:
+    st.experimental_set_query_params(tab=tabs[0])
+    active_tab = tabs[0]
+
+draw_tab_selector(tabs, active_tab)
+
+if active_tab == tabs[0]:
+    content_text("<b> TODO 1</b> Lorem ipsum dolor sit amet, "
+                 "consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim"
+                 " ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
+                 "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
+                 "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
+
+elif active_tab == tabs[1]:
+    content_text("<b> TODO 2</b> Lorem ipsum dolor sit amet, "
+                 "consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim"
+                 " ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
+                 "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
+                 "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
+
+elif active_tab == tabs[2]:
+    content_text("<b> TODO 3</b> Lorem ipsum dolor sit amet, "
+                 "consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim"
+                 " ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
+                 "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
+                 "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
+
+else:
+    st.error("Something has gone terribly wrong. Please keep your fingers crossed while reloading the page.")
+
 
 content_text("<b> TODO UPDATE")
 make_footer()

st_helpers.py

@@ -1,3 +1,5 @@
+from typing import Sequence
+
 import streamlit as st
 import streamlit.components.v1 as components
 
@@ -19,6 +21,10 @@ def make_header():
     components.html(f"<style>{embeds_style_css}</style>{header_html}<script>{header_animate_js}</script>", height=260)
     st.markdown(meta_html, unsafe_allow_html=True)
     st.markdown(f"<style>{content_style_css}</style>", unsafe_allow_html=True)  # apply css to the rest of the document
+    st.markdown(
+        '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">',
+        unsafe_allow_html=True,
+    )
 
 
 def make_footer():
@@ -45,3 +51,22 @@ CITATIONS = {}
 def cite(tag):
     CITATIONS.setdefault(tag, len(CITATIONS) + 1)
     return f"&nbsp;[{CITATIONS[tag]}]"
+
+
+def draw_tab_selector(tabs: Sequence[str], active_tab: str):
+    li_items = "".join(
+        f"""
+        <li class="nav-item">
+            <a class="nav-link{' active' if t == active_tab else ''}" href="/?tab={t}">{t}</a>
+        </li>
+        """
+        for t in tabs
+    )
+    tabs_html = f"""
+        <ul class="nav nav-tabs">
+        {li_items}
+        </ul>
+    """
+
+    st.markdown(tabs_html, unsafe_allow_html=True)
+    st.markdown("<br>", unsafe_allow_html=True)