I was using streamlit custom sidebar menus and its working ok with my current code , but as soon as i upgrade my streamlit to 1.46.1 , sidebar starts disappearing, css implemeted before wasnt supporting post upgrade causing sidebar issue. any workaround?
Working OK - Streamlit 1.45.0
Working NOT OK - Streamlit 1.46.1
Custome components for sidebar.
streamlit_option_menu
streamlit_antd_components
sample code
actually the issue is with sidebar and sidebar toggle. I'm trying to show custom header with my company logo and text. on 1st run its appearing ok, but as soon as I collapse sidebar toggle button, sidebar disappear and header takes full page. and there is no way i can get back sidebar but refresh only. The custom css was working ok for me till 1.45 but when i upgraded streamlit to higher ver i'm phasing this issue.
import streamlit as st
import streamlit.components.v1 as components
import base64
import os
def display_header(logo_file, use_case="AI-Lawyer"):
logo_str = get_base64_of_bin_file(logo_file)
user_guide_url = f"https://TEST/userguide?file_id=auction_cheat_sheet"
header_code = """
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width: initial-scale:1.0">
<style>
body {
padding-top: 0rem;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0px 0px;
border-button: 1px solid #ddd;
}
.header .logo {
display: flex;
align-items: center;
}
.header .logo img {
height: 50px;
margin-right: 10px;
}
.header .logo .text {
font-size: 20px;
}
.header .logo .text .black {
color: black;
}
.block-container {
padding-top: 2rem;
padding-bottom: 0rem;
padding-left: 5rem;
padding-right: 5rem;
}
</style>
</head>
"""
header_code += f"""
<body>
<div class="header">
<div class="logo">
<img src="data:image/png;base64, {logo_str}">
<div class="text">
<span class="black">NCL {use_case}</span>
</div>
</div>
<div class="link" style="float: right;">
<a href={user_guide_url} target="_blank" style="text-decoration: none;border-right: 1px solid; color: gray;font-size: 14px;font-weight: 400;padding-right: 14px;">User Guide ⍰</a>
<span style="padding: 8px 10px;align-items: center;background-color: #f2f2f2;border-radius: 50%;color: #e60000;cursor: pointer;font-size: 20px;">SS</span>
</div>
</div>
</body>
</html>
<hr style="margin-top: 0px; border: 0.1px solid red;">
"""
st.markdown(header_code, unsafe_allow_html=True)
def get_base64_of_bin_file(bin_file):
with open(bin_file, 'rb') as f:
img_data = f.read()
return base64.b64encode(img_data).decode()
def set_css():
st.markdown(
"""
<style>
#MainMenu{
visibility: hidden;
}
footer {
visibility: hidden;
}
body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
color: #1C1C1C !important;
}
.stElementContainer .stButton > button {
background-color: #E60000 !important;
padding: 5px 10px !important;
}
.stElementContainer .stButton > button div {
font-size: 14px !important;
}
.stDownloadButton .stButton > button div {
font-size: 12px !important;
}
.stDownloadButton button {
background-color: #E60000 !important;
color: #fff !important;
border-radius: 5px !important;
padding: 5px 10px !important;
}
.stExpander details summary div {
font-size: 18px;
}
.colored-text {
color: #E60000 !important;
}
.stMainBlockContainer.block-container {
padding: 0 2.4rem !important;
}
.stVerticalBlock .stPopover button {
border: 0 !important;
padding-left: 8px !important;
}
.stVerticalBlock .stPopover button svg, header {
display: none !important;
}
.header .logo {
margin-bottom: 0px !important;
}
h3 {
font-size: 18px !important;
}
</style>
""",
unsafe_allow_html=True,
)
def main():
# Set page configuration
st.set_page_config(
page_title="NCL AI-Lawyer",
page_icon=":robot:",
layout="wide",
initial_sidebar_state="expanded"
)
# Set custom CSS
set_css()
# Display the header with the logo
display_header(r"img/logo.png")
# --- Sidebar ---
st.sidebar.title("Navigation")
page = st.sidebar.radio("Go to", ["Home", "Profile", "Admin"])
# --- Page Content ---
if page == "Home":
st.header("Home")
st.write("Welcome to the Home page!")
elif page == "Profile":
st.header("Profile")
st.write("This is your profile page.")
elif page == "Admin":
st.header("Admin")
st.write("Admin dashboard here.")
if __name__ == "__main__":
main()