start admin with semantic-ui

HTML

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <ui-navbar fixed="top">
    <a class="item" @click.prevent="onAttach">
      <i class="sidebar icon"></i>
    </a>
    <div class="right menu">
      <router-link to="/login" class="item">
        Login
      </router-link>
    </div>
  </ui-navbar>
  <ui-sidebar :open="visible" width="thin" direction="left" animation="uncover" closable dimmed>
    <template slot="sidebar">
      <router-link to="/" class="item" exact>
        <i class="home icon"></i>
        Home
      </router-link>
      <router-link to="/dashboard" class="item">
        <i class="block layout icon"></i>
        Dashboard
      </router-link>
    </template>
    
    <router-view></router-view>
    
  </ui-sidebar>
</div>

<template id="ui-sidebar">
  <div class="ui attached segmant pushable" @click="close">
    <div ref="sidebar" class="ui inverted vertical menu sidebar">
      <slot name="sidebar"></slot>
    </div>
    <div class="pusher" ref="pusher">
      <slot></slot>
    </div>
  </div>
</template>

<template id="ui-navbar">
  <div class="ui menu" ref="menu">
    <slot></slot>
  </div>
</template>

<template id="home">
  <div class="ui basic segment">
    <h3 class="ui header">Application Content</h3>
    <p></p>
  </div>
</template>

<template id="dashboard">
  <div class="ui basic segment">
    <h3 class="ui header">Dashboard Content</h3>
    <p></p>
  </div>
</template>

<template id="login">
  <div class="ui basic segment">
    <h3 class="ui header">Login page</h3>
    <p></p>
  </div>
</template>

CSS

@import url('https://unpkg.com/[email protected]/semantic.css');

#app {
  height: 100%;
  padding-top: 40px;
}

.ui.pushable {
  background-color: #545454;
}
.pushable > .pusher {
  background: white;
}

JavaScript

/**
 * Vue Router
 */
Vue.use(VueRouter)

const home = {
  template: '#home'
}
const dashboard = {
	template: '#dashboard'
}
const login = {
	template: '#login'
}

const router = new VueRouter({
	linkActiveClass: 'active',
	routes: [
  	{
    	path: '/',
      component: home
    },
    {
    	path: '/dashboard',
      component: dashboard
    },
    {
    	path: '/login',
      component: login
    }
  ]
})

/**
 * Ui Sidebar
 */
Vue.component('ui-sidebar', {
  template: '#ui-sidebar',
  props: {
    open: {
      type: Boolean,
      require: true
    },
    animation: {
    	type: String,
      default: 'uncover'
    },
    dimmed: {
    	type: Boolean,
      default: false
    },
    closable: {
    	type: Boolean,
      default: false
    },
    direction: {
    	type: String,
      default: 'left'
    },
    width: {
    	type: String,
      default: ''
    }
  },
  mounted() {
  	let classNames = []
    
    classNames.push(this.direction)
    
    if (this.animation !== '') {
    	classNames.push(...this.animation.split(' '))
    }
    
    if (this.width !== '') {
    	classNames.push(...this.width.split(' '))
    }
    
    if (this.visible) {
    	classNames.push('visible')
    }
    
  	this.$refs.sidebar.classList.add(...classNames)
  },
  data() {
  	return {
    	duration: 500,
      visible: this.open,
      stopAnimatingTimer: 0
    }
  },
  watch: {
    open: function (val) {
    	this.visible = !this.visible
      if (this.visible) {
        this.show()
      } else {
        this.hide()
      }
    }
  },
  methods: {
    show() {
      const sidebar = this.$refs.sidebar
      const pusher = this.$refs.pusher

      sidebar.classList.add('visible')
      if (this.dimmed) {
        pusher.classList.add('dimmed')
      }
      
      this.startAnimating(this.duration)
    },
    close() {
    	if (this.closable && this.visible) {
      	this.visible = false
      	this.hide()
      }
    },
    hide() {      
      const sidebar =...