Create navigation in Panel

Questions
1

Hello,
I have some struggle creating a navigation inside a panel.
I am using svelte to create different views.

What I have is a component inside drawer.svelte which contains a panel with links.
I load this panel in multiple other components, f.e. home.svelte, page1.svelte and so on.

Unfortunately, the routing works exactly twice, then I receive the Uncaught TypeError: app is undefined (panel-class.js) error.

I have no idea what might be wrong with this approach, and would be happy for any hints.

drawer.svelte:

<script>
imports...
</script>
<Panel left>
    <List>
        <ListItem panelClose link="/current" title="Aktuell" />
        <ListItem panelClose link="/forecast" title="Vorhersage" />
        <ListItem panelClose link="/radar" title="Radar" />
        <ListItem panelClose link="/einstellungen" title="Einstellungen" />
    </List>
</Panel>

page1.svelte:

<script>
...
import Drawer from "../components/drawer.svelte";
...
</script>
<Page name="current">
    <!-- Top Navbar -->
    <Drawer />

    <Navbar>
        <NavLeft>
            <Link iconF7="bars" panelOpen="left" />
        </NavLeft>
        <NavTitle>Vorhersage</NavTitle>
    </Navbar>

   ...
</Page>
2

Panels within the Page must have a containerEl property set pointing to parent page elements like here Panel Svelte Component | Framework7 Svelte Documentation

3

Thank you for your answer :slight_smile:
This did solve me issue.

Due to your hint, I moved the panel to the app.svelte file. I was able to remove the panel from each page, since it was the same on all of them.