Add custom component samples

auth_config.yaml

@@ -0,0 +1,17 @@
+credentials:
+  usernames:
+    jsmith:
+      email: jsmith@gmail.com
+      name: John Smith
+      password: $2b$12$JfcV2rgAU4dfNr.jfYz0LeV8Ycu7RbJuT5jkXdmCu66PR8AvmZ0/S
+    rbriggs:
+      email: rbriggs@gmail.com
+      name: Rebecca Briggs
+      password: $2b$12$LaJARFLX/Or.6VqylLF4Kusz6UfRO1jUtL.OCwFROS1a4PmfB.Gky
+cookie:
+  expiry_days: 30
+  key: Gaithimio9iy8opheephei0peix9ceefiahaekoh3liqu1ongoophiephath0vee
+  name: hf-spaces-streamlit-gallery
+preauthorized:
+  emails:
+  - melsby@gmail.com

pages/3dmol.py

@@ -0,0 +1,2 @@
+from stmol import *
+showmol(render_pdb(id = '1A2C'))

pages/Ace.py

@@ -0,0 +1,9 @@
+import streamlit as st
+
+from streamlit_ace import st_ace
+
+# Spawn a new Ace editor
+content = st_ace()
+
+# Display editor's content as you type
+content

pages/AgGrid.py

@@ -0,0 +1,5 @@
+from st_aggrid import AgGrid
+import pandas as pd
+
+df = pd.read_csv('https://raw.githubusercontent.com/fivethirtyeight/data/master/airline-safety/airline-safety.csv')
+AgGrid(df)

pages/Agraph.py

@@ -0,0 +1,34 @@
+import streamlit
+from streamlit_agraph import agraph, Node, Edge, Config
+
+nodes = []
+edges = []
+nodes.append( Node(id="Spiderman",
+                   label="Peter Parker",
+                   size=25,
+                   shape="circularImage",
+                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_spiderman.png")
+            ) # includes **kwargs
+nodes.append( Node(id="Captain_Marvel",
+                   size=25,
+                   shape="circularImage",
+                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png")
+            )
+edges.append( Edge(source="Captain_Marvel",
+                   label="friend_of",
+                   target="Spiderman",
+                   # **kwargs
+                   )
+            )
+
+config = Config(width=750,
+                height=950,
+                directed=True,
+                physics=True,
+                hierarchical=False,
+                # **kwargs
+                )
+
+return_value = agraph(nodes=nodes,
+                      edges=edges,
+                      config=config)

pages/Analytics.py

@@ -0,0 +1,6 @@
+import streamlit as st
+import streamlit_analytics
+
+with streamlit_analytics.track():
+    st.text_input("Write something")
+    st.button("Click me")

pages/Annotated_Text.py

@@ -0,0 +1,17 @@
+import streamlit as st
+from annotated_text import annotated_text
+
+annotated_text(
+    "This ",
+    ("is", "verb"),
+    " some ",
+    ("annotated", "adj"),
+    ("text", "noun"),
+    " for those of ",
+    ("you", "pronoun"),
+    " who ",
+    ("like", "verb"),
+    " this sort of ",
+    ("thing", "noun"),
+    "."
+)

pages/Authenticator.py

@@ -0,0 +1,26 @@
+import yaml
+
+import streamlit as st
+import streamlit_authenticator as stauth
+
+with open('./auth_config.yaml') as file:
+    config = yaml.load(file, Loader=yaml.SafeLoader)
+
+authenticator = stauth.Authenticate(
+    config['credentials'],
+    config['cookie']['name'],
+    config['cookie']['key'],
+    config['cookie']['expiry_days'],
+    config['preauthorized']
+)
+
+name, authentication_status, username = authenticator.login('Login', 'main')
+
+if authentication_status:
+    authenticator.logout('Logout', 'main')
+    st.write(f'Welcome *{name}*')
+    st.title('Some content')
+elif authentication_status is False:
+    st.error('Username/password is incorrect')
+elif authentication_status is None:
+    st.warning('Please enter your username and password')

pages/Bokeh_Events.py

@@ -0,0 +1,46 @@
+import streamlit as st
+from bokeh.plotting import figure
+from bokeh.models import ColumnDataSource, CustomJS
+
+# import function
+from streamlit_bokeh_events import streamlit_bokeh_events
+
+# create plot
+p = figure(tools="lasso_select")
+cds = ColumnDataSource(
+    data={
+        "x": [1, 2, 3, 4],
+        "y": [4, 5, 6, 7],
+    }
+)
+p.circle("x", "y", source=cds)
+
+# define events
+cds.selected.js_on_change(
+    "indices",
+    CustomJS(
+        args=dict(source=cds),
+        code="""
+        document.dispatchEvent(
+            new CustomEvent("YOUR_EVENT_NAME", {detail: {your_data: "goes-here"}})
+        )
+        """
+    )
+)
+
+# result will be a dict of {event_name: event.detail}
+# events by default is "", in case of more than one events pass it as a comma separated values
+# event1,event2
+# debounce is in ms
+# refresh_on_update should be set to False only if we dont want to update datasource at runtime
+# override_height overrides the viewport height
+result = streamlit_bokeh_events(
+        bokeh_plot=p,
+        events="YOUR_EVENT_NAME",
+        key="foo",
+        refresh_on_update=False,
+        override_height=600,
+        debounce_time=500)
+
+# use the result
+st.write(result)

pages/Cropper.py

@@ -0,0 +1,32 @@
+import streamlit as st
+from streamlit_cropper import st_cropper
+from PIL import Image
+st.set_option('deprecation.showfileUploaderEncoding', False)
+
+# Upload an image and set some options for demo purposes
+st.header("Cropper Demo")
+img_file = st.sidebar.file_uploader(label='Upload a file', type=['png', 'jpg'])
+realtime_update = st.sidebar.checkbox(label="Update in Real Time", value=True)
+box_color = st.sidebar.color_picker(label="Box Color", value='#0000FF')
+aspect_choice = st.sidebar.radio(label="Aspect Ratio", options=["1:1", "16:9", "4:3", "2:3", "Free"])
+aspect_dict = {
+    "1:1": (1, 1),
+    "16:9": (16, 9),
+    "4:3": (4, 3),
+    "2:3": (2, 3),
+    "Free": None
+}
+aspect_ratio = aspect_dict[aspect_choice]
+
+if img_file:
+    img = Image.open(img_file)
+    if not realtime_update:
+        st.write("Double click to save crop")
+    # Get a cropped image from the frontend
+    cropped_img = st_cropper(img, realtime_update=realtime_update, box_color=box_color,
+                                aspect_ratio=aspect_ratio)
+
+    # Manipulate cropped image at will
+    st.write("Preview")
+    _ = cropped_img.thumbnail((150,150))
+    st.image(cropped_img)

pages/D3_Demo.py

@@ -0,0 +1,7 @@
+import random
+from streamlit_d3_demo import d3_line
+
+def generate_random_data(x_r, y_r):
+    return list(zip(range(x_r), [random.randint(0, y_r) for _ in range(x_r)]))
+
+d3_line(generate_random_data(20, 500), circle_radius=15, circle_color="#6495ed")

pages/Discourse.py

@@ -0,0 +1,8 @@
+from streamlit_discourse import st_discourse
+
+# https://discuss.streamlit.io/t/discourse-component/8061
+
+discourse_url = "discuss.streamlit.io"
+topic_id = 8061
+
+st_discourse(discourse_url, topic_id)

pages/Disqus.py

@@ -0,0 +1,3 @@
+from streamlit_disqus import st_disqus
+
+st_disqus("streamlit-disqus-demo")

pages/Drawable_Canvas.py

@@ -0,0 +1,43 @@
+import pandas as pd
+from PIL import Image
+import streamlit as st
+from streamlit_drawable_canvas import st_canvas
+
+# Specify canvas parameters in application
+drawing_mode = st.sidebar.selectbox(
+    "Drawing tool:", ("point", "freedraw", "line", "rect", "circle", "transform")
+)
+
+stroke_width = st.sidebar.slider("Stroke width: ", 1, 25, 3)
+if drawing_mode == 'point':
+    point_display_radius = st.sidebar.slider("Point display radius: ", 1, 25, 3)
+stroke_color = st.sidebar.color_picker("Stroke color hex: ")
+bg_color = st.sidebar.color_picker("Background color hex: ", "#eee")
+bg_image = st.sidebar.file_uploader("Background image:", type=["png", "jpg"])
+
+realtime_update = st.sidebar.checkbox("Update in realtime", True)
+
+
+
+# Create a canvas component
+canvas_result = st_canvas(
+    fill_color="rgba(255, 165, 0, 0.3)",  # Fixed fill color with some opacity
+    stroke_width=stroke_width,
+    stroke_color=stroke_color,
+    background_color=bg_color,
+    background_image=Image.open(bg_image) if bg_image else None,
+    update_streamlit=realtime_update,
+    height=150,
+    drawing_mode=drawing_mode,
+    point_display_radius=point_display_radius if drawing_mode == 'point' else 0,
+    key="canvas",
+)
+
+# Do something interesting with the image data and paths
+if canvas_result.image_data is not None:
+    st.image(canvas_result.image_data)
+if canvas_result.json_data is not None:
+    objects = pd.json_normalize(canvas_result.json_data["objects"]) # need to convert obj to str because PyArrow
+    for col in objects.select_dtypes(include=['object']).columns:
+        objects[col] = objects[col].astype("str")
+    st.dataframe(objects)

pages/Echarts.py

@@ -0,0 +1,13 @@
+from streamlit_echarts import st_echarts
+
+options = {
+    "xAxis": {
+        "type": "category",
+        "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    },
+    "yAxis": {"type": "value"},
+    "series": [
+        {"data": [820, 932, 901, 934, 1290, 1330, 1320], "type": "line"}
+    ],
+}
+st_echarts(options=options)

pages/Elements.py

@@ -0,0 +1,25 @@
+# First, import the elements you need
+
+from streamlit_elements import elements, mui, html
+
+# Create a frame where Elements widgets will be displayed.
+#
+# Elements widgets will not render outside of this frame.
+# Native Streamlit widgets will not render inside this frame.
+#
+# elements() takes a key as parameter.
+# This key can't be reused by another frame or Streamlit widget.
+
+with elements("new_element"):
+
+    # Let's create a Typography element with "Hello world" as children.
+    # The first step is to check Typography's documentation on MUI:
+    # https://mui.com/components/typography/
+    #
+    # Here is how you would write it in React JSX:
+    #
+    # <Typography>
+    #   Hello world
+    # </Typography>
+
+    mui.Typography("Hello world")

pages/Embedcode.py

@@ -0,0 +1,4 @@
+import streamlit as st
+from streamlit_embedcode import github_gist
+
+github_gist("https://gist.github.com/randyzwitch/be8c5e9fb5b8e7b046afebcac12e5087/")

pages/Extras.py

@@ -0,0 +1,6 @@
+from streamlit_extras.stoggle import stoggle
+
+stoggle(
+    "Click me!",
+    """🥷 Surprise! Here's some additional content""",
+)

pages/Folium.py

@@ -0,0 +1,125 @@
+"""
+This sample code has been copied from
+https://github.com/randyzwitch/streamlit-folium/blob/master/examples/streamlit_app.py
+"""
+
+import streamlit as st
+
+st.set_page_config(page_title="streamlit-folium documentation")
+
+page = st.sidebar.radio(
+    "Select page", ["Home", "Bi-directional data model", "Plugin: Draw"], index=0
+)
+
+"# streamlit-folium"
+
+if page == "Home":
+    "streamlit-folium integrates two great open-source projects in the Python ecosystem: [Streamlit](https://streamlit.io) and [Folium](https://python-visualization.github.io/folium/)!"
+
+    """
+    Currently, there are two functions defined:
+
+    - `st_folium()`: a bi-directional Component, taking a Folium/Branca object and plotting to the Streamlit app. Upon mount/interaction with the Streamlit app, st_folium() returns a Dict with selected information including the bounding box and items clicked on
+
+    - `folium_static()`: takes a folium.Map, folium.Figure, or branca.element.Figure object and displays it in a Streamlit app.
+
+    _Note: `folium_static()` is based on the `_repr_html()` representation created in Folium. This function should be a strict subset the of functionality of the newer `st_folium()` function._
+
+    It is recommended that users switch to `st_folium()` as soon as possible, as `folium_static()` will likely be deprecated. If there is a reason why `folium_static()` needs to remain, please leave a [GitHub issue](https://github.com/randyzwitch/streamlit-folium/issues) describing your use-case.
+    """
+
+
+    "---"
+    "### Basic `st_folium()` Example"
+
+    with st.echo():
+
+        import streamlit as st
+        from streamlit_folium import st_folium
+        import folium
+
+        # center on Liberty Bell, add marker
+        m = folium.Map(location=[39.949610, -75.150282], zoom_start=16)
+        folium.Marker(
+            [39.949610, -75.150282],
+            popup="Liberty Bell",
+            tooltip="Liberty Bell"
+        ).add_to(m)
+
+        # call to render Folium map in Streamlit
+        st_data = st_folium(m, width = 725)
+
+elif page == "Bi-directional data model":
+    """
+    On its own, Folium is limited to _display-only_ visualizations; the Folium API generates the proper [leaflet.js](https://leafletjs.com/) specification,
+    as HTML and displays it. Some interactivity is provided (depending on how the Folium API is utilized), but the biggest drawback
+    is that the interactivity from the visualization isn't passed back to Python, and as such, you can't make full use of the functionality
+    provided by the leaflet.js library.
+
+    `streamlit-folium` builds upon the convenient [Folium API](https://python-visualization.github.io/folium/modules.html)
+    for building geospatial visualizations by adding a _bi-directional_ data transfer functionality. This not only allows for increased interactivity between
+    the web browser and Python, but also the use of larger datasets through intelligent querying.
+
+    ### Bi-directional data model
+
+    If we take a look at the example from the Home page, it might seem trivial. We define a single point with a marker and pop-up and display it:
+    """
+    with st.echo():
+
+        import streamlit as st
+        from streamlit_folium import st_folium
+        import folium
+
+        # center on Liberty Bell, add marker
+        m = folium.Map(location=[39.949610, -75.150282], zoom_start=16)
+        folium.Marker(
+            [39.949610, -75.150282],
+            popup="Liberty Bell",
+            tooltip="Liberty Bell"
+        ).add_to(m)
+
+        # call to render Folium map in Streamlit
+        st_data = st_folium(m, width = 725)
+
+    """
+    But behind the scenes, a lot more is happening _by default_. The return value of `st_folium` is set to
+    `st_data`, and within this Python variable is information about what is being displayed on the screen:
+    """
+
+    with st.expander("Expand to see data returned to Python"):
+        st_data
+
+    """
+    As the user interacts with the data visualization, the values for `bounds` are constantly updating, along
+    with `zoom`. With these values available in Python, we can now limit queries based on bounding box, change
+    the marker size based on the `zoom` value and much more!
+    """
+
+elif page == "Plugin: Draw":
+
+    """
+    Folium supports some of the [most popular leaflet plugins](https://python-visualization.github.io/folium/plugins.html). In this example,
+    we can add the [`Draw`](https://python-visualization.github.io/folium/plugins.html#folium.plugins.Draw) plugin to our map, which allows for drawing geometric shapes on the map.
+
+    When a shape is drawn on the map, the coordinates that represent that shape are passed back as a geojson feature via
+    the `all_drawings` and `last_active_drawing` data fields.
+
+    Draw something below to see the return value back to Streamlit!
+    """
+
+    with st.echo():
+
+        import folium
+        import streamlit as st
+        from folium.plugins import Draw
+        from streamlit_folium import st_folium
+
+        m = folium.Map(location=[39.949610, -75.150282], zoom_start=5)
+        Draw(export=True).add_to(m)
+
+        c1, c2 = st.columns(2)
+        with c1:
+            output = st_folium(m, width = 700, height=500)
+
+        with c2:
+            st.write(output)

pages/HiPlot.py

@@ -0,0 +1,22 @@
+"""
+This sample code has been copied from
+https://facebookresearch.github.io/hiplot/tuto_streamlit.html
+"""
+
+import json
+import streamlit as st
+import hiplot as hip
+
+x1, x2, x3 = st.slider('x1'), st.slider('x2'), st.slider('x3')
+
+# Create your experiment as usual
+data = [{'uid': 'a', 'dropout': 0.1, 'lr': 0.001, 'loss': 10.0, 'optimizer': 'SGD', 'x': x1},
+        {'uid': 'b', 'dropout': 0.15, 'lr': 0.01, 'loss': 3.5, 'optimizer': 'Adam', 'x': x2},
+        {'uid': 'c', 'dropout': 0.3, 'lr': 0.1, 'loss': 4.5, 'optimizer': 'Adam', 'x': x3}]
+xp = hip.Experiment.from_iterable(data)
+
+# Instead of calling directly \`.display()\`
+# just convert it to a streamlit component with \`.to_streamlit()\` before
+ret_val = xp.to_streamlit(ret="selected_uids", key="hip").display()
+
+st.markdown("hiplot returned " + json.dumps(ret_val))

pages/Lottie.py

@@ -0,0 +1,27 @@
+import time
+import requests
+
+import streamlit as st
+from streamlit_lottie import st_lottie
+from streamlit_lottie import st_lottie_spinner
+
+
+def load_lottieurl(url: str):
+    r = requests.get(url)
+    if r.status_code != 200:
+        return None
+    return r.json()
+
+
+lottie_url_hello = "https://assets5.lottiefiles.com/packages/lf20_V9t630.json"
+lottie_url_download = "https://assets4.lottiefiles.com/private_files/lf30_t26law.json"
+lottie_hello = load_lottieurl(lottie_url_hello)
+lottie_download = load_lottieurl(lottie_url_download)
+
+
+st_lottie(lottie_hello, key="hello")
+
+if st.button("Download"):
+    with st_lottie_spinner(lottie_download, key="download"):
+        time.sleep(5)
+    st.balloons()

pages/Observable.py

@@ -0,0 +1,19 @@
+import streamlit as st
+from streamlit_observable import observable
+
+a = st.slider("Alex", value=30)
+b = st.slider("Brian", value=20)
+c = st.slider("Craig", value=50)
+
+observable("Example Updatable Bar Chart",
+    notebook="@juba/updatable-bar-chart",
+    targets=["chart", "draw"],
+    redefine={
+        "data": [
+            {"name": "Alex", "value": a},
+            {"name": "Brian", "value": b},
+            {"name": "Craig", "value": c}
+        ],
+    },
+    hide=["draw"]
+)

pages/On_Hover_Tabs.py

@@ -0,0 +1,23 @@
+from st_on_hover_tabs import on_hover_tabs
+import streamlit as st
+st.set_page_config(layout="wide")
+
+st.header("Custom tab component for on-hover navigation bar")
+st.markdown('<style>' + open('./style.css').read() + '</style>', unsafe_allow_html=True)
+
+
+with st.sidebar:
+    tabs = on_hover_tabs(tabName=['Dashboard', 'Money', 'Economy'],
+                         iconName=['dashboard', 'money', 'economy'], default_choice=0)
+
+if tabs =='Dashboard':
+    st.title("Navigation Bar")
+    st.write('Name of option is {}'.format(tabs))
+
+elif tabs == 'Money':
+    st.title("Paper")
+    st.write('Name of option is {}'.format(tabs))
+
+elif tabs == 'Economy':
+    st.title("Tom")
+    st.write('Name of option is {}'.format(tabs))

pages/Option_Menu.py

@@ -0,0 +1,26 @@
+import streamlit as st
+from streamlit_option_menu import option_menu
+
+# 1. as sidebar menu
+with st.sidebar:
+    selected = option_menu("Main Menu", ["Home", 'Settings'],
+        icons=['house', 'gear'], menu_icon="cast", default_index=1)
+    selected
+
+# 2. horizontal menu
+selected2 = option_menu(None, ["Home", "Upload", "Tasks", 'Settings'],
+    icons=['house', 'cloud-upload', "list-task", 'gear'],
+    menu_icon="cast", default_index=0, orientation="horizontal")
+selected2
+
+# 3. CSS style definitions
+selected3 = option_menu(None, ["Home", "Upload",  "Tasks", 'Settings'],
+    icons=['house', 'cloud-upload', "list-task", 'gear'],
+    menu_icon="cast", default_index=0, orientation="horizontal",
+    styles={
+        "container": {"padding": "0!important", "background-color": "#fafafa"},
+        "icon": {"color": "orange", "font-size": "25px"},
+        "nav-link": {"font-size": "25px", "text-align": "left", "margin":"0px", "--hover-color": "#eee"},
+        "nav-link-selected": {"background-color": "green"},
+    }
+)

pages/Pandas_Profiling.py

@@ -0,0 +1,10 @@
+import pandas as pd
+import pandas_profiling
+import streamlit as st
+
+from streamlit_pandas_profiling import st_profile_report
+
+df = pd.read_csv("https://storage.googleapis.com/tf-datasets/titanic/train.csv")
+pr = df.profile_report()
+
+st_profile_report(pr)

pages/Player.py

@@ -0,0 +1,7 @@
+from streamlit_player import st_player
+
+# Embed a youtube video
+st_player("https://youtu.be/CmSKVW1v0xM")
+
+# Embed a music from SoundCloud
+st_player("https://soundcloud.com/imaginedragons/demons")

pages/Tags.py

@@ -0,0 +1,21 @@
+from streamlit_tags import st_tags, st_tags_sidebar
+
+keywords = st_tags(
+    label='# Enter Keywords:',
+    text='Press enter to add more',
+    value=['Zero', 'One', 'Two'],
+    suggestions=['five', 'six', 'seven',
+                 'eight', 'nine', 'three',
+                 'eleven', 'ten', 'four'],
+    maxtags = 4,
+    key='1')
+
+keyword = st_tags_sidebar(
+    label='# Enter Keywords:',
+    text='Press enter to add more',
+    value=['Zero', 'One', 'Two'],
+    suggestions=['five', 'six', 'seven',
+                 'eight', 'nine', 'three',
+                 'eleven', 'ten', 'four'],
+    maxtags = 4,
+    key='2')

pages/Vega-Lite.py

@@ -0,0 +1,26 @@
+import altair as alt
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+from streamlit_vega_lite import vega_lite_component, altair_component
+
+hist_data = pd.DataFrame(np.random.normal(42, 10, (200, 1)), columns=["x"])
+
+@st.cache
+def altair_histogram():
+    brushed = alt.selection_interval(encodings=["x"], name="brushed")
+
+    return (
+        alt.Chart(hist_data)
+        .mark_bar()
+        .encode(alt.X("x:Q", bin=True), y="count()")
+        .add_selection(brushed)
+    )
+
+event_dict = altair_component(altair_chart=altair_histogram())
+
+r = event_dict.get("x")
+if r:
+    filtered = hist_data[(hist_data.x >= r[0]) & (hist_data.x < r[1])]
+    st.write(filtered)

pages/WebRTC.py

@@ -0,0 +1,3 @@
+from streamlit_webrtc import webrtc_streamer
+
+webrtc_streamer(key="sample")

pages/spaCy.py

@@ -0,0 +1,13 @@
+# Copied from https://github.com/explosion/spacy-streamlit/blob/master/examples/01_out-of-the-box.py
+"""
+Very basic out-of-the-box example using the full visualizer. This file can be
+run using the "streamlit run" command.
+Prerequisites:
+python -m spacy download en_core_web_sm
+python -m spacy download en_core_web_md
+"""
+import spacy_streamlit
+
+models = ["en_core_web_sm", "en_core_web_md"]
+default_text = "Sundar Pichai is the CEO of Google."
+spacy_streamlit.visualize(models, default_text)

requirements.txt

@@ -0,0 +1,32 @@
+stmol
+py3Dmol==2.0.0.post2
+streamlit-ace
+streamlit-aggrid
+streamlit-agraph
+streamlit-analytics
+st-annotated-text
+streamlit-authenticator
+streamlit-bokeh-events
+streamlit-cropper
+streamlit-d3-demo
+streamlit-discourse
+streamlit-disqus
+streamlit-drawable-canvas
+streamlit-echarts
+streamlit-elements
+streamlit-embedcode
+streamlit-extras
+streamlit-folium
+hiplot
+streamlit-lottie
+streamlit-observable
+streamlit-on-Hover-tabs
+streamlit-option-menu
+streamlit-pandas-profiling
+streamlit-player
+spacy-streamlit
+https://github.com/explosion/spacy-models/releases/download/en_core_web_sm-3.5.0/en_core_web_sm-3.5.0-py3-none-any.whl
+https://github.com/explosion/spacy-models/releases/download/en_core_web_md-3.5.0/en_core_web_md-3.5.0-py3-none-any.whl
+streamlit-tags
+streamlit-vega-lite
+streamlit-webrtc

style.css

@@ -0,0 +1,58 @@
+section[data-testid='stSidebar'] {
+    background-color: #111;
+    min-width:unset !important;
+    width: unset !important;
+    flex-shrink: unset !important;
+    
+}
+
+button[kind="header"] {
+    background-color: transparent;
+    color:rgb(180, 167, 141)
+}
+
+@media(hover){
+    /* header element to be removed */
+    header[data-testid="stHeader"] {
+        display:none;
+    }
+
+    /* The navigation menu specs and size */
+    section[data-testid='stSidebar'] > div {
+        height: 100%;
+        width: 95px;
+        position: relative;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        background-color: #111;
+        overflow-x: hidden;
+        transition: 0.5s ease;
+        padding-top: 60px;
+        white-space: nowrap;
+    }
+
+    /* The navigation menu open and close on hover and size */
+    /* section[data-testid='stSidebar'] > div {
+    height: 100%;
+    width: 75px; /* Put some width to hover on. */
+    /* } 
+
+    /* ON HOVER */
+    section[data-testid='stSidebar'] > div:hover{
+    width: 300px;
+    }
+
+    /* The button on the streamlit navigation menu - hidden */
+    button[kind="header"] {
+        display: none;
+    }
+}
+     
+@media(max-width: 272px){
+    
+    section[data-testid='stSidebar'] > div {
+        width:15rem;
+    }
+}
+