Multiply SideDrawers w/ different drawerContent

[webleaf]

How implement two SideDrawers (one left and one right) with different drawerContent? Also both have to be over navigation bar.

It would be great, if this could be done in the following way:

<nsDrawer:RadSideDrawer xmlns:nsDrawer="nativescript-ui-sidedrawer">
    <nsDrawer:RadSideDrawer.drawerContent drawerLocation="Left">
       <Label text="Side Menu Left"></Label>
    </nsDrawer:RadSideDrawer.drawerContent>

    <nsDrawer:RadSideDrawer.drawerContent drawerLocation="Right">
       <Label text="Side Menu Right"></Label>
    </nsDrawer:RadSideDrawer.drawerContent>

    <nsDrawer:RadSideDrawer.drawerContent drawerLocation="Top">
       <Label text="Side Menu Top"></Label>
    </nsDrawer:RadSideDrawer.drawerContent>

    <nsDrawer:RadSideDrawer.drawerContent drawerLocation="Bottom">
       <Label text="Side Menu Bottom"></Label>
    </nsDrawer:RadSideDrawer.drawerContent>

    <nsDrawer:RadSideDrawer.mainContent>
       <Frame defaultPage="./main-content-page"></Frame>
    </nsDrawer:RadSideDrawer.mainContent>
</nsDrawer:RadSideDrawer>

or

<nsDrawer:RadSideDrawer xmlns:nsDrawer="nativescript-ui-sidedrawer">
    <nsDrawer:RadSideDrawer.drawerContentLeft>
       <Label text="Side Menu Left"></Label>
    </nsDrawer:RadSideDrawer.drawerContent>

    <nsDrawer:RadSideDrawer.drawerContentRight>
       <Label text="Side Menu Right"></Label>
    </nsDrawer:RadSideDrawer.drawerContent>

    <nsDrawer:RadSideDrawer.drawerContentTop>
       <Label text="Side Menu Top"></Label>
    </nsDrawer:RadSideDrawer.drawerContent>

    <nsDrawer:RadSideDrawer.drawerContentBottom>
       <Label text="Side Menu Bottom"></Label>
    </nsDrawer:RadSideDrawer.drawerContent>

    <nsDrawer:RadSideDrawer.mainContent>
       <Frame defaultPage="./main-content-page"></Frame>
    </nsDrawer:RadSideDrawer.mainContent>
</nsDrawer:RadSideDrawer>

Also nsDrawer:RadSideDrawer.drawerContent tag should have other own properties (transitions, events etc.).

[VladimirAmiorkov]

Hi @webleaf ,

Thank you for contacting us. Achieving two side drawer instances on the same Page while both are over the navigation bar unfortunately is not possible in the current version of the nativescript-ui-sidedrawer plugin. It is possible to use a combination of the "root RadSideDrawer" + a Page specific one (under the navigation bar). I will mark this as a "feature request".

On the additional questions, what do you mean by transition and events? If you want to change the transition effect of how the side drawer is opened you can do by setting the drawerTransition property of the RadSideDrawer as show here.

[webleaf]

@VladimirAmiorkov I mean it would be great, if it will be realized as i show by code snippets (one root tag with several drawerContent tags), to have possibility to tune every drawerContent tag separately. In other words, this task could be resolved by one instance of RadSideDrawer, but this instance should contain four content blocks for each side.

[VladimirAmiorkov]

@webleaf I see what you mean. The current version both on the native side and the JavaScript wrappers of the plugin only support setting a single View to the drawerContent that is using the drawerLocation property to determine where it should be shown from and by which gesture. I see that having all four locations could be useful in some cases which is why I tagged this as a "feature request".

Once this request is planned we will have in mind the proposed API during our implementation, thank you for providing the API proposal.

[pacome2017]

+1 for having two side drawers in an app. On the left, the main menu accessible through the whole app, and on the right, a sidedrawer for the contextual options. I wonder why not more people asking for this feature. From a user perspective I think it's very convenient and it is a must have for developers with relatively complex apps.