mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-11-02 20:18:08 +00:00 
			
		
		
		
	This PR has the initial version of the new sidebar targeted for the next major redesign of the app. This PR includes the following changes - Components in the `layouts-next` and `base-next` directories in `dashboard/components` - Two generic components `Avatar` and `Icon` - `SidebarGroup` component to manage expandable sidebar groups with nested navigation items. This includes handling active states, transitions, and permissions. - `SidebarGroupHeader` component to display the header of each navigation group with optional icons and active state indication. - `SidebarGroupLeaf` component for individual navigation items within a group, supporting icons and active state. - `SidebarGroupSeparator` component to visually separate nested navigation items. (They look a lot like header) - `SidebarGroupEmptyLeaf` component to render empty state of any navigation groups. ---- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Pranav <pranavrajs@gmail.com>
		
			
				
	
	
		
			40 lines
		
	
	
		
			1.0 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			40 lines
		
	
	
		
			1.0 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 | 
						|
import { useRoute, useRouter } from 'vue-router';
 | 
						|
 | 
						|
export function useSidebarKeyboardShortcuts(toggleShortcutModalFn) {
 | 
						|
  const route = useRoute();
 | 
						|
  const router = useRouter();
 | 
						|
 | 
						|
  const isCurrentRouteSameAsNavigation = routeName => {
 | 
						|
    return route.name === routeName;
 | 
						|
  };
 | 
						|
 | 
						|
  const navigateToRoute = routeName => {
 | 
						|
    if (!isCurrentRouteSameAsNavigation(routeName)) {
 | 
						|
      router.push({ name: routeName });
 | 
						|
    }
 | 
						|
  };
 | 
						|
  const keyboardEvents = {
 | 
						|
    '$mod+Slash': {
 | 
						|
      action: () => toggleShortcutModalFn(true),
 | 
						|
    },
 | 
						|
    '$mod+Escape': {
 | 
						|
      action: () => toggleShortcutModalFn(false),
 | 
						|
    },
 | 
						|
    'Alt+KeyC': {
 | 
						|
      action: () => navigateToRoute('home'),
 | 
						|
    },
 | 
						|
    'Alt+KeyV': {
 | 
						|
      action: () => navigateToRoute('contacts_dashboard'),
 | 
						|
    },
 | 
						|
    'Alt+KeyR': {
 | 
						|
      action: () => navigateToRoute('account_overview_reports'),
 | 
						|
    },
 | 
						|
    'Alt+KeyS': {
 | 
						|
      action: () => navigateToRoute('agent_list'),
 | 
						|
    },
 | 
						|
  };
 | 
						|
 | 
						|
  return useKeyboardEvents(keyboardEvents);
 | 
						|
}
 |