[SOLVED] Open Left Panel

I have a routable-tab with navbar. I want to open a tab menu. (Menu only for this tab). My code so far is:

    <Page>
    <Navbar inner sliding>
        <NavLeft>
            <Link href="/left-panel/"><Icon material="menu"></Icon></Link>
        </NavLeft>
        <NavTitle>Title</NavTitle>
    </Navbar>
    <BlockTitle>Default</BlockTitle>
  </Page>

and then in left-panel.jsx

     <Panel left cover>
            <Page>
                <List>
                    {menu}                  
                </List>
            </Page>
     </Panel>

This works but covers the whole tab and I want a menu style. tried to inline the whole page in “Panel”: page and the rest of the code here but this made the things worse (the whole screen area is covered with transparent div, that blocks all mouse events.

This seems like a tiny issue, but still can’t find how to solve it. And as there are no replies I wondered if my question is explained good enough? So I will try to clarify it a bit:

Is there a way to show a personalised per page menu?

Right now, all examples show a menu that is common for the whole application. It’s predefined at the start of the application and is made up from panel and a view with a static route in it or maybe I’m wrong.

What’s driving me crazy is that similar html was working in the standard framework. At least I don’t see what is different in react implementation. Here is a working standard implementation:

In tab page:

    <div class="page">
    <div class="navbar">
        <div class="navbar-inner sliding">
            <div class="left">
                <a href="/left-panel/" class="link">
                    <i class="icon f7-icons ios-only">menu</i>
                    <i class="icon material-icons md-only">menu</i>
                </a>
            </div>
            <div class="title">Title</div>
        </div>
    </div>

And left_panel.html

  <template>
  <div class="panel panel-left panel-cover">
    <div class="page">
        <div class="page-content">
            <div class="list links-list">
                <ul>
                    {{menu}}
                </ul>
            </div>
        </div>
    </div>
 </div>
 </template>

Finally I found what was wrong. My route wasn’t correct. I had to modify it , to look like:

    path: '/left-panel/',
    panel : {
        component: LeftPanel
    }