<template>
  <button type="button" :class="selected ? 'selected' : ''">
    <i class="fa">
      <slot></slot>
    </i>
    <span class="title">
      {{ title }}
    </span>
  </button>
</template>

<script lang="ts">
import { defineComponent, toRefs } from "vue";

export default defineComponent({
  name: "SideNav",
  props: {
    title: {
      type: String
    },
    selected: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    return {
      ...toRefs(props)
    };
  }
});
</script>

<style lang="css" scoped>
@import "./SideNav.css";
</style>
