import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/en/functional/Composables/useRouterList - Managing a list of links'/>

# `useRouterList`

Managing a list of links for the router. Allows creating navigation menus based on data lists, automatically handling active states and transitions.

**Parameters:**
- `list: RefType<ConstrBind<T>[] | undefined>` — list of navigation items. Each item must contain `value` and `label`.
- `selected?: Ref<string> | string` — initially selected item or its value. If not specified, the first item in the list is selected.
- `hasTo?: boolean` — automatically adds the `to` property to list items for navigation (default is `false`).

**Returns:**
An object with reactive properties and control methods:
- `item: ComputedRef<T | undefined>` — A computed property that returns the current active item object based on `selected`.
- `selected: Ref<string>` — A reactive reference to the value of the selected item. Allows both getting and setting the current selection.
- `label: ComputedRef<NumberOrString>` — A computed property that returns the label of the current selected item.
- `list: ComputedRef<ConstrBind<T>[]>` — A computed list of items. If `hasTo` is `true`, each item is automatically augmented with a `to` property for routing integration.
- `to(name?: string): void` — A method for programmatic navigation to an item by its name (`value`). Updates `selected` and performs `router.push`.
- `toMain(): void` — A method for quick navigation to the first ("main") item in the `list`.

```typescript
import { ref } from 'vue'
import { useRouterList } from '@dxtmisha/functional'

const menuItems = ref([
  { value: 'dashboard', label: 'Dashboard' },
  { value: 'settings', label: 'Settings' }
])

// Initialize with 'dashboard' selected and automatic 'to' property creation
const { list, selected, to } = useRouterList(menuItems, 'dashboard', true)

// The list will contain objects with a 'to' field, for example:
// { value: 'dashboard', label: 'Dashboard', to: { name: 'dashboard' } }

// Programmatic navigation
to('settings')
```