Le design system de l'autonomie n'inclut pas par défaut le composant sidebar car il est fortement couplé à de la navigation. Ainsi, nous recommandons d'utiliser la librairie React Navigation.
Pour réaliser la sidebar, il faut utiliser le composant Drawer de cette librairie.
La stylisation de ce composant est à votre charge.
Voici un exemple de stylisation du composant Drawer:
const DSAScreenOptions = {
drawerStyle: {borderRadius: theme.primitives.radius[32]},
drawerPosition: 'left',
drawerType: 'front',
}
<Drawer.Navigator
initialRouteName="Home"
screenOptions={({ route, navigation }) => ({
...DSAScreenOptions,
headerShown: /* Affiche la top bar */,
headerLeft: /* Composant personnalisé pour l'élement gauche de la top bar */,
drawerLabel: /* Composant personnalisé pour les labels des entrées de la sidebar */,
drawerIcon: /* Composant personnalisé pour les labels des entrées de la sidebar */
})}
drawerContent=/* Composant personnalisé pour tous le contenu de la sidebar */
>
/* Liste des screen a afficher */
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
Veuillez consulter les options de customisation de la Sidebar, plus particulièrement:
- drawerLabel
- drawerIcon
- drawerPosition
- drawerType
- drawerContent
- header
- headerLeft
- headerRight
Vous aurez besoin des primitives disponibles dans le fichier @ds-autonomie/assets/js/dsa-theme.