Added Disabled Prop to Sidebar Item

[ahmadJT]

• added disabled prop to side bar item

Description

• Added a disabled prop to the sidebar item
• Added disabled style when the item is disabled
• Added demo example for disabled side bar item

Markup:

<template>
  <component
    ref="rootElement"
    class="va-sidebar__item va-sidebar-item"
    tabindex="0"
    :class="{
      'va-sidebar-item--active': $props.active,
      'va-sidebar-item--disabled': $props.disabled,
    }"
    :style="computedStyle"
    :is="tagComputed"
    v-bind="linkAttributesComputed"
    v-on="keyboardFocusListeners"
  >
    <slot />
  </component>
</template>

const props = defineProps({
 // removed to keep PR short
  disabled: { type: Boolean, default: false },
})

<style lang="scss">
@import "../variables";
@import "../../../styles/resources";

.va-sidebar-item {
// removed to keep PR short
  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  @include keyboard-focus-outline("inherit", 2px, -2px);
}

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

Issue

closes #4151