top bar (en haut) et side nav (à gauche) : clarifier qui fait quoi

Dans cette issue, j'ai recensé deux potentiels soucis de responsive design. Le premier concerne les items de la top bar, qui peuvent n'avoir pas assez de place selon la taille de l'écran et les traductions utilisées :

En commençant à vouloir y remédier dans !28 (closed) on s'est aperçus que ça amenait des réflexions plus générales sur la cohérence d'avoir des boutons à la fois dans la top bar et dans la side nav. Il faut dire qu'AdminLTE pousse au vice avec sa profusion de petits espaces à combler. Souvent dans une interface plus lambda, on se contente d'une top bar qu'on transforme en side nav au gré des tailles d'écran. Souvent quand il y a les deux à la fois, la top bar ne sert qu'à afficher des icônes (avatar, notifications...) ou des outils secondaires (rechercher).

Dans le cas présent, la side nav a très clairement le rôle de navigation principale voire unique. Mais il reste que deux boutons apparaissent en doublon, dans la side nav et dans la top bar :

• se déconnecter
• se connecter

La page de connexion abrite d'ailleurs un autre doublon, cette fois avec le container principal qui contient le bouton pour s'enregistrer qui est lui aussi dans la side nav.

Ma proposition est double :

• page de connexion
  • ne pas afficher de sidenav
  • abriter les boutons de connexion, d'enregistrement et les liens vers la documentation dans un container "boxed"
  • mettre le titre de l'app "Hiboo" au centre de la top bar, avec uniquement le switch dark mode

Voir par exemple la page de login de Gitlab pour se faire une idée d'un rendu possible

• en navigation connectée
  • laisser uniquement l'username et le theme switch en top bar (plus tard on aura peut-être d'autres éléments de type avatar, notification ou autre ?)
  • mettre le bouton de déconnexion uniquement en side nav, mais beaucoup mieux visible (car il ne s'agit pas d'un bouton de navigation comme les autres, et on risque parfois de cliquer dessus par mégarde).

Ce qui pourrait donner :

wide	small

Qu'en pensez vous ?