96 lines
4.5 KiB
JavaScript
96 lines
4.5 KiB
JavaScript
Vue.component('nav-router', {
|
|
template: `
|
|
<div>
|
|
<nav class="navbar is-fixed-bottom is-expanded is-primary is-hidden-desktop" 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 is-hidden-desktop">
|
|
<i class="material-icons">home</i>
|
|
</router-link>
|
|
|
|
<router-link to="/files" class="navbar-item is-primary is-expanded">
|
|
<i class="material-icons">search</i>
|
|
</router-link>
|
|
|
|
<router-link to="/createMessage" class="navbar-item is-primary is-expanded is-hidden-desktop">
|
|
<i class="material-icons">add_circle</i>
|
|
</router-link>
|
|
|
|
<router-link to="/bookmark" class="navbar-item is-primary is-expanded is-hidden-desktop">
|
|
<i class="material-icons">bookmark</i>
|
|
</router-link>
|
|
|
|
<router-link to="/profil" class="navbar-item is-primary is-expanded is-hidden-desktop">
|
|
<i class="material-icons">person</i>
|
|
</router-link>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="is-fullheight">
|
|
<div class="column is-sidebar-menu is-hidden-touch">
|
|
<aside class="menu is-medium">
|
|
<ul class="menu-list">
|
|
<li><router-link to="/home" class="is-hidden-touch">
|
|
<i class="material-icons">home</i> Home
|
|
</router-link></li>
|
|
|
|
<li><router-link to="/files" class="is-hidden-touch">
|
|
<i class="material-icons">language</i> Language
|
|
</router-link></li>
|
|
|
|
<li><router-link to="/createMessage" class="is-hidden-touch">
|
|
<i class="material-icons">add_circle</i> Create Message
|
|
</router-link></li>
|
|
|
|
<li><router-link to="/bookmark" class="is-hidden-touch">
|
|
<i class="material-icons">bookmark</i> Bookmark
|
|
</router-link></li>
|
|
|
|
<li><router-link to="/profil" class="is-hidden-touch">
|
|
<i class="material-icons">person</i> Profil
|
|
</router-link></li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</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'
|
|
});
|
|
|
|
/*
|
|
<div class="nav-right nav-menu is-hidden-desktop-only">
|
|
<router-link to="/home" class="nav-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
|
|
<i class="material-icons">home</i> Home
|
|
</router-link>
|
|
|
|
<router-link to="/files" class="nav-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
|
|
<i class="material-icons">language</i> Language
|
|
</router-link>
|
|
|
|
<router-link to="/createMessage" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
|
|
<i class="material-icons">add_circle</i> Create Message
|
|
</router-link>
|
|
|
|
<router-link to="/bookmark" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
|
|
<i class="material-icons">bookmark</i> Bookmark
|
|
</router-link>
|
|
|
|
<router-link to="/profil" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
|
|
<i class="material-icons">person</i> Profil
|
|
</router-link>
|
|
</div>
|
|
*/
|