Enabling smart menus (of any kind) adds top spacing even if not needed

[js-its]

Describe the bug

When enabling smart menus a consdierable amount of CSS styling is added to the page which is to be expected.

However one part of this styling is the inclusion of spacing at the top of the page via the following SCSS:

• Adds main flag class theme-boost-union-smartmenu
• Add $bu-smartmenu-menubar-height: 40px; variable
• The above variable is used to modify various page elements to allow for positioning of the additional smart menu bar

This spacing is added when any smart menu items are added even if the new additional menu bar isn't on screen meaning that - when considering smart menu items only in the main menu, user menu or bottom bar - the main page content is still moved down leaving a gap directly below the Moodle topbar.

The specific SCSS rule that causes this is the ~ #page.drawers rule.

To Reproduce

Case 1

1. Create a smart menu with some items
2. Configure the smart menu locations to be main navigation and menu bar
3. Save and apply

Case 2

4. Re-configure the smart menu locations to be only main navigation
5. Save and apply

Expected behavior

In case 1 above the behaviour is as expected - i.e. the menu items appear in both locations and the page content is shifted down to allow for the new menu bar at the top of the page.

In case 2 however, whilst the menu items appear in the single correct location and no new menu bar is added to the top of the page, the page content is still shifted down.

In this case we would expect the page content to not be shifted.

Please complete the following information:

• Moodle Version 4.5.7+
• Boost Union Version v4.5-r29
• OS: Windows
• Browser: Chrome

Additional context

To solve this issue in the short term we have simply overriden the .theme-boost-union-smartmenu .navbar.fixed-top~#page.drawers style rule to not include the additional 40 pixels from the SCSS variable.