Initialize refactor of nav bar do a sidemenu.

package.json

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

src/admin/admin.vue

@@ -1,18 +1,24 @@
 <template>
     <div id="tainacan-admin-app">
-        <nav class="navbar is-secondary" role="navigation" aria-label="main navigation">
+        <div class="columns is-fullheight">
-            <div class="navbar-brand">
+            <nav id="primary-menu" role="navigation" aria-label="main navigation" class="column is-2 is-sidebar-menu is-hidden-mobile">
-                <router-link class="navbar-item" to="/">
+                <aside class="menu">
-                    <img :src="logoHeader" alt="Tainacan Admin" height="32">
+                    <router-link to="/">
-                </router-link>
+                        <img :src="logoHeader" alt="Tainacan Admin" height="32">
-                <router-link class="navbar-item" to="/collections">{{ $i18n.getString('header', 'collections')}}</router-link>
+                    </router-link>
+                    <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 column is-main-content">
+                <router-view></router-view>
             </div>
-            <a :href="wordpressAdmin" class="is-pulled-right">
-                <i class="mdi mdi-close mdi-36px mdi-light"></i>
-            </a>
-        </nav>
-        <div class="container">
-            <router-view></router-view>
         </div>
     </div>
 </template>
@@ -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>
+

src/admin/scss/_variables.scss

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

src/admin/scss/tainacan-admin.scss

@@ -1,25 +1,5 @@
-// Import Bulma's core
+// Tainacan custom colors and bulma's core
-@import "../../../node_modules/bulma/sass/utilities/_all.sass";
+@import "./_variables.scss";
-
-// 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)
-);
 
 // Links
 $link: $primary;

webpack.config.js

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