Add More if There’s Enough Space

The Course application now has a menu that’s always visible if there’s enough space on the screen. But the menu could be more extensive on larger screens. For instance, we could add the page’s title next to its icon. Depending on the total width, we need to update the screen to reserve some space for the menu. We can also add the titles if the reserved space is big enough.

Reserve part of the width for the menu

We start by reserving a percentage of the total width of the screen for the menu. When the screen is wide enough, we inject AppMenu in the widget tree and give it a flex value that reflects the percentage we want to reserve for it.