en-US

Only icons are displayed in the menu bar.

zh-CN

菜单栏只显示图标。

import { useState } from 'react';

import { LeftOutlined, RightOutlined, AppstoreOutlined, SettingOutlined, ExperimentOutlined } from '@react-devui/icons';
import { DMenu } from '@react-devui/ui';

export default function Demo() {
  const [mode, setMode] = useState('vertical');
  const [activeId, setActiveId] = useState<string>('Item22');

  return (
    <div className="container">
      <div className="button-container" onClick={() => setMode(mode === 'vertical' ? 'icon' : 'vertical')}>
        {mode === 'vertical' ? <LeftOutlined /> : <RightOutlined />}
      </div>
      <DMenu
        dWidth={300}
        dList={[
          {
            id: 'Sub1',
            title: 'Sub 1',
            type: 'sub',
            icon: <AppstoreOutlined />,
            children: [
              { id: 'Item11', title: 'Item 11', type: 'item', disabled: true },
              {
                id: 'Sub12',
                title: 'Sub 12',
                type: 'sub',
                children: [
                  { id: 'Item121', title: 'Item 121', type: 'item' },
                  { id: 'Item122', title: 'Item 122', type: 'item' },
                ],
              },
              { id: 'Item13', title: 'Item 13', type: 'item' },
              {
                id: 'Group14',
                title: 'Group 14',
                type: 'group',
                children: [
                  { id: 'Item141', title: 'Item 141', type: 'item' },
                  { id: 'Item142', title: 'Item 142', type: 'item' },
                ],
              },
            ],
          },
          {
            id: 'Sub2',
            title: 'Sub 2',
            type: 'sub',
            icon: <SettingOutlined />,
            children: [
              {
                id: 'Group21',
                title: 'Group 21',
                type: 'group',
              },
              { id: 'Item22', title: 'Item 22', type: 'item' },
              {
                id: 'Sub23',
                title: 'Sub 23',
                type: 'sub',
              },
            ],
          },
          {
            id: 'Sub3',
            title: 'Sub 3',
            type: 'sub',
            icon: <ExperimentOutlined />,
            disabled: true,
            children: [{ id: 'Item31', title: 'Item 31', type: 'item' }],
          },
          { id: 'Item4', title: 'Item 4', type: 'item' },
        ]}
        dActive={activeId}
        dMode={mode}
        onActiveChange={setActiveId}
      ></DMenu>
    </div>
  );
}

.container {
  display: inline-flex;
  flex-direction: column;
  max-width: 100%;
}

.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  cursor: pointer;
  background-color: var(--rd-background-color-primary);
}