...
 
Commits (2)
<template>
<div class="app">
<message-center></message-center>
<main-navigation
:items="mainNavigationItems"
></main-navigation>
<div class="app__main">
<router-view></router-view>
</div>
......@@ -8,15 +11,24 @@
</template>
<script>
import { mapState } from 'vuex';
import MessageCenter from './modules/MessageCenter';
import MainNavigation from './components/MainNavigation';
export default {
name: 'app',
data() {
return {};
},
computed: {
...mapState({
mainNavigationItems: (state) => state.navigation,
}),
},
components: {
MessageCenter,
MainNavigation,
},
};
</script>
......@@ -31,6 +43,13 @@
left: 16px;
z-index: 100;
}
.main-navigation {
position: absolute;
top: 16px;
left: 16px;
z-index: 99;
}
}
.app__main {
......
<template>
<nav class="main-navigation">
<ul>
<router-link
v-for="(d, i) in items"
tag="li"
:key="i"
:to="{ name: d.route }"
>
<a>{{d.name}}</a>
</router-link>
</ul>
</nav>
</template>
<script>
export default {
name: 'main-navigation',
props: {
items: Array,
},
};
</script>
<style lang="scss">
.main-navigation {
height: 2rem;
width: 100%;
font-family: Monaco;
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 0 0.25rem;
margin: 0.5rem;
&.router-link-active {
border-bottom: 2px solid black;
}
}
a {
color: black;
text-decoration: none;
}
}
</style>
......@@ -15,7 +15,6 @@ export default [
},
},
{
name: 'gradients',
path: '/gradients/:slug',
component: views.GradientView,
},
......@@ -29,4 +28,9 @@ export default [
path: '/accessibility',
component: views.AccessibilityView,
},
{
name: 'gradients',
path: '/gradients',
redirect: '/gradients/new',
},
];
export default {
colorA: { r: 0, g: 0, b: 0, a: 1 },
colorB: { r: 255, g: 255, b: 255, a: 1 },
colorA: { r: 255, g: 0, b: 0, a: 1 },
colorB: { r: 0, g: 255, b: 0, a: 1 },
};
export default {
currentColor: { r:0, g:0, b:0, a:1 },
notifications: [],
navigation: [{
name: 'Gradients',
route: 'gradients',
}, {
name: 'Mixer',
route: 'mixer',
}, {
name: 'Accessibility',
route: 'accessibility',
}],
};
......@@ -299,6 +299,7 @@ export default {
max-width: 100%;
height: 100%;
z-index: 0;
margin-top: 48px;
.ui-input {
&.ui-input--large {
......