Proposition for a more visible expand/collapse hamburger-like sidebar icon (≡)

Using Streamlit
,
1

Hello everybody,
I just wanted to share with you that many different people who use my apps made in Streamlit, especially if they use mobile, complain about the lack of visibility of the icon used to expand/collapse the sidebar.
And they also suggest to replace it with the well-known “hamburger” icon “≡”
I’m talking about that “>”/“<” that appears in top left of the page if the sidebar is enabled.

Well, playing a bit, I found this hack

custom_css = """
<style>
/* Hide original SVG paths in the toggle button */
button[data-testid="stBaseButton-headerNoPadding"] svg path {
    display: none !important;
}

button[data-testid="stBaseButton-headerNoPadding"]::before {
    content: "";
    position: relative;
    top: -6px;
    left: 12px;
    width: 20px;
    height: 2px;
    background: currentColor;
    box-shadow:
        0 6px currentColor,
        0 12px currentColor;
}
</style>
"""

# Inject CSS into the app
st.markdown(custom_css, unsafe_allow_html=True)

The result of the above code is:

image
image194×144 2.92 KB

It “works” but it is an hack and also changes the botton in top right (the one that lets rerun, record screencasts, …).

Have you ever experienced the same situations? How did you solve them?