styled navigation

topbar.py

import streamlit as st
from streamlit_redirect import redirect

st.session_state.setdefault("blur", False)
st.session_state.setdefault("page", None)

def toggle_blur():
    pg = st.session_state.page
    st.session_state.blur = not st.session_state.blur
    st.switch_page(pg)

pages = [
    st.Page("page1.py", title="Page 1"),
    st.Page("page2.py", title="Create your account"),
    st.Page("page3.py", title="Home", icon=":material/apps:"),
    st.Page("page4.py", title="Geheim"),
]

pg = st.navigation(pages, position="top")

st.html("""
<style>
.stAppToolbar {
    background-color: azure;
    height: 3em;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
}

.stAppToolbar > div > div:nth-child(2)::before {
    font-size: x-large;
    font-weight: bold;
    content: "🚀 LAUNCH";
    padding-right: 1em;
}

.stAppToolbar > div > div:nth-child(2) {
    background-color: azure;
    height: 3em;
    position: fixed;
    top: 0px;
    left: 40px;
    width: calc(100% - 100px);
    z-index: 1000000000000 !important;
}
div[data-testid="stSidebarContent"] {
    top: 2.7em;
}
.active {
  color: green;
  -webkit-text-stroke-width: 0.5px;
}

.stSidebar {
    z-index: 10000;
}

.rc-overflow-item:has(span[label="Home"]) {
    margin-left: auto;
}

span[label="Geheim"] {
    color: red;
    text-decoration: underline;
}


div[class="stStatusWidget"] {
    visibility: hidden;
}

div[class="stDeployButton"] {
    visibility: hidden;
}

div[class="stAppDeployButton"] {
    visibility: hidden;
}

button[data-testid="stBaseButton-header"] {
    visibility: hidden;
}

a:[data-testid="stSidebarNavLink"][aria-current="page"] {
    border: 1px dotted red;
}

</style>
""")

if st.session_state.blur:
    st.html("""
<style>
.stMain, .stSidebar {
    filter: blur(3px);
}
</style>

    """)

if pg.title == "Geheim":
    toggle_blur()
elif pg.title == "Home":
    redirect("https://www.google.com")
else:
    st.session_state.page = pg
    pg.run()