streamlit_option_menu rather than selectbox

[jeremyfix]

This PR replaces the selectbox by the customizable streamlit_option_menu for the pages 2_Headers.py and 3_Tables.py

I removed the logic of the default option ; for some reasons , the selection stayed on the previoulsy selected item if this feature is used; Hence, we loose one thing : when clicking submit on the Headers page, we land on the Tables page without having the same algorithm being selected;

This PR adresses issue #42

[RonanMorgan]

1) hum je ne comprends pas le coup de l'index c'était justement pour conserver en mémoire l'onglet sur lequel on travaillait donc là tu as perdu ce comportement

2) visuellement je trouve pas ça terrible avec la grosse flèche verte, il me semble que @guillaume-millot avait quelque chose d'un peu mieux, je verrai avec sa réponse mais au pire c'est pas un drame :)

[jeremyfix]

oui , effectivement, je note que je perds cette capacité; D'abord, je ne suis pas sûr de bien cerner le modèle d'évaluation de streamlit :comment coopère le code séquentiel python avec l'asynchrone de la page web;

Je l'ai fait parce que , de mon côté, lorsque je testai l'application ,j'avais comme une "rémanance" du choix; Quand j'arrive sur une page, si je commence par cliquer disons sur un second onglet, à la première interaction, la sélection reste sur le choix par défaut ; au delà de la première interaction, ça marchait bien cela dit;

je n'ai pas réussi à concilier le côté :

• je veux au premier chargement un onglet choisi par défaut ; pour avoir la logique que tu décris, pour avoir une mémoire entre les deux pages ,
• après le premier chargement d'une page, dès le premier changement d'onglet, je veux être capable de changer d'onglet;

Sur le style , c'est du css, je pense, ce n'est pas forcément mon fort , j'ai pris un des styles donnés sur le README.md du dépôt streamlit_option_menu mais on est libre d'y mettre ce qu'on veut :

            styles={
                "container": {"padding": "0!important", "background-color": "#fafafa"},
                "icon": {"color": "orange", "font-size": "25px"},
                "nav-link": {
                    "font-size": "25px",
                    "text-align": "left",
                    "margin": "0px",
                    "--hover-color": "#eee",
                },
                "nav-link-selected": {"background-color": "green"},

[jeremyfix]

Comme ça casse un comportement, je vais fermer cette PR et réouvrir une branche propre pour juste customiser le menu ;