sac_menu as an alternative sidebar menu for multipages... how?
Hello, I’d like to use this sac menu as an alternative sidebar menu for a multipage script, similar to what’s shown in the demo page https://nicedouble-streamlitantdcomponentsdemo-app-middmy.streamlit.app/
I see this example code:
import streamlit_antd_components as sac
sac.menu([
sac.MenuItem('home', icon='house-fill', tag=[sac.Tag('Tag1', color='green'), sac.Tag('Tag2', 'red')]),
sac.MenuItem('products', icon='box-fill', children=[
sac.MenuItem('apple', icon='apple'),
sac.MenuItem('other', icon='git', description='other items', children=[
sac.MenuItem('google', icon='google', description='item description'),
sac.MenuItem('gitlab', icon='gitlab'),
sac.MenuItem('wechat', icon='wechat'),
]),
]),
sac.MenuItem('disabled', disabled=True),
sac.MenuItem(type='divider'),
sac.MenuItem('link', type='group', children=[
sac.MenuItem('antd-menu', icon='heart-fill', href='https://ant.design/components/menu#menu'),
sac.MenuItem('bootstrap-icon', icon='bootstrap-fill', href='https://icons.getbootstrap.com/'),
]),
], open_all=True)
But I can't find a way to make it work as an alternative sidebar!
Could you please show us the code of the sidebar inside https://nicedouble-streamlitantdcomponentsdemo-app-middmy.streamlit.app/ for example, or any another example of a working sidebar in order to use it as an alternative sidebar in a multipage?
In the demo it's a single-page app. With new multipage navigation you can hide original multipage menu and add sac menu to each page, but well, that sucks
Hello again Alexander and thanks for answer. I think I made it work in a multi page, but now the navigation menu is duplicated (default + and menu)
You said you can hide original multiple nav menu.
How do you do it?
Regards,
El mar, 20 feb 2024, 9:36 p. m., Alexander Chernyshev < @.***> escribió:
In the demo it's a single-page app. With new multipage navigation you can hide original multipage menu and add sac menu to each page, but well, that sucks
— Reply to this email directly, view it on GitHub https://github.com/nicedouble/StreamlitAntdComponents/issues/45#issuecomment-1955037254, or unsubscribe https://github.com/notifications/unsubscribe-auth/AESCMAX6E72QIUIH4W3FDNLYUUCLNAVCNFSM6AAAAABDRXSUNGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJVGAZTOMRVGQ . You are receiving this because you authored the thread.Message ID: @.***>
hi, i would suggest to look at the code for the app. It's here
Option not to show multipage navigation was added just recently. I wasn't able too google up docs on it fast, probably under Streamlit configuration page. But here's a config from another project, which uses it: https://github.com/blackary/streamlit-login/blob/main/.streamlit/config.toml
Just add that option to your .streamlit/config.toml file.
P.S.: Yeah, it was in configuration section - see https://docs.streamlit.io/library/advanced-features/configuration for official docs. You might also want st.switch_page https://docs.streamlit.io/library/api-reference/control-flow/st.switch_page
It works like charm! Thanks!
El mié, 21 feb 2024, 8:08 p. m., Alexander Chernyshev < @.***> escribió:
https://github.com/blackary/streamlit-login/blob/main/.streamlit/config.toml
Option to not show multistage navigation. It was somewhere in recent release notes, but I wasn't able to find that fast. So check that repo shove
— Reply to this email directly, view it on GitHub https://github.com/nicedouble/StreamlitAntdComponents/issues/45#issuecomment-1957722881, or unsubscribe https://github.com/notifications/unsubscribe-auth/AESCMATINLEMU3A4P6AW373YUZA23AVCNFSM6AAAAABDRXSUNGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJXG4ZDEOBYGE . You are receiving this because you authored the thread.Message ID: @.***>
One last thing: is there a way to get both the index and the name at the menu?
What I do in a multipage app, is to use switch_page(name_of_the_file) name that I get with the antd menu. But I also need the index to place the menu navigation in the right spot, because it resets everytime I change the page.
So far I'm using names like 1_main, 2_bikers, 3_stores and so on, and I get the index from the name of the file, but it would be great to get it directly from the antd menu, so we will no longer need to name the files with a number, or change the numbers everytime we add a file or we change the order or the files.
Is there a way to get both the name and the index number?
Regards, Salvador
El mié, 21 feb 2024, 11:17 p. m., Salvador DelaTorre @.***> escribió:
It works like charm! Thanks!
El mié, 21 feb 2024, 8:08 p. m., Alexander Chernyshev < @.***> escribió:
https://github.com/blackary/streamlit-login/blob/main/.streamlit/config.toml
Option to not show multistage navigation. It was somewhere in recent release notes, but I wasn't able to find that fast. So check that repo shove
— Reply to this email directly, view it on GitHub https://github.com/nicedouble/StreamlitAntdComponents/issues/45#issuecomment-1957722881, or unsubscribe https://github.com/notifications/unsubscribe-auth/AESCMATINLEMU3A4P6AW373YUZA23AVCNFSM6AAAAABDRXSUNGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJXG4ZDEOBYGE . You are receiving this because you authored the thread.Message ID: @.***>
It has option to return index, check the demo. Yet, it could be difficult to convert it correctly, due to tree nature. Not both, either text it index.
Yes, I see but then I don't have the name. I can choose from name or index... Is there a way to get both?
The name I need it to match the name of the file with the name of what I have selected at the menu.
Regards, Salvador
El vie, 23 feb 2024, 2:51 p. m., Alexander Chernyshev < @.***> escribió:
It has option to return index, check the demo. Yet, it could be difficult to convert it correctly, due to tree nature
— Reply to this email directly, view it on GitHub https://github.com/nicedouble/StreamlitAntdComponents/issues/45#issuecomment-1961363565, or unsubscribe https://github.com/notifications/unsubscribe-auth/AESCMAW3FGTWYFQYTVOQO5TYVCNHLAVCNFSM6AAAAABDRXSUNGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNRRGM3DGNJWGU . You are receiving this because you authored the thread.Message ID: @.***>
For flat menu - you gave a list[MenuItem]. You get index of selected item. Name=items_list[selected_index].name. Tune to your structure
My typical usage:
- Use the app.py as the entry file to handle the login and menu menus
- Create a new folder in the app.py file directory and assign each page file in each menu, for example, menu1/fir_page.py menu2/sec_page.py
- Each subpage file prepares a main() main function, and the content of each tab in the subpage is encapsulated into a separate tab function
- Create a menu.py file, use from menu1.fir_page import fir_page_main() to import functions for other pages, and create some functions in this file that handle menu selection, in my case, I use a dictionary to store the functions that need to be called for each menu name, in addition to this, I also put some code to handle permissions, If you have a small number of pages, you can also use the if st.session_state['your menu key'] == 'your menu name' method to call the corresponding page function
In this way, you don't need to use multi-page processing, you only need to call the main function of the corresponding pages to achieve the effect of multiple pages, and also use different files to store the code of different pages