Change per-component backdrop to global one

[parostatkiem-zz]

Description
Instead of having separate backdrop for LeftNav and TopNav components we now cover the whole App component with backdrop which is easier to understand and more natural according to what the backdrop actually does. The <iframe> with page content is displayed above the backdrop layer so it has to have its own backdrop (no changes here).
Changes proposed in this pull request:

• Change per-component backdrop to global one

Related issue(s)
#108

[jesusreal]

I personally wouldn't add the Backdrop element outside the application container. And I believe we don't need to wrap any element inside the Backdrop. I would write this markup like that:

<div id="app">
    <Backdrop></Backdrop>
    <div class="fd-page {hideNav? 'iframeContainerNoNav' : 'iframeContainer'}" use:init="context"></div>
    <TopNav pathData={navigationPath} />
    <LeftNav pathData={navigationPath} />
</div>

[parostatkiem-zz]

I think my approach is more natural and makes the code more referring to what we can actually see and do in the app. The backdrop wraps whole content and makes it unusable/unclickable, that's why I wrapped content in backdrop. I can change it if you really want, it's basically just code-understanding thing :)

[parostatkiem-zz]

How about modifying your suggestion to

<div id="app">
  <Backdrop>
    <div class="fd-page {hideNav? 'iframeContainerNoNav' : 'iframeContainer'}" use:init="context"></div>
    <TopNav pathData={navigationPath} />
    <LeftNav pathData={navigationPath} />
  </Backdrop>
</div>

?

[jesusreal]

Why do we need these slot tags here?

[parostatkiem-zz]

Because we wrap App's content in <Backdrop> tags. <slot> is for displaying what's inside component tags. It's the same as <ng-content> in Angular. Am I wrong?

[jesusreal]

I agree this is the right way to do it, otherwise it will be inconsistent, and we will continue having displaying issues. But I am not convinced with the fact that we are providing a feature but it does not work out of the box, since every app using luigi needs to wrap the iframe in a container styled with this z-index value.

[parostatkiem-zz]

This z-index value is assigned at Lugii Core's level so it works out of the box. The app developer doesn't have to implement any z-index value to the container.