I’m creating Uikit bindings for Aurelia, and I have a pretty common pattern that’s currently stumping me. For example, I have a navigation component that can be attached to a panel component. In a certain configuration, the navigation component pops out a drawer containing a panel that’s defined in the navigation component along the lines of:
div(slot="right") aire-navbar(light small rotate right target.bind="drawer") aire-panel aire-header i.fal.fa-code-merge h1 hello aire-panel aire-header i.fal.fa-palette span Palettes aire-body aire-panel(click.trigger="show()" active="true") aire-header i.fal.fa-brackets-curly span Generated aire-panel aire-header i.fal.fa-code-merge span History aire-drawer( ref="drawer" host="ancestor:nav" visible.bind="drawerOpen" opens="left" width="400" )
Which generates something that looks like:
What I would like to do is
1.) generate the navbar button from the header element (working, but probably not ideal at https://github.com/sunshower-io/aire/tree/components/container/src/main/nav)
2.) defer the lifecycle for the subcomponent (in this case, aire-panel) until it’s activated by someone clicking its corresponding button in the menu. Ideally, I would like to remove and add the panel to the DOM only when it’s active.
Any help would be greatly appreciated!