Menubar - Copy this React, Tailwind Component to your project
# Menubar Component Prompt (MVC Pattern Functional) ## Context Design a **Menubar** component for a React application using TypeScript and the MVC pattern. The menubar should resemble those commonly found in desktop applications, providing quick access to a consistent set of commands. The menu should be visually persistent, support keyboard navigation, and be fully accessible. ## Goals 1. Implement the **MVC pattern** in a functional style to manage the menubar's state and interactions. 2. Provide a reusable, customizable menubar component that supports nested menus and keyboard shortcuts. 3. Ensure accessibility, with focus management and ARIA roles to support screen readers and keyboard navigation. ## MVC Design Breakdown ### Model The **model** will manage the menubar's state, including which menu is open, active menu items, and keyboard focus tracking. ### View The **view** will render the menubar UI, including its menu items and submenus, and display them based on the state managed by the model. ### Controller The **controller** will handle user interactions, such as mouse clicks, keyboard navigation, opening/closing menus, and executing commands. ## Props Interface ```typescript interface MenubarProps { menus: MenubarMenu[]; // Array of menu items and their submenus onSelect?: (command: string) => void; // Callback when a menu item is selected orientation?: 'horizontal' | 'vertical'; // Menubar orientation keyboardShortcuts?: boolean; // Enable/disable keyboard shortcuts customClassNames?: { menubar?: string; // Class for the menubar container menu?: string; // Class for each menu menuItem?: string; // Class for each menu item submenu?: string; // Class for submenus }; } interface MenubarMenu { label: string; // Label of the menu item command?: string; // Command executed on selection submenu?: MenubarMenu[]; // Nested submenu items shortcut?: string; // Keyboard shortcut for the menu item disabled?: boolean; // Whether the menu item is disabled }
