Skip to content

Instantly share code, notes, and snippets.

@danielschmitz
Created January 11, 2018 18:14
Show Gist options
  • Save danielschmitz/447ca932120f27fa2427d7bfee361579 to your computer and use it in GitHub Desktop.
Save danielschmitz/447ca932120f27fa2427d7bfee361579 to your computer and use it in GitHub Desktop.
<template>
<div id="app" class="layout">
<Layout>
<Header>
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo"><h1>Meu Projeto</h1></div>
<div class="layout-nav">
<MenuItem name="1">
<router-link to="/">
<Button>Home</Button>
</router-link>
</MenuItem>
<MenuItem name="2">
<router-link to="/login">
<Button>Login</Button>
</router-link>
</MenuItem>
</div>
</Menu>
</Header>
<Layout>
<Sider hide-trigger :style="{background: '#fff'}">
<Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
<Submenu name="1">
<template slot="title">
<Icon type="ios-navigate"></Icon>
Item 1
</template>
<router-link to="/">
<MenuItem name="1-1">Home</MenuItem>
</router-link>
<router-link to="/login">
<MenuItem name="1-2">Login</MenuItem>
</router-link>
<MenuItem name="1-3">Option 3</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-analytics"></Icon>
Item 3
</template>
<MenuItem name="3-1">Option 1</MenuItem>
<MenuItem name="3-2">Option 2</MenuItem>
</Submenu>
</Menu>
</Sider>
<Layout :style="{padding: '24px'}">
<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
<router-view></router-view>
</Content>
</Layout>
</Layout>
</Layout>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style scoped>
.layout{
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-logo{
width: 200px;
color: #fff;
border-radius: 3px;
float: left;
position: relative;
left: 20px;
}
.layout-nav{
width: 420px;
margin: 0 auto;
margin-right: 20px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment