#Menu 菜单

import { Menu } from '@ifhover/leaf-ui';

import { FolderKanban, House, Palette, Rocket, Settings, Users } from 'lucide-react';

export function MenuBasic() {
  return (
    <Menu
      mode="inline"
      defaultSelectedKey="design"
      defaultOpenKeys={['projects']}
      items={[
        { key: 'home', label: '工作台', icon: <House /> },
        {
          key: 'projects',
          label: '项目管理',
          icon: <FolderKanban />,
          children: [
            { key: 'design', label: '设计资源', icon: <Palette /> },
            { key: 'release', label: '发布管理', icon: <Rocket /> },
          ],
        },
        { key: 'team', label: '团队成员', icon: <Users /> },
        { key: 'settings', label: '设置', icon: <Settings /> },
      ]}
    />
  );
}

import type { MenuItem } from '@ifhover/leaf-ui';

import { Button, Flex, Menu, Text } from '@ifhover/leaf-ui';

import { BookOpen, Folder, House, Palette, Settings } from 'lucide-react';

import { useState } from 'react';

const items: MenuItem[] = [
  { key: 'home', label: '概览', icon: <House /> },
  {
    key: 'resources',
    label: '资源',
    icon: <Folder />,
    children: [
      { key: 'components', label: '组件', icon: <BookOpen /> },
      { key: 'themes', label: '主题', icon: <Palette /> },
    ],
  },
  { key: 'settings', label: '设置', icon: <Settings /> },
];

export function MenuHorizontal() {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <Flex direction="column" gap={20}>
      <Flex direction="column" gap="sm" align="center">
        <Text tone="muted">横向导航</Text>
        <Menu mode="horizontal" items={items} defaultSelectedKey="home" />
      </Flex>
      <Flex direction="column" gap="sm" align="center">
        <Text tone="muted">可折叠侧栏</Text>
        <Button variant="ghost" size="sm" onClick={() => setCollapsed((value) => !value)}>
          切换折叠
        </Button>
        <Menu collapsed={collapsed} items={items} defaultSelectedKey="home" />
      </Flex>
    </Flex>
  );
}

import type { MenuItem } from '@ifhover/leaf-ui';

import { Menu, Space, Text } from '@ifhover/leaf-ui';

import { BookOpen, House, Settings } from 'lucide-react';

import { type AnchorHTMLAttributes, cloneElement, isValidElement, type ReactElement, useState } from 'react';

export function MenuRouting() {
  const [selected, setSelected] = useState('overview');
  const items: MenuItem[] = [
    { key: 'overview', label: '概览', href: '#overview', icon: <House /> },
    {
      key: 'resources',
      label: '资源',
      icon: <BookOpen />,
      children: [
        { key: 'guides', label: '使用指南', href: '#guides' },
        {
          key: 'settings',
          label: '设置',
          href: '#settings',
          icon: <Settings />,
        },
      ],
    },
  ];
  return (
    <Space direction="vertical" align="center">
      <Menu
        aria-label={'应用导航'}
        items={items}
        selectedKey={selected}
        defaultOpenKeys={['resources']}
        onSelect={setSelected}
        linkRender={(_item, link) => {
          if (!isValidElement(link)) return link;
          const element = link as ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>;
          return cloneElement(element, {
            onClick: (event) => {
              element.props.onClick?.(event);
              event.preventDefault();
            },
          });
        }}
      />
      <Text tone="muted">
        {`当前页面：${selected}。示例切换本地状态；接入路由时使用自己的 Link，并保留传入属性。`}
      </Text>
    </Space>
  );
}