<template>
  <v-btn-toggle class="view_mode--switcher ma-3" dense rounded>
    <v-btn :to="{ query: { ...$route.query, list: true } }" exact>
      <v-icon>mdi-format-list-numbered</v-icon>
    </v-btn>
    <v-btn :to="{ query: { ...Array.from($route.query).map(({list, ...rest }) => rest ) } }" exact>
      <v-icon>mdi-calendar-month</v-icon>
    </v-btn>
  </v-btn-toggle>
</template>

<script>
export default {
  name: 'CampProgramViewModeSwitcher'
}
</script>

<style lang="scss" scoped>

.view_mode--switcher {
  opacity: .6;
}

.view_mode--switcher:hover {
  opacity: 1;
}

@media #{map-get($display-breakpoints, 'xs-only')}{
  .view_mode--switcher {
    position: fixed;
    z-index: 10;
    right: 0;
    top: 0;
  }
}

@media #{map-get($display-breakpoints, 'sm-and-up')}{
  .view_mode--switcher {
    position: fixed;
    z-index: 10;
    right: 8px;
    top: 73px !important;
  }
}
</style>

<template>
  <v-btn-toggle class="ec-viewmode-switcher ma-1 ma-sm-3" dense rounded>
    <v-btn :to="{ query: { ...$route.query, list: true } }" exact>
      <v-icon>mdi-format-list-numbered</v-icon>
    </v-btn>
    <v-btn :to="{ query: { ...Array.from($route.query).map(({list, ...rest }) => rest ) } }" exact>
      <v-icon>mdi-calendar-month</v-icon>
    </v-btn>
  </v-btn-toggle>
</template>

<script>
export default {
  name: 'CampProgramViewModeSwitcher'
}
</script>

<style lang="scss" scoped>

.ec-viewmode-switcher {
  opacity: .6;
}

.ec-viewmode-switcher:hover {
  opacity: 1;
}

.ec-viewmode-switcher ::v-deep .v-btn {
  min-width: 48px;
}

@media #{map-get($display-breakpoints, 'xs-only')}{
  .ec-viewmode-switcher {
    position: fixed;
    z-index: 10;
    right: 0;
    top: 2px;
  }
}

@media #{map-get($display-breakpoints, 'sm-and-up')}{
  .ec-viewmode-switcher {
    position: fixed;
    z-index: 10;
    right: 8px;
    top: 73px !important;
  }
}
</style>

Fix naming of css class
Fix naming of css class
