separate how it works

src/components/chart/ToolbarButton.vue

@@ -2,7 +2,7 @@
 <v-tooltip :text="tooltip" location="top">
   <template v-slot:activator="{ props }">
     <v-btn v-bind="props" :color="isCurrent?'primary':undefined" variant="text"
-           :icon="icon" @click="$router.push(path)"/>
+           :icon="icon" @click="()=>nav(route)"/>
   </template>
 </v-tooltip>
 </template>
@@ -10,10 +10,12 @@
 <script setup>
 import {computed} from "vue";
 import {useRoute} from "vue-router";
+import {nav} from "/src/misc.js"
 
-const props = defineProps(['icon', 'path', 'tooltip'])
-const route = useRoute();
-const isCurrent = computed(() => route.path === props.path)
+const props = defineProps(['icon', 'route', 'tooltip'])
+console.log('toolbar button props', props.route)
+const router = useRoute();
+const isCurrent = computed(() => router.name === props.route)
 </script>
 
 <style scoped lang="scss">