Vue.component('nav-router', {
    template: `
                <div>
                    <nav class="navbar is-fixed-bottom is-expanded is-primary" role="navigation" aria-label="main navigation">
                        <div class="navbar-brand is-expanded is-light">
				            <router-link to="/home" class="navbar-item is-primary is-expanded has-text-centered">
                                <i class="material-icons">home</i>
				            </router-link>

                            <router-link to="/files" class="navbar-item is-primary is-expanded">
                                <i class="material-icons">language</i>
                            </router-link>

                            <router-link to="/createMessage" class="navbar-item is-primary is-expanded">
                                <i class="material-icons">add_circle</i>
                            </router-link>

                            <router-link to="/bookmark" class="navbar-item is-primary is-expanded">
                                <i class="material-icons">bookmark</i>
                            </router-link>

                            <router-link to="/profil" class="navbar-item is-primary is-expanded">
                                <i class="material-icons">person</i>
                            </router-link>
                        </div>
                    </nav>
                </div>`,

});

const routes = [
            { path: "/",                component: HomeRouter },
            { path: "/home",            component: HomeRouter },
			{ path: "/files",           component: FileRouter },
			{ path: "/createMessage",   component: CreateMsgRouter },
            { path: "/bookmark",        component: BookmarkRouter },
			{ path: "/profil",          component: ProfilRouter },
        ];

const router = new VueRouter({
    routes,
    linkActiveClass: 'is-active'
});