import { createElement, render, useState } from 'rax';
import DriverUniversal from 'driver-universal';
import { Nav, Button, Drawer } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';
import '../../components/index.css';

// on select
const onSelect = (itemKey, e) => {
  console.log(itemKey);
};

const options = ['Nav 1', 'Nav 2', 'Nav 3', 'Nav 4', 'Nav 5'];

const NavDemo = () => {
  const [showDrawer, setDrawerShow] = useState(false);
  return (
    <View className="app">
      <Text className="demo-title">side nav</Text>
      <View className="demo-content">
        <Button type="primary" model="outline" onClick={() => setDrawerShow(true)}>
          show side nav
        </Button>
        <Drawer
          visible={showDrawer}
          placement="left"
          width={500}
          onClose={() => {
            setDrawerShow(false);
          }}
        >
          <Nav onSelect={() => setDrawerShow(false)}>
            {options.map((op) => {
              return (
                <Nav.Item icon={'arrow-right'} key={op}>
                  {op}
                </Nav.Item>
              );
            })}
          </Nav>
        </Drawer>
      </View>
    </View>
  );
};
// render(<NavDemo />, null, { driver: DriverUniversal });
 export default NavDemo