I am currently working on a sidebar menu component that is connected to a service holding items in the menu. This allows multiple sources to make alterations to the menu as needed.
Each item in the menu currently follows the SidebarItem interface:
export interface SidebarItem {
name: string,
link: Route|string,
icon ?: string
}
However, I now have the ability to capture specific events like click or hover and would like to provide an option for defining a callback function directly on the sidebar item itself.
What would be the optimal approach to achieve this? Should I add two properties to the interface and let users customize how to implement them, or are there alternative solutions available? I believe using classes for each sidebar item might not be ideal since it would create a new class for every item.
Additionally, I can utilize the aurelia event aggregator to dispatch events if necessary.
PS: If you find this question to be subjective, think of the title as "How to" instead. The solution I suggested is merely a guess and may not be completely accurate.