Skip to content

Instantly share code, notes, and snippets.

@odirleiborgert
Forked from Phunky/app.vue
Created March 16, 2017 02:03
Show Gist options
  • Save odirleiborgert/91ede6a2cbcc15128cd32be8be646c41 to your computer and use it in GitHub Desktop.
Save odirleiborgert/91ede6a2cbcc15128cd32be8be646c41 to your computer and use it in GitHub Desktop.
<style lang="sass" scoped>
.app {
position : relative;
width : 100vw;
height : 100vh;
margin : 0 !important;
}
.appbar {
position : absolute;
top : 0;
left : 0;
right : 0;
height : 64px;
padding : .5em 1.1em;
background : #db4437;
svg {
display : inline-block;
max-width : 24px;
max-height : 48px;
margin-left : 4px;
fill : rgba(255,255,255,1);
cursor : pointer;
}
}
.sidebar {
position : absolute;
top : 64px;
bottom : 0;
left : 0;
padding : 1em 0;
}
.view {
position : absolute;
top : 64px;
right : 0;
bottom : 0;
left : 64px;
background : #eee;
padding : 1em;
}
</style>
<template lang="jade">
.app
.appbar
svg(@click='$refs.sidebar.show')
use(xlink:href="/static/sprites.svg#icon-menu")
.sidebar
v-sidebar(
:mini='sidemenu.mini',
:persistence='sidemenu.persistence',
v-ref:sidebar='') This would be my header
.view
</template>
<script>
import SuiButton from './components/sui-button.vue'
import VSidebar from './components/v-sidebar.vue'
export default {
data () {
return {
sidemenu: {
mini: [
{ svg: 'icon-question_answer' },
{ svg: 'icon-speaker_notes' },
{ svg: 'icon-thumb_up' },
{ svg: 'icon-thumb_down' },
],
persistence: [
{
items: [
{ text: 'Second' , svg: 'icon-question_answer' },
{ text: 'Third' , svg: 'icon-speaker_notes' },
{ text: 'Forth' , svg: 'icon-thumb_up' },
{ text: 'Fith' , svg: 'icon-thumb_down' },
]
},
{
header: 'Subheader',
items: [
{ text: 'First' , image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg' },
{ text: 'Second' , image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg' },
{ text: 'Third' , image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg' },
]
},
{
items: [
{ text: 'Fourth' , image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg' },
{ text: 'Fith' , image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg' },
{ text: 'Sixth' , image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg' },
]
}
]
}
}
},
events: {
'v-sidebar:show' () {
console.log('v-sidebar:show')
},
'v-sidebar:hide' () {
console.log('v-sidebar:hide')
}
},
components : {
SuiButton,
VSidebar
}
}
</script>
<style lang="sass" scoped>
.v-sidebar {
}
.header {
min-height : 64px;
padding : 1.5em 1em 1em;
margin-bottom : 8px;
background : rgba(0,0,0,.1);
color : rgba(0,0,0,.54);
}
.mini {
width : 64px;
align-items : center;
}
.persistent {
position : fixed;
top : 0;
left : 0;
bottom : 0;
width : 20vw;
background : #fff;
overflow : scroll;
z-index : 10;
.divider {
padding-bottom : 8px;
margin-bottom : 10px;
border-bottom : 1px solid rgba(0,0,0,.1);
}
.subheader {
flex : 0 0 48px;
padding : 0 16px 8px;
line-height : 40px;
font-weight : bolder;
color : rgba(0,0,0,.54);
}
&.v-transition {
transition : all .2s ease-in-out .1s;
transform : translate(0, 0);
}
&.v-enter,
&.v-leave {
transform : translate(-100%, 0);
}
}
.items {
display : flex;
flex-direction : column;
.item {
display : flex;
flex : 0 0 48px;
flex-direction : row;
align-items : center;
padding : 8px 16px;
color : rgba(0,0,0,.84);
transition : all .2s ease-in-out;
&:hover {
cursor : pointer;
background : rgba(0,0,0,.05)
}
}
.icon {
width : 40px;
margin-right : 16px;
img {
display : inline-block;
max-width : 32px;
max-height : 48px;
vertical-align : top;
}
svg {
display : inline-block;
max-width : 24px;
max-height : 48px;
margin-left : 4px;
fill : rgba(0,0,0,.54);
}
}
.text {
font-weight : bolder;
}
}
.overlay {
position : absolute;
top : 0;
left : 0;
bottom : 0;
width : 100vw;
background : rgba(0,0,0,.54);
z-index : 1;
&.v-transition {
transition : all .2s ease-in-out;
opacity : 1;
}
&.v-enter,
&.v-leave {
opacity : 0;
}
}
</style>
<template lang="jade">
.v-sidebar(@click='hide')
.mini
.items
slot(name='mini')
.item(v-for='item in mini')
.icon
img(:src='item.image', v-if='item.image')
svg(:class='item.svg', v-if='item.svg')
use(xlink:href="/static/sprites.svg#{{ item.svg }}")
.persistent(v-if='visible' transition='')
.header
slot
template(v-for='persistent in persistence')
.items
slot(name='persistence')
.divider(v-if='$index != 0')
.subheader(v-if="persistent.header") {{ persistent.header }}
.item(v-for="item in persistent.items")
.icon
img(:src='item.image', v-if='item.image')
svg(v-if='item.svg', :class='item.svg')
use(xlink:href="/static/sprites.svg#{{ item.svg }}")
.text {{ item.text }}
.overlay(v-if='visible' transition='')
</template>
<script>
import Vue from 'vue'
export default {
name: 'sidebar',
props: {
mini: {
type : Array,
default : false
},
persistence: {
type : Array,
default : false
},
visible: Boolean,
},
methods: {
show () {
this.visible = true
this.$root.$broadcast('v-sidebar:show')
},
hide () {
this.visible = false
this.$root.$broadcast('v-sidebar:hide')
},
toggle () {
this.visible ? this.hide() : this.show()
},
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment