Navbar: Fix navigation component;

Multilit: Fix url and native navigation control and optimize spawn multiple bad containers. Remove space on styles and COI instances
Loader: Fix bad css selector;

Author: vquilon

VERSION

@@ -1 +1 @@
-0.7.2
+0.7.3

examples/components/navbar/native_streamlit_multipage/app.py

@@ -96,7 +96,37 @@ def account():
 
 
 def settings():
-    st.button("Theme")
+    menu_definition = [
+        {
+            "id": "account",
+            "label": "Account",
+            "icon": "material/account_circle",
+            "ttip": "Account",
+        },
+        {
+            "id": "preferences",
+            "label": "Preferences",
+            "icon": "material/settings",
+            "ttip": "Preferences",
+        }
+    ]
+    # default_definition = menu_definition.pop(0)
+    selected_tab = st_navbar(
+        menu_definition,
+        sticky_nav=False,
+        theme_changer=False,
+        # home_definition=default_definition
+    )
+
+    if selected_tab == "account":
+        st.subheader("Account settings")
+        st.text_input("Email", value="", placeholder="Email")
+        st.text_input("Username", value="", placeholder="Username")
+        st.text_input("Full name", value="", placeholder="Full name")
+    elif selected_tab == "preferences":
+        st.subheader("Preferences")
+        st.checkbox("Enable notifications", value=True)
+        st.checkbox("Dark mode", value=False)
 
 
 def logout():
@@ -124,7 +154,8 @@ def logout():
 logout_page = st.Page(logout, title="Log out", icon=":material/logout:", url_path="logout")
 
 # HERE IS THE CHANGE
-from streamlit_plugins.components.navbar import NavbarPositionType, st_navigation, st_switch_home
+from streamlit_plugins.components.navbar import NavbarPositionType, st_navigation, st_switch_home, st_navbar, \
+    set_force_next_page, st_switch_page
 
 my_sidebar()
 
@@ -156,10 +187,8 @@ def logout():
 )
 print(f"{page.title=}, {native_way=}, {sticky_nav=}, {position_mode=}")
 print()
-if st.session_state.logged_in:
-    # SOME TEXT ABOVE THE NAVBAR
-    page.run()
 
-else:
-    login_page._can_be_called = True
-    login_page.run()
+if not st.session_state.logged_in and page._script_hash != login_page._script_hash:
+    st_switch_page(login_page._script_hash, native_way=True)
+
+page.run()

examples/framework/multi_page.py

@@ -53,7 +53,7 @@ def run():
 
     multilit = Multilit(
         title="Demo", nav_horizontal=True, layout='wide', favicon="📚",
-        use_st_navigation_navbar=native_way, allow_url_nav=True,
+        use_st_navigation=native_way, allow_url_nav=False,
         navbar_sticky=sticky_nav, navbar_mode=position_mode,
         use_cookie_cache=True, sidebar_state='auto',
         hide_streamlit_markers=False, use_banner_images=None,
@@ -93,9 +93,39 @@ def account():
         st.write("Account page")
         st.caption("This is a protected page. Only logged in users can view this.")
 
-    @multilit.page(title="Settings", icon=":material/settings:", page_type="settings")
+    @multilit.page(title="Settings", icon=":material/settings:", page_type="settings", with_loader=False)
     def settings():
-        st.button("Theme")
+        menu_definition = [
+            {
+                "id": "account",
+                "label": "Account",
+                "icon": "material/account_circle",
+                "ttip": "Account",
+            },
+            {
+                "id": "preferences",
+                "label": "Preferences",
+                "icon": "material/settings",
+                "ttip": "Preferences",
+            }
+        ]
+        # default_definition = menu_definition.pop(0)
+        selected_tab = st_navbar(
+            menu_definition,
+            sticky_nav=False,
+            theme_changer=False,
+            # home_definition=default_definition
+        )
+
+        if selected_tab == "account":
+            st.subheader("Account settings")
+            st.text_input("Email", value="", placeholder="Email")
+            st.text_input("Username", value="", placeholder="Username")
+            st.text_input("Full name", value="", placeholder="Full name")
+        elif selected_tab == "preferences":
+            st.subheader("Preferences")
+            st.checkbox("Enable notifications", value=True)
+            st.checkbox("Dark mode", value=False)
 
     @multilit.logout_callback
     def logout():
@@ -145,7 +175,7 @@ def no_sectioned_page():
 
     multilit.add_page(page=multilit.default_home_dashboard(), page_type="home")
     with multilit.new_section(title="Reports"):
-        multilit.add_page(bugs)
+        multilit.add_page(bugs, with_loader=False)
         multilit.add_page(alerts)
 
     with multilit.new_section(title="Tools"):

streamlit_plugins/components/loader/__init__.py

@@ -2,6 +2,7 @@
 import atexit
 import time
 from enum import Enum, auto
+from typing import TypeVar
 
 import streamlit as st
 
@@ -3421,7 +3422,7 @@ def book_loader(**kwargs):
     style = """
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <style>
-        div:has(.book-parent) {
+        div:has(>.book-parent) {
             width: inherit;
             display: flex;
             justify-content: center;
@@ -4419,7 +4420,9 @@ def run_loader(self):
     def stop_loader(self):
         pass
 
-class Loader(BaseLoader):
+LoaderType = TypeVar('LoaderType', bound=BaseLoader)
+
+class DefaultLoader(BaseLoader):
     def __init__(self,
         loader_container=None, text='', loader_name: LoadersLib = LoadersLib.book_loader, height=256,
         index=0, primary_color=None

streamlit_plugins/components/navbar/__init__.py

@@ -595,12 +595,15 @@ def st_navbar(
     reclick_load=True,
     input_styles: str | None = None,
     themes_data: list[dict]| None = None,
-    theme_changer: bool = True,
+    theme_changer: bool = False,
     collapsible: bool = True,
     prefix_url: str = "",
     url_navigation: bool = False,
     key="NavBarComponent",
 ):
+    if home_definition is None:
+        home_definition = menu_definition.pop(0)
+
     is_navigation = False
     # se recupera del callstack si se ha llamado desde la anterior funcion desde st_navigation
     inspect_stack = inspect.stack()
@@ -618,15 +621,25 @@ def st_navbar(
 
     if "navbar_coi_instance" not in st.session_state:
         st.session_state.navbar_coi_instance = False
-    
-    if themes_data is None and theme_changer:
-        themes_data = DEFAULT_THEMES
-    elif not theme_changer:
-        themes_data = []
+
+    if "navbar_st_styles_loaded" not in st.session_state:
+        st.session_state.navbar_st_styles_loaded = False
+
+    if is_navigation:
+        if themes_data is None and theme_changer:
+            themes_data = DEFAULT_THEMES
+        elif not theme_changer:
+            themes_data = []
+    else:
+        theme_changer = False
+
+    navbar_view = st.container(key=f"{key}_container_navbar")
+    coi_styles_view = st.container(key=f"{key}_container_coi_styles")
 
     # https://github.com/SnpM/streamlit-scroll-navigation
-    inject_crossorigin_interface()
-    time.sleep(0.1)
+    with coi_styles_view:
+        inject_crossorigin_interface()
+        # time.sleep(0.1)
 
     # ctx = get_script_run_ctx(suppress_warning=True)
 
@@ -686,69 +699,38 @@ def st_navbar(
     if override_page_selected_id:
         default_page_selected_id = override_page_selected_id
 
-    # if key not in st.session_state:
-    #     override_app_selected_id = default_app_selected_id
-    # elif st.session_state[key] is None:
-    #     override_app_selected_id = default_app_selected_id
-    coi_scripts_instance = st.empty()
-    styles = ""
-    if not st.session_state.navbar_coi_instance:
+    input_styles = input_styles or ""
+    styles = f"\ndiv:has(> .st-key-{key}_container_coi_styles) {{\nheight: 0;\nposition: absolute;\n}}\n"
+    if not st.session_state.navbar_st_styles_loaded:
+        styles += load_st_styles()
+        with coi_styles_view:
+            st.markdown(f"<style>\n{input_styles}\n{styles}\n<style>", unsafe_allow_html=True)
+
+    # if not st.session_state.navbar_coi_instance:
+    # styles = load_st_styles()
+    with coi_styles_view:
+        instantiate_crossorigin_interface(_component_func.name, key, is_navigation, default_page_selected_id, position_mode, sticky_nav)
         st.session_state.navbar_coi_instance = True
-        styles = load_st_styles()
-        with coi_scripts_instance.container():
-            instantiate_crossorigin_interface(_component_func.name, key, is_navigation, default_page_selected_id, position_mode, sticky_nav)
-            time.sleep(0.2)
-
-    # print()
-    # print(f"FROM Override Multi: {override_app_selected_id}")
-    style = NAV_TOP_UNDER_STYLE
-
-    if position_mode == 'under':
-        style += UNDER_NAV_STYLE
-        if sticky_nav:
-            style += UNDER_NAV_STICKY_STYLE
-        else:
-            style += UNDER_NAV_FIXED_STYLE
-    elif position_mode == 'top':
-        style += NAV_TOP_STYLE
-        style += VERTICAL_ST_STYLE
-        if sticky_nav:
-            style += NAV_TOP_STICKY_STYLE
-        else:
-            style += NAV_TOP_FIXED_STYLE
-    elif position_mode == 'side':
-        style += SIDE_NAV_STYLE
 
-    if position_mode in ['top', 'under']:
-        if sticky_nav:
-            style += STICKY_NAV_STYLE
-            if position_mode == 'top':
-                style += NAV_TOP_STICKY_STYLE
-        else:
-            style += FIXED_NAV_STYLE
-
-    if hide_streamlit_markers:
-        style += HIDE_ST_STYLE
-
-    input_styles = input_styles or ""
-    # st.markdown(f"<style>\n{input_styles}\n{style}\n<style>", unsafe_allow_html=True)
-    component_value = _component_func(
-        menu_definition=menu_definition, home=home_data or None, login=login_data or None,
-        override_theme=override_theme,
-        position_mode=position_mode, is_sticky=sticky_nav,
-        default_page_selected_id=default_page_selected_id,
-        override_page_selected_id=override_page_selected_id,
-        reclick_load=reclick_load,
-        styles=styles, custom_styles=input_styles,
-        is_navigation=is_navigation,
-        themes_data=themes_data,
-        theme_changer=theme_changer,
-        collapsible=collapsible,
-        prefix_url=prefix_url,
-        url_navigation=url_navigation and is_navigation,
-        default=default_page_selected_id,
-        key=key, fvalue=force_value,
-    )
+    with navbar_view:
+        component_value = _component_func(
+            menu_definition=menu_definition, home=home_data or None, login=login_data or None,
+            override_theme=override_theme,
+            position_mode=position_mode, is_sticky=sticky_nav,
+            default_page_selected_id=default_page_selected_id,
+            override_page_selected_id=override_page_selected_id,
+            reclick_load=reclick_load,
+            styles=styles, custom_styles=input_styles,
+            is_navigation=is_navigation,
+            themes_data=themes_data,
+            theme_changer=theme_changer,
+            collapsible=collapsible,
+            prefix_url=prefix_url,
+            url_navigation=url_navigation and is_navigation,
+            default=default_page_selected_id,
+            is_visible=True,
+            key=key, fvalue=force_value,
+        )
 
     # with coi_scripts_styles.container():
     #     apply_styles(key, f"`{input_styles}`")
@@ -810,14 +792,16 @@ def st_navigation(
     default_page = None
     if isinstance(pages, dict):
         st_pages = {**pages}
-        if account_page or settings_page or logout_page:
+        if account_page or settings_page or logout_page or login_page:
             st_pages["Account"] = []
         if account_page:
             st_pages["Account"].append(account_page)
         if settings_page:
             st_pages["Account"].append(settings_page)
         if logout_page:
             st_pages["Account"].append(logout_page)
+        if login_page:
+            st_pages["Account"].append(login_page)
 
         organized_pages = []
         for section, sub_pages in pages.items():
@@ -861,6 +845,8 @@ def st_navigation(
             st_pages[""].append(settings_page)
         if logout_page:
             st_pages[""].append(logout_page)
+        if login_page:
+            st_pages[""].append(login_page)
 
     if default_page is None:
         raise ValueError("You must provide a default page")
@@ -875,7 +861,8 @@ def st_navigation(
     st.session_state["navigation_menu_pages"] = menu_pages
     st.session_state["navigation_menu_account_pages"] = menu_account_pages
     st.session_state["navigation_default_page_id"] = default_page._script_hash
-    
+
+    logout_page_id, login_page_id = None, None
     if login_page:
         login_page_id = login_page._script_hash
         st.session_state["navigation_login_page_id"] = login_page_id
@@ -949,7 +936,8 @@ def st_navigation(
     # Solo si se cambia de pagina
     if prev_page_id != next_page_id:
         st.session_state["navigation_page_id"] = next_page_id
-        st.session_state["navigation_prev_page_id"] = prev_page_id
+        if prev_page_id not in [logout_page_id, login_page_id]:
+            st.session_state["navigation_prev_page_id"] = prev_page_id
         st_switch_page(next_page_id, native_way=native_way)
 
     page._can_be_called = True
@@ -982,7 +970,7 @@ def st_switch_page(page_id: str, native_way: bool = False):
     page = pages.get(page_id, None)
     if page is None:
         raise ValueError(f"Page with id {page_id} not found")
-    
+
     st.session_state["navigation_force_page_id"] = page._script_hash
     if native_way:
         st.switch_page(page)