digitalmoves_circular_scroll_wheel_menu_quickstart_with_callback.ts

1import { ScrollWheelMenu, MenuItem } from '@digitalmoves/scroll-wheel-menu';
2
3// Define the menu items
4const items: MenuItem[] = [
5  { id: '1', label: 'Home', icon: 'home-icon-url' },
6  { id: '2', label: 'Settings', icon: 'settings-icon-url' },
7  { id: '3', label: 'Profile', icon: 'profile-icon-url' },
8  { id: '4', label: 'Messages', icon: 'messages-icon-url' },
9  { id: '5', label: 'Logout', icon: 'logout-icon-url' },
10];
11
12// Target container element
13const container = document.getElementById('menu-container') as HTMLElement;
14
15// Initialize the scroll wheel menu
16const menu = new ScrollWheelMenu(container, {
17  items: items,
18  radius: 150,
19  onSelect: (item: MenuItem) => {
20    console.log('Selected item:', item.label);
21  },
22});
23
24// Optionally, render the menu
25menu.render();