Bootstrap: Navbar and Navigation drawer look broken when used together

[SisIvanova]

Description

Since the navbar and navigation drawer both use --ig-surface-500 as a background color, there is no visual distinction between the components when used together.

Steps to reproduce

1. Open app builder
2. Create a new app using a template with header and nav
3. Set the theme to bootstrap

https://appbuilder-dev.indigo.design/app/eyqasc3pxqzw/preview

Expected result

We should either change one of the components' backgrounds (like in the Material theme) or add a border / box-shadow to the navbar (like in the Fluent theme).

Attachments

[AnjiManova]

We agree that there is no visual distinction between the Navbar and Nav Drawer, so your suggestion is appropriate to improve it. We believe the best solution here is adding a bottom border in the Navbar component.

This is because if we save the surface color here, it will help the user feel all components as a part of one. We will save the general Bootstrap UI visual feeling and representation, and we will still bring a visual distinction without visual breaking change.

After we change the Bootstrap kit, I will also add a link for visual reference here in the comments.