Loading a custom inapp-page inside Navigation drawer

​ This example shows how to load a custom inapp-page inside Navigation drawer. ​

Steps

---

1. get pageID of the in-app page you created from dashboard. For example, in this url https://v3.appmaker.xyz/apps/${projID}/blockEditor/drawercategories it will be drawercategories.
2. Create a new page and register it as DrawerMenu.
3. Add the following code in the page you created in step 2(DrawerMenu). ​

​
import { ToolBarIcons as ICONS } from '@appmaker-xyz/shopify';
import { appSettings } from '@appmaker-xyz/core';
​
const appmakerImages = appSettings.getOption('appmakerImages');
​
const home = {
  toolBarItems: [
    ICONS.SEARCH,
    ICONS.WISHLIST,
    ICONS.CART,
  ],
  attributes: {
    removeClippedSubviews: false,
    insideSafeAreaView: true,
    rootContainerStyle: {
      flex: 1,
      paddingHorizontal: 24,
    },
    contentContainerStyle: {
      flex: 1,
    },
  },
  blocks: [
    {
      name: 'appmaker/DrawerHeader',
      clientId: 'drawer-header',
      attributes: {
        viewSingle: true,
        bgImg: appmakerImages.drawerHeaderImage,
        showLoginRegister: !appSettings.getOptionAsBoolean('hide_login'),
        textColor: appSettings.getOption('drawer_header_title_color'),
        user: '{{appStorageState.user}}',
        userName: '{{appStorageState.user.displayName}}',
      },
      dependencies: {
        appStorageState: ['user'],
      },
    },
    {
      name: 'appmaker/in-app-page',
      attributes: {
        pageId: 'drawercategories', // here you need to add the pageId of the in-app page you created.
      },
    }
  ],
  stickyFooter: {
    blocks: [
    ],
  }
};
​
export default home;
​