How to make the collapsed sidebar on mobile more "visible"

[Marco5]

Hi all,
I am developing an app using this framework that is strongly based on its sidebar. Users need to set the username for their session so that they can enable most of the features that require some sort of authentication.
And it works fine but the point is that many different users that saw the app in mobile for the first time struggled in finding WHERE to set the username and/or noticing that there is an expandable sidebar on the left.
After all they are right: the only thing that suggests to the user that there is a sidebar there is that small arrow in the top left:

My question is: are you also experiencing a similar issues? And, on the other hand, do you know if there is a way to make the collapsed sidebar more “visible” on mobile?

NOTE: start the app with the expanded sidebar can’t work for me since I use cookies to store usernames among sessions so the issue applies to first time users only

[Faltawer]

You can add a logo with a design to make it (a bit) more visible :

       st.logo(r'YOURLOGO.png', link="WEBSITE",
                icon_image=r'.YOURLOGO.png')

You can change the css too :

    st.markdown(
        r"""
        <style>
        .st-emotion-cache-1f3w014 {
                height: 10rem;
                width : 10rem;
                background-color: RED;
            }
        </style>
        """, unsafe_allow_html=True
    )

And adjust as you want

[Marco5]

Thanks for sharing this.
Make it bigger (a bit) can be a good way to go in my opinion but I think that the fixed background is quite bad on the other hand.

Starting from your example I also thought that a good way to highlight the icon there would be to make it… bouncing.

I changed your code in the following way:

st.markdown(
    r"""
    <style>
    .st-emotion-cache-1f3w014 {
            # height: 3rem;
            # width : 3rem;
            # background-color: RED;
            animation: bounce 2s ease infinite;
        }
    @keyframes bounce {
        70% { transform:translateY(0%); }
        80% { transform:translateY(-15%); }
        90% { transform:translateY(0%); }
        95% { transform:translateY(-7%); }
        97% { transform:translateY(0%); }
        99% { transform:translateY(-3%); }
        100% { transform:translateY(0); }
    }
    </style>
    """, unsafe_allow_html=True
)

The result is this (the page is strongly zoomed in for a better visualization):

EDIT: I found many different bouncing styles here

[Faltawer]

Wow ! Awesome