nicedouble / StreamlitAntdComponents

A Streamlit component to display Antd-Design
https://nicedouble-streamlitantdcomponentsdemo-app-middmy.streamlit.app/
MIT License
337 stars 23 forks source link

sac_menu as an alternative sidebar menu for multipages... how? #45

Open mabusdogma opened 4 months ago

mabusdogma commented 4 months ago

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?

CHerSun commented 4 months ago

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

mabusdogma commented 4 months ago

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: @.***>

iuiu34 commented 4 months ago

hi, i would suggest to look at the code for the app. It's here

CHerSun commented 4 months ago

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

mabusdogma commented 4 months ago

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: @.***>

mabusdogma commented 4 months ago

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: @.***>

CHerSun commented 4 months ago

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.

mabusdogma commented 4 months ago

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: @.***>

CHerSun commented 4 months ago

For flat menu - you gave a list[MenuItem]. You get index of selected item. Name=items_list[selected_index].name. Tune to your structure

wyzdic commented 4 months ago

My typical usage:

  1. Use the app.py as the entry file to handle the login and menu menus
  2. 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
  3. Each subpage file prepares a main() main function, and the content of each tab in the subpage is encapsulated into a separate tab function
  4. 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