feat: create component - navigation bar

[paulinea]

Closes #797

[github-actions]

🟢 Netlify deploy for commit 62e1a0b succeeded

Deploy preview: https://69120d3bff9852fc28150744--ouds-android.netlify.app
Deploy log: https://app.netlify.com/projects/ouds-android/deploys/69120d3bff9852fc28150744

[florentmaitre]

A detail, ic_shop_store should be placed before ic_sms_message.

[florentmaitre]

Suggested change

	* OudsNavigationBar should contain three to five [OudsNavigationBarItem], each representing a singular destination.
	*
	* OudsNavigationBar default appearance is opaque but, if you need a **translucent blurred navigation bar** (supported from Android 13) as specified on OUDS design
	* side, you can implement it in your app with the help of [Haze](https://chrisbanes.github.io/haze/latest/) library. To do this, use OudsNavigationBar with
	* [translucent] parameter set to true and follow these steps:
	* 1. Add Haze dependency
	* 2. Follow Haze basic usage instructions:
	* - Define Haze state in the screen containing the navigation bar: `val hazeState = rememberHazeState()`
	* - Use `hazeEffect` Modifier on OudsNavigationBar providing OUDS blur radius: `Modifier.hazeEffect(state = hazeState, style = HazeStyle(tint = null, blurRadius = OudsTheme.navigationBarBlur.dp)),`
	* - Apply `hazeSource` Modifier on the content that scrolls behind the navigation bar: `Modifier.hazeSource(state = hazeState)`
	* 3. As your screen content needs to scroll behind the navigation bar, you'll probably need to adjust paddings and to add a spacer at the end of the screen
	* content that will have the height of OudsNavigationBar. For this, please use `OudsNavigationBarHeight` constant.
	* [OudsNavigationBar] should contain three to five [OudsNavigationBarItem], each representing a singular destination.
	*
	* [OudsNavigationBar] default appearance is opaque but, if you need a **translucent blurred navigation bar** (supported from Android 13) as specified on OUDS design
	* side, you can implement it in your app with the help of [Haze](https://chrisbanes.github.io/haze/latest/) library. To do this, use [OudsNavigationBar] with
	* [translucent] parameter set to true and follow these steps:
	* 1. Add Haze dependency
	* 2. Follow Haze basic usage instructions:
	* - Define Haze state in the screen containing the navigation bar: `val hazeState = rememberHazeState()`
	* - Use `hazeEffect` Modifier on [OudsNavigationBar] providing OUDS blur radius: `Modifier.hazeEffect(state = hazeState, style = HazeStyle(tint = null, blurRadius = OudsTheme.navigationBarBlur.dp)),`
	* - Apply `hazeSource` Modifier on the content that scrolls behind the navigation bar: `Modifier.hazeSource(state = hazeState)`
	* 3. As your screen content needs to scroll behind the navigation bar, you'll probably need to adjust paddings and to add a spacer at the end of the screen
	* content that will have the height of [OudsNavigationBar]. For this, please use [OudsNavigationBarHeight] constant.

[florentmaitre]

Do you remember why we need this line?

[florentmaitre]

drawLine draws the line half inside and half outside the navigation bar, although it's drawn inside in Figma. To fix this we should draw the line like this:

val topBorderWidth = 1.dp.toPx()
drawLine(
    color = Color.Red,
    start = Offset(x = 0f, y = topBorderWidth / 2f),
    end = Offset(x = size.width, y = topBorderWidth / 2f),
    strokeWidth = topBorderWidth
)

However, the top border is drawn behind the navigation bar, which partially or completely hides the top border (depending if it is translucent or not). But I could not find a way to fix this. Using drawWithContent instead hides the selection indicator (and I suppose this is the reason why you used drawBehind).

[florentmaitre]

Should we keep this composable method or should we use an OudsNavigationBarItem class instead, with an items parameter in OudsNavigationBar? Is Maxime OK with the fact that developers will be able to change background color and padding of items for instance?

[florentmaitre]

A detail, but app_components_navigationBar_lastItemBadgeNone_label could be renamed to app_components_navigationBar_itemBadgeNone_label, because maybe one day we will change which item displays the badge and this could apply to every item with no badge.

[florentmaitre]

This is not related to this PR, but other demo screens that uses the demoContentPaddingValues parameter set it to PaddingValues(). We could change these values to PaddingValues(horizontal = OudsTheme.spaces.fixed.none) like you did here because it's better.

[florentmaitre]

If I am correct there should not be a top padding for the first customization element.

[florentmaitre]

If we change the selected item in the demo, the code snippet does not reflect it:

typedArgument("selected", index == state.selectedItemId)

[florentmaitre]

There are also borderRadiusActiveIndicatorCustomBottom and sizeWidthActiveIndicatorCustomBottom tokens. Does that mean that the indicator can be located at the bottom? Or is it something that was experimented during the design phase and tokens will be removed in next version?