Tengo un headerState de estado que controla dos elementos de la interfaz de usuario: la barra de navegación móvil y el cuadro de diálogo Autenticación.

La barra de navegación móvil y el cuadro de diálogo de autenticación tienen propiedades isOpen , open y close

Necesito encontrar una solución flexible y extensible sobre cómo estructurar el estado.

Veo varias formas de solucionar este problema:

 type NoArgsNoReturn = () => void; // structure by category: navMenu and authDialog type HeaderState = { navMenu: { isOpen: boolean; open: NoArgsNoReturn; close: NoArgsNoReturn }, authDialog: { isOpen: boolean; open: NoArgsNoReturn; close: NoArgsNoReturn } }; // structure by what they do type HeaderState = { isOpen: { navMenu: boolean; authDialog: boolean }, open: { navMenu: NoArgsNoReturn; authDialog: NoArgsNoReturn }, close:{ navMenu: NoArgsNoReturn; authDialog: NoArgsNoReturn } }; // separate states type HeaderState = { isNavMenuOpen: boolean; isAuthDialogOpen: boolean; // if `open` is provided, isNavMenuOpen will be set to `open`, otherwise it will be toggled setNavMenuOpen: (open?: boolean) => void; // same for `isAuthDialogOpen` setAuthDialogOpen: (open?: boolean) => void; }

Pero no puedo entender cuál sería la mejor manera de estructurarlo, debe haber algunas mejores prácticas o prácticas desarrolladas a partir de la experiencia.