EQM: Move side panel titles to top of side panel

[nucleogenesis]

Overview

When you open the side panel the title is at the top of the main body of content.

It should instead be at the top of the SidePanel.

There is a #header slot we're using here - we need to put the page title in that slot.

It may be easiest to add a prop to SectionSidePanel then pass it into the slot from there since it's in the CreateExamPage/index component's template.

We've previously used a pattern where we map route and route names to their relevant titles in the route root. We could have it map to functions For example:

{
    // Basic example, we just pass, but don't call, the i18n function
    [PageNames.SOME_ROUTE]: someStringLabel$,
    // In some cases, we may have a condition that determines the string, so we can pass a function that calls the i18n functions we want based on the condition
    [PageNames.OTHER_ROUTE]: () => cond ? string1$(), string2$(),
}

If this object is available in the template, can just do obj[PageNames.SOME_ROUTE]() wherever we want the text to be.

---

The above isn't the only way

For example, see @rtibbles first comment below for what I think is a better idea than the above :)

I've tried to share context here that can help you get a head start on working out a solution but the above isn't the only way.

If you aren't sure where to go, ping on #kolibri-dev or the EQM channel in Slack for some help.

[rtibbles]

The other alternative would be to use the SectionSidePanel component inside of each of the subcomponents, to give them full control over the side panel, rather than instantiating it in the CreateExamPage and then injecting them into it.

[AlexVelezLl]

Just some findings:

In the course of the 0.18 work we instead passed a setTitle function to each subcomponent, and left the responsibility of setting the title to each subcomponent. Compared with both approaches above:

• Each subcomponent knows what they are rendering and therefore, what title the side panel should have, so it makes this parent component more abstract.
• The problem with rendering a sidepanel independently for each subcomponent is that when there is navigation between subcomponents, you can visually see a wonky flash because of the fading of the backdrop of the side panel that is being unmounted, and the appearance of the backdrop of the side panel that is being mounted. I don't think it's a big issue if the side panels are "independent" (e.g. navigating from the section settings side panel to the resource selection side panel), but it does feel weird if it happens when you are navigating between related side panels, e.g. subpages of the resource selection side panel.