BUG: Header bar in WebClient is not formatted properly

[WheelchairShaun]

I've been investigating this issue and I am at a crossroad of decisions.

The first issue with the layout was Blazor uses CSS flex grid for the layout of the app. I edited the following in site.css to correct the layout:

app {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

header {
    flex-basis: 100%;
}

You also need to remove or comment out the following in MainLayout.razor:

<div class="top-row px-4">
    <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
</div>

This achieves the following result:

Unfortunately, this doesn't make the bootstrap's navbar work properly. The first issue is the site.css overrides a few of the properties related to hover and active states that bootstrap relies on. The second issue I found is that jQuery is not loaded in a Blazor app which means work is needed to make collapsing possible. Third, NavLink doesn't quite work as it should with Bootstrap; NavLink puts the active class on the anchor element while bootstrap uses it on the wrapping list item element within navbars.

It appears we have 3 possible solutions:

1. Rewrite a lot of CSS to get Bootstrap working and figure out a workaround with jQuery or use JSInterop
2. Add BlazorStrap to the project to handle bootstrap components
3. Change the navbar to work similarly to the demo in Blazing Pizza

Which direction would we like to go? If none of these, what would someone recommend?

[csharpfritz]

Let's use BlazorStrap to get that initial look and feel easily. We can customize further after we get beyond the initial functionality