Initialize refactor of nav bar do a sidemenu.
This commit is contained in:
parent
3c048a60b3
commit
121a481f6c
File diff suppressed because it is too large
Load Diff
|
@ -12,6 +12,8 @@
|
|||
"buefy": "^0.6.3",
|
||||
"bulma": "^0.6.2",
|
||||
"mdi": "^2.1.19",
|
||||
"node-sass": "^4.7.2",
|
||||
"sass-loader": "^6.0.6",
|
||||
"vue": "^2.5.13",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
|
|
|
@ -1,20 +1,26 @@
|
|||
<template>
|
||||
<div id="tainacan-admin-app">
|
||||
<nav class="navbar is-secondary" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<router-link class="navbar-item" to="/">
|
||||
<div class="columns is-fullheight">
|
||||
<nav id="primary-menu" role="navigation" aria-label="main navigation" class="column is-2 is-sidebar-menu is-hidden-mobile">
|
||||
<aside class="menu">
|
||||
<router-link to="/">
|
||||
<img :src="logoHeader" alt="Tainacan Admin" height="32">
|
||||
</router-link>
|
||||
<router-link class="navbar-item" to="/collections">{{ $i18n.getString('header', 'collections')}}</router-link>
|
||||
</div>
|
||||
<a :href="wordpressAdmin" class="is-pulled-right">
|
||||
<i class="mdi mdi-close mdi-36px mdi-light"></i>
|
||||
</a>
|
||||
<ul class="menu-list">
|
||||
<li><router-link tag="a" to="/collections">{{ $i18n.getString('header', 'collections')}}</router-link></li>
|
||||
<li><a class="navbar-item">Items</a></li>
|
||||
<li><a class="navbar-item">Campos</a></li>
|
||||
<li><a class="navbar-item">Filtros</a></li>
|
||||
<li><a class="navbar-item">Atividades</a></li>
|
||||
<li><a class="navbar-item" :href="wordpressAdmin">Admin do Wordpress</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<div class="container column is-main-content">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -28,3 +34,18 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import "./scss/_variables.scss";
|
||||
|
||||
#primary-menu {
|
||||
background-color: $primary;
|
||||
li{
|
||||
a {color: white !important;}
|
||||
a:hover {color: $primary !important;}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
@ -0,0 +1,22 @@
|
|||
// Import Bulma's core and variables
|
||||
@import "../../../node_modules/bulma/sass/utilities/_all.sass";
|
||||
|
||||
// Tainacan custom colors
|
||||
$primary: #25a189;
|
||||
$primary-invert: findColorInvert($primary);
|
||||
$secondary: #01295c;
|
||||
$secondary-invert: findColorInvert($primary);
|
||||
|
||||
// Setup $colors to use as bulma classes
|
||||
$colors: (
|
||||
"white": ($white, $black),
|
||||
"black": ($black, $white),
|
||||
"light": ($light, $light-invert),
|
||||
"dark": ($dark, $dark-invert),
|
||||
"primary": ($primary, $primary-invert),
|
||||
"secondary": ($secondary, $secondary-invert),
|
||||
"info": ($info, $info-invert),
|
||||
"success": ($success, $success-invert),
|
||||
"warning": ($warning, $warning-invert),
|
||||
"danger": ($danger, $danger-invert)
|
||||
);
|
|
@ -1,25 +1,5 @@
|
|||
// Import Bulma's core
|
||||
@import "../../../node_modules/bulma/sass/utilities/_all.sass";
|
||||
|
||||
// Tainacan custom colors
|
||||
$primary: #25a189;
|
||||
$primary-invert: findColorInvert($primary);
|
||||
$secondary: #01295c;
|
||||
$secondary-invert: findColorInvert($primary);
|
||||
|
||||
// Setup $colors to use as bulma classes
|
||||
$colors: (
|
||||
"white": ($white, $black),
|
||||
"black": ($black, $white),
|
||||
"light": ($light, $light-invert),
|
||||
"dark": ($dark, $dark-invert),
|
||||
"primary": ($primary, $primary-invert),
|
||||
"secondary": ($secondary, $secondary-invert),
|
||||
"info": ($info, $info-invert),
|
||||
"success": ($success, $success-invert),
|
||||
"warning": ($warning, $warning-invert),
|
||||
"danger": ($danger, $danger-invert)
|
||||
);
|
||||
// Tainacan custom colors and bulma's core
|
||||
@import "./_variables.scss";
|
||||
|
||||
// Links
|
||||
$link: $primary;
|
||||
|
|
|
@ -32,7 +32,7 @@ module.exports = {
|
|||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader', 'postcss-loader'],
|
||||
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue