Mirrors/WebTools-NG
2
0
Fork 0
mirror of https://github.com/WebTools-NG/WebTools-NG synced 2024-11-25 20:40:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

added header and menu layout

Browse source
This commit is contained in:
knoldesparker 2020-05-09 13:02:35 +02:00
parent d12f021150
commit cdbc536ee0
3 changed files with 214 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/App.vue
View file

@ -1,9 +1,64 @@
<template>
<div id="app">
<router-view/>
<div id="content" :class="{ collapsed: isCollapsed }">
<Header></Header>
<div>
<router-view></router-view>
</div>
</div>
<div id="side-menu">
<Menu @e-iscollapsed='setCollapsed'></Menu>
</div>
</div>
</template>
<script>
import Menu from './components/layout/Menu';
import Header from './components/layout/Header';
export default {
name: "app",
data(){
return {
isCollapsed: false
}
},
components:{
Menu,
Header,
}, methods: {
setCollapsed(value){
console.log("This is a call")
console.log(value)
this.isCollapsed = value
},
}, props: {
width: {
type: String,
default: '250px'
}
}
}
</script>
<style>
#content.collapsed {
padding-left: 62px;
}
#content {
padding-left: 250px;
transition: 0.3s ease;
}
.v-sidebar-menu.vsm_expanded {
max-width: 250px !important;
}
</style>

24
src/components/layout/Header.vue Normal file
View file

@ -0,0 +1,24 @@
<template>
<section class="hero is-dark is-small">
<div class="hero-body">
<div class="columns is-desktop is-vcentered">
<div class="">
<figure class="image is-48x48">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
<div class="">
<div id="title" >
<p id="top_title" class="title is-size-3">WebTools-NG</p>
</div>
</div>
</div>
</div>
</section>
</template>
<style scoped>
#title {
margin-left: 15px;
}
</style>

134
src/components/layout/Menu.vue Normal file
View file

@ -0,0 +1,134 @@
<template>
<sidebar-menu
:menu="menu"
:collapsed="collapsed"
@toggle-collapse="onToggleCollapse"
@item-click="onItemClick"
/>
</template>
<script>
import '@fortawesome/fontawesome-free/css/all.css'
export default {
data() {
return {
menu: [
{
header: true,
title: 'Tools',
hiddenOnCollapse: true
},
{
href: { path: '/' },
title: 'Home',
icon: 'fa fa-home'
},
{
href: { path: '/' },
title: 'Subtitles',
icon: 'fas fa-closed-captioning'
},
{
href: { path: '/' },
title: 'Logs',
icon: 'fas fa-clipboard-list'
},
{
href: { path: '/' },
title: 'UAS',
icon: 'fas fa-box-open'
},
{
href: { path: '/' },
title: 'FindMedia',
icon: 'fas fa-photo-video'
},
{
href: { path: '/' },
title: 'Playlists',
icon: 'fas fa-list'
},
{
href: { path: '/' },
title: 'Techinfo',
icon: 'fas fa-stethoscope'
},
{
header: true,
title: 'Options',
hiddenOnCollapse: true
},
{
href: { path: '/' },
title: 'Language',
icon: 'fas fa-language'
},
{
href: { path: '/' },
title: 'About us',
icon: 'fas fa-question-circle'
},
{
href: { path: '/' },
title: 'Theme',
icon: 'fas fa-palette'
},
{
href: { path: '/' },
title: 'Factory Reset',
icon: 'fas fa-power-off'
},
{
href: { path: '/' },
title: 'Logout',
icon: 'fas fa-sign-out-alt'
},
{
header: true,
title: 'Help',
hiddenOnCollapse: true
},
{
href: { path: '/' },
title: 'WebTools Forum',
icon: 'fab fa-forumbee'
},
{
href: { path: '/' },
title: 'WebTools Github',
icon: 'fab fa-github'
},
{
href: { path: '/' },
title: 'WebTools Wiki',
icon: 'fab fa-wikipedia-w',
}
],
collapsed: false,
}
},methods: {
onToggleCollapse(collapsed) {
this.$emit("e-iscollapsed", collapsed);
console.log(collapsed)
},
onItemClick(event, item) {
console.log('onItemClick')
console.log(event)
console.log(item)
}
},
}
</script>
<style lang="css" scoped>
.v-sidebar-menu {
background-color: #363636;
}
</style>