# ivyforms/0.3.1/frontend/src/composables/useMenuNavigation.ts

The Innovative Form Builder – IvyForms, version 0.3.1. 108 lines.

- Page: https://pluginprobe.com/plugins/ivyforms/0.3.1/code/frontend/src/composables/useMenuNavigation.ts
- Raw: https://pluginprobe.com/plugins/ivyforms/0.3.1/raw/frontend/src/composables/useMenuNavigation.ts
- Modified: 2025-09-04T07:37:14+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ivyforms/0.3.1/code/frontend/src/composables/useMenuNavigation.ts#L10-L20`.

```typescript
import { useRouter } from 'vue-router'
import { useUnsavedChangesStore } from '@/stores/useUnsavedChangesStore'
import { useActionEntityStore } from '@/stores/actionEntityStore.ts'
import { useFormBuilder } from '@/stores/useFormBuilder.ts'
import { useConfirmationSettingBuilder } from '@/stores/useConfirmationSettingBuilder.ts'
import { useNotificationSettingBuilder } from '@/stores/useNotificationSettingBuilder.ts'
import {
  IVYFORMS_EDIT_NOTIFICATIONS,
  IVYFORMS_NEW_NOTIFICATIONS,
  IVYFORMS_SETTINGS,
} from '@/constants/pages.ts'

export function useMenuNavigation() {
  const router = useRouter()
  const unsavedChangesStore = useUnsavedChangesStore()
  const actionEntityStore = useActionEntityStore()
  const formBuilderStore = useFormBuilder()
  const confirmationStore = useConfirmationSettingBuilder()
  const notificationStore = useNotificationSettingBuilder()

  // Helper to get all unsaved changes states at once
  function getUnsavedChangesStates() {
    return {
      hasFormBuilderUnsaved: unsavedChangesStore.hasUnsavedChanges('formBuilder', () =>
        formBuilderStore.getCurrentState(),
      ).value,
      hasConfirmationUnsaved: unsavedChangesStore.hasUnsavedChanges('confirmationBuilder', () =>
        confirmationStore.getCurrentState(),
      ).value,
      hasNotificationUnsaved: unsavedChangesStore.hasUnsavedChanges('notificationBuilder', () =>
        notificationStore.getCurrentState(),
      ).value,
    }
  }

  function getMenuRoute(item, fallbackRouteName = null) {
    const { hasFormBuilderUnsaved, hasConfirmationUnsaved, hasNotificationUnsaved } =
      getUnsavedChangesStates()
    if (hasFormBuilderUnsaved || hasConfirmationUnsaved || hasNotificationUnsaved) {
      return item.routeName
        ? { name: fallbackRouteName, params: { id: formBuilderStore.formId } }
        : undefined
    }
    return item.routeName
      ? { name: item.routeName, params: { id: formBuilderStore.formId } }
      : undefined
  }

  function onMenuClick(item, isActive) {
    if (isActive(item.routeName)) return

    const { hasFormBuilderUnsaved, hasConfirmationUnsaved, hasNotificationUnsaved } =
      getUnsavedChangesStates()

    if (hasFormBuilderUnsaved || hasConfirmationUnsaved || hasNotificationUnsaved) {
      actionEntityStore.showUnsavedChangesDialog(() => {
        // Reset unsaved changes for the current tab before navigating
        if (hasFormBuilderUnsaved) {
          unsavedChangesStore.resetUnsavedChanges('formBuilder', () =>
            formBuilderStore.getCurrentState(),
          )
        }
        if (hasConfirmationUnsaved) {
          unsavedChangesStore.resetUnsavedChanges('confirmationBuilder', () =>
            confirmationStore.getCurrentState(),
          )
        }
        if (hasNotificationUnsaved) {
          unsavedChangesStore.resetUnsavedChanges('notificationBuilder', () =>
            notificationStore.getCurrentState(),
          )
        }
        router.push({ name: item.routeName, params: { id: formBuilderStore.formId } })
      })
    } else {
      router.push({ name: item.routeName, params: { id: formBuilderStore.formId } })
    }
  }

  function isActive(routeName, index) {
    const matched = router.currentRoute.value.matched
    if (matched.some(({ name }) => name === routeName)) {
      return true
    }
    if (matched.length > 1 && index === 'settings') {
      const parent = matched[matched.length - 2]
      if (parent && parent.name === IVYFORMS_SETTINGS) {
        return true
      }
    }
    if (
      index === 'notifications' &&
      matched.some(
        ({ name }) => name === IVYFORMS_NEW_NOTIFICATIONS || name === IVYFORMS_EDIT_NOTIFICATIONS,
      )
    ) {
      return true
    }
    return false
  }

  return {
    getMenuRoute,
    onMenuClick,
    isActive,
  }
}

```