NavbarBackLink wrong placement after if condition

dawidmachon commented 2 years ago

Check that this is really a bug

[X] I confirm

Reproduction link

.

Bug description

Hi, in below code, when you press right button in navbar, then code in if statement should be shown. Then means, backlink arrow should be placed on left side, but it's shown on right side. Can anyone know why conditions in svelte, messing with slot placement for navbars?

<!-- +page.svelte -->
<script>
    import { Navbar, NavbarBackLink, Link } from 'konsta/svelte';
    let variable = false;
</script>

<Navbar title="My App">
    {#if variable == true}
        <NavbarBackLink slot="left" text="Back" onClick={() => history.back()} />
    {/if}
    <Link navbar iconOnly slot="right" onClick={() => (variable = true)}>ClickHere</Link>
</Navbar>

after clicking a button on right to change variable for if condition:

Expected Behavior

NavbarBackLink should be render on left side. When we remove if condition, then everything works fine. So NavBarBack button is placed correctly.

<!-- +page.svelte -->
<script>
    import { Navbar, NavbarBackLink, Link } from 'konsta/svelte';
    let variable = true;
</script>

<Navbar title="My App">

    <NavbarBackLink slot="left" text="Back" onClick={() => history.back()} />

    <Link navbar iconOnly slot="right" onClick={() => (variable = true)}>ClickHere</Link>
</Navbar>

Without if:

Actual Behavior

No response

Konsta UI version

1.0.2

Platform/Target and Browser Versions

windows, chrome dev 108.0.5359.10 (official) (64-bit)

Validations

[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
[X] Make sure this is a Konsta UI issue and not a framework-specific issue

Would you like to open a PR for this bug?

[ ] I'm willing to open a PR

nolimits4web commented 1 year ago

Use it like so:


<svelte:fragment slot="left">
{#if variable == true}
        <NavbarBackLink text="Back" onClick={() => history.back()} />
    {/if}
</svelte:fragment>

nolimits4web commented 1 year ago

Use it like so:


<svelte:fragment slot="left">
{#if variable == true}
        <NavbarBackLink text="Back" onClick={() => history.back()} />
    {/if}
</svelte:fragment>

kimonneuhoff commented 1 year ago

Hello!

Unfortunately with the subnavbar there will be whitespace where otherwise the content would be. Is there anything I can do about that?

This is my code: ` {#if selectedPage == 0}

Button Button {/if} `

konstaui / konsta