searchanddisplace-core/resources/js/components/layout/Header.vue

<template>
    <div class="header">
        <!-- Left side of header -->
        <div class="left">
            <Button
                @click="onRouteChange('/')"
                class="p-button-primary"
                label="Search and Displace" />
        </div>

        <!-- Right side of header -->
        <div class="right">
            <Button
                @click="onRouteChange('/regex/create')"
                class="p-button-primary fc-button"
                label="Add regex" />
            <Button
                @click="onRouteChange('/searchers')"
                class="p-button-primary fc-button"
                label="Searchers" />
        </div>

        <ConfirmDialog :blockScroll="false"></ConfirmDialog>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class AppHeader extends Vue {
    onHomeButtonClick() {
        window.location.href = '/';
    }

    onRouteChange(url: string) {
        const el = document.body;
        setTimeout(() => {
            el.classList.remove('p-overflow-hidden');
        }, 10);
        this.$confirm.require({
            message: 'You will lose any progress on the current uploaded document. Are you sure you want to proceed?',
            header: 'Confirmation',
            icon: 'pi pi-exclamation-triangle',
            blockScroll: false,
            accept: () => {
                window.location.href = url;
            },
            reject: () => {
                // TODO: Show a message to the user that the action was cancelled.
            }
        });
    }
}
</script>