Drawer Menu

Renders inside the slide-out/sidebar navigation drawer, typically opened from the Header's menu button. Rendered exactly once - it's a single persistent element, not a per-item template. Typically a list of navigation links/menu items, commonly built from data.menuItems.

type: "drawer-menu" - a block with settings - see Settings Panel for how its configurable fields work.

Data

• data.menuItems - always available automatically: an array of up to 5 { label: string, icon: string, action: Action } navigation items. Never declare your own menuItems field in configurationSchema.json - it's added for you.
• Any other field this block's own configurationSchema.json defines.

Render each item's action on an action-capable prop, e.g. <Actionable action={item.action}>.

Example

import React from 'react';
import { Flexbox, Icon, Text, Actionable } from '@evlop/native-components';
import { CustomBlock } from '@evlop/shopify';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const DrawerMenu: CustomBlock.DrawerMenu = ({ data }) => {
  const insets = useSafeAreaInsets();
  const menuItems = Array.isArray(data.menuItems) ? data.menuItems : [];

  return (
    <Flexbox flexDirection="column" paddingTop={insets.top + 16} paddingBottom={insets.bottom + 16} gap={2}>
      {menuItems.map((item, index) => (
        <Actionable key={`${item.label || 'menu-item'}-${index}`} action={item.action}>
          <Flexbox flexDirection="row" alignItems="center" gap={14} paddingLeft={20} paddingRight={20} paddingTop={12} paddingBottom={12}>
            {item.icon ? <Icon icon={item.icon} size={22} color="gray-700" /> : null}
            <Text fontSize="md">{item.label}</Text>
          </Flexbox>
        </Actionable>
      ))}
    </Flexbox>
  );
};

export default DrawerMenu;