Initialize refactor of nav bar do a sidemenu.

This commit is contained in:
mateuswetah 2018-02-21 12:48:42 -03:00
parent 3c048a60b3
commit 121a481f6c
6 changed files with 918 additions and 206 deletions

1029
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"
},

View File

@ -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>

View File

@ -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)
);

View File

@ -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;

View File

@ -32,7 +32,7 @@ module.exports = {
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
}
]
},