vbv/client/src/components/header/CloseButton.vue

40 lines
1.0 KiB
Vue

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
function navigateToVisibleChrome() {
const removeRoutes: string[] = [];
// Function to pop routes until `meta.hideChrome` is `false`
const findVisibleChromeRoute = () => {
const currentRoute = router.currentRoute.value;
if (currentRoute?.meta?.hideChrome) {
removeRoutes.push(currentRoute.fullPath || currentRoute.path);
router.back();
} else {
// Cleaning up stored routes when reached the target
if (removeRoutes.length) removeRoutes.length = 0;
}
};
// Watch the route change
router.afterEach((_to, from) => {
if (removeRoutes.includes(from.fullPath || from.path)) {
findVisibleChromeRoute();
}
});
// Start popping routes
findVisibleChromeRoute();
}
</script>
<template>
<div class="flex justify-end">
<button type="button" class="p-3" @click="navigateToVisibleChrome()">
<it-icon-close class="size-7 text-black"></it-icon-close>
</button>
</div>
</template>