#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: 'Overview', icon: <House /> },
        {
          key: 'projects',
          label: 'Projects',
          icon: <FolderKanban />,
          children: [
            { key: 'design', label: 'Design resources', icon: <Palette /> },
            { key: 'release', label: 'Releases', icon: <Rocket /> },
          ],
        },
        { key: 'team', label: 'Team members', icon: <Users /> },
        { key: 'settings', label: 'Settings', 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: 'Overview', icon: <House /> },
  {
    key: 'resources',
    label: 'Resources',
    icon: <Folder />,
    children: [
      { key: 'components', label: 'Components', icon: <BookOpen /> },
      { key: 'themes', label: 'Themes', icon: <Palette /> },
    ],
  },
  { key: 'settings', label: 'Settings', 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">Horizontal navigation</Text>
        <Menu mode="horizontal" items={items} defaultSelectedKey="home" />
      </Flex>
      <Flex direction="column" gap="sm" align="center">
        <Text tone="muted">Collapsible sidebar</Text>
        <Button variant="ghost" size="sm" onClick={() => setCollapsed((value) => !value)}>
          Toggle sidebar
        </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: 'Overview', href: '#overview', icon: <House /> },
    {
      key: 'resources',
      label: 'Resources',
      icon: <BookOpen />,
      children: [
        { key: 'guides', label: 'Guides', href: '#guides' },
        {
          key: 'settings',
          label: 'Settings',
          href: '#settings',
          icon: <Settings />,
        },
      ],
    },
  ];
  return (
    <Space direction="vertical" align="center">
      <Menu
        aria-label={'Application navigation'}
        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">
        {`Current page: ${selected}. The example updates local state; replace the anchor with your router Link and retain its props.`}
      </Text>
    </Space>
  );
}