<template lang="pug">
  q-btn(
    padding="14px 14px 14px 10px",
    style="width: 76px"
    :class="checkActive",
    :href="path",
    :id="id",
    @click="(e) => changeStylePage(e)"
  )
    slot
</template>

<script>
export default {
  name: "ButtonSidebar",
  props: {
    path: String,
    id: String,
    changeStylePage: Function,
    active: Boolean,
  },
  data() {
    return {
      selectedStyle: false,
    };
  },
  computed: {
    checkActive() {
      return this.active ? "active button" : "button";
    },
  },
};
</script>

<style lang="sass" scoped>
.button
  background-color: trnsparent
  border-radius: 0 4px 4px 0
  border-left: 4px solid transparent
.active
  background-color: var(--btn-blue-color-1)
  border-left-color: var(--btn-blue-color)
  color: var(--btn-blue-color)
.button:hover
  background-color: var(--btn-blue-color-1)
  border-left-color: var(--btn-blue-color)
  color: var(--btn-blue-color)
</style>
