@mozaic-ds/vue/src/components/sidebarnavitem/README.md

Mozaic-Vue is the Vue.js implementation of ADEO Design system

# MSidebarNavItem

SidebarNavItem is a component that renders a sidebar navigation item with optional icon support. It handles active, locked, and external states, shows tooltips or floating items when the sidebar is collapsed, and supports click events.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `tag` | - | `string` | - |
| `label*` | The text label displayed for the navigation item. | `string` | - |
| `icon` | Optional icon component displayed alongside the label. | `Component` | - |
| `href` | The URL the navigation item links to. | `string` | - |
| `to` | If defined, the item will act as a router-link to the specified route. | `string` | - |
| `locked` | Marks the item as locked. Shows a lock icon and prevents interaction. | `boolean` | - |
| `external` | Indicates the link is external. Opens in a new tab and shows an external link icon. | `boolean` | - |
| `active` | Marks the item as active, applying the active styling. | `boolean` | - |

## Events

| Name | Description | Type |
| --- | --- | --- |
| `click` | - | `[value: MouseEvent]` |

## Dependencies

### Depends on

- [MTooltip](../tooltip)

### Graph

```mermaid
graph TD;
  MSidebarNavItem --> MTooltip
style MSidebarNavItem fill:#008240,stroke:#333,stroke-width:4px
```

### Used By

- [DefaultCase.stories](../sidebar/stories)
- [WithExpandOnly.stories](../sidebar/stories)
- [WithProfileInfoOnly.stories](../sidebar/stories)
- [WithSingleLevel.stories](../sidebar/stories)
- [_MSidebarFooterMenu](../sidebarfooter)

### Graph

```mermaid
graph TD;
  DefaultCase.stories --> MSidebarNavItem
  WithExpandOnly.stories --> MSidebarNavItem
  WithProfileInfoOnly.stories --> MSidebarNavItem
  WithSingleLevel.stories --> MSidebarNavItem
  _MSidebarFooterMenu --> MSidebarNavItem
style MSidebarNavItem fill:#008240,stroke:#333,stroke-width:4px
```