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 { eventBus } from '@/app';
import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class AppHeader extends Vue {


    /**
     * Called when we want to change the route
     *
     * @param {string} url The url to the new route
     */
    onRouteChange(url: string) {
        eventBus.$emit('changeRoute', url);
    }
}
</script>