Adds sass-resource-loader to use imports of variables.scss in separate components without loading multimple times the file. Initial implementation of primary side menu bar with contraction.

package-lock.json

@@ -7386,6 +7386,31 @@
         }
       }
     },
+    "sass-resources-loader": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/sass-resources-loader/-/sass-resources-loader-1.3.2.tgz",
+      "integrity": "sha512-7U55FKFMD7I//l/Ijm3GrqjOBw66D6NbGrwiD/uZ/S85fOB/4a3kibsaRWYkbO9t1aQPZz1V/69C5k2B1nS1bw==",
+      "dev": true,
+      "requires": {
+        "async": "2.6.0",
+        "chalk": "1.1.3",
+        "glob": "7.1.2",
+        "loader-utils": "1.1.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
+          "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",
+          "dev": true,
+          "requires": {
+            "big.js": "3.2.0",
+            "emojis-list": "2.1.0",
+            "json5": "0.5.1"
+          }
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",

package.json

@@ -29,6 +29,7 @@
     "element-theme-chalk": "^2.1.0",
     "file-loader": "^0.9.0",
     "postcss-loader": "^2.1.0",
+    "sass-resources-loader": "^1.3.2",
     "style-loader": "^0.19.1",
     "vue-custom-element": "^1.0.13",
     "vue-loader": "^13.7.1",

src/admin/admin.vue

@@ -1,26 +1,14 @@
 <template>
     <div id="tainacan-admin-app" class="columns is-fullheight">
-        <nav id="primary-menu" role="navigation" aria-label="main navigation" class="column is-2 is-sidebar-menu">
+        <primary-menu></primary-menu>
-            <aside class="menu">
+        <div class="column is-main-content">
-                <h1 class="menu-level-title">{{ $i18n.get('repository') }}</h1>
-                <ul class="menu-list">
-                    <li><router-link tag="a" to="/collections">{{ $i18n.get('collections')}}</router-link></li>
-                    <li><router-link tag="a" to="/items">{{ $i18n.get('items')}}</router-link></li>
-                    <li><router-link tag="a" to="/fields">{{ $i18n.get('fields')}}</router-link></li>
-                    <li><router-link tag="a" to="/filters">{{ $i18n.get('filters')}}</router-link></li>
-                    <li><router-link tag="a" to="/categories">{{ $i18n.get('categories')}}</router-link></li>
-                    <li><router-link tag="a" to="/events">{{ $i18n.get('events')}}</router-link></li>
-                    <li><a class="navbar-item" :href="wordpressAdmin">Wordpress</a></li>
-                </ul>
-            </aside>
-        </nav>
-        <div class="container column is-main-content">
             <router-view></router-view>
         </div>
     </div>
 </template>
 
 <script>
+    import PrimaryMenu from './components/primary-menu.vue';
     export default {
         name: "AdminPage",
         data(){
@@ -28,6 +16,9 @@
                 logoHeader: '../wp-content/plugins/tainacan/admin/images/tainacan_logo_header.png',
                 wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
             }
+        },
+        components: {
+            PrimaryMenu
         }
     }
 </script>
@@ -40,32 +31,24 @@
         height: 100%;
         margin-bottom: 0px;
         margin-top: 0px;
-    }
+    }  
-
-    #primary-menu {
-        background-color: $primary;
-
-        li{
-            a {color: white !important;}
-            a:hover {color: $primary !important;}
-        }
-    }
 
     .is-main-content {
         padding-bottom: 0px;
         padding-top: 0px;
+
+        margin: 0 auto;
+        position: relative;
     }
 
     #secondary-menu {
         background-color: $secondary;
 
-        li{
+        li{ 
             a {color: white !important;}
             a:hover {color: $secondary !important;}
         }
     }
 
-    
-
 </style>
 

src/admin/components/collections-list.vue

@@ -31,7 +31,7 @@
                     @page-change="onPageChange">
                 <template slot-scope="props">
 
-                    <b-table-column field="featured_image" width="55" sortable="{{ false }}">
+                    <b-table-column field="featured_image" width="55">
                         <template v-if="props.row.featured_image" slot-scope="scope">
                             <img class="table-thumb" :src="`${props.row.featured_image}`"/>
                         </template>

src/admin/components/primary-menu.vue

@@ -0,0 +1,85 @@
+<template>
+    <nav id="primary-menu" :class="isCompressed ? 'is-compressed' : ''" role="navigation" aria-label="main navigation" class="column is-sidebar-menu">
+        <aside class="menu">
+            <ul class="menu-list">
+                <li><router-link tag="a" to="/collections" :class="activeRoute == '/collections' ? 'is-active':''">
+                    <b-icon size="is-small" icon="folder-multiple"></b-icon> <span class="menu-text">{{ $i18n.get('collections')}}</span>
+                </router-link></li>
+                <li><router-link tag="a" to="/items" :class="activeRoute == '/items' ? 'is-active':''">
+                    <b-icon size="is-small" icon="note-multiple"></b-icon> <span class="menu-text">{{ $i18n.get('items')}}</span>
+                </router-link></li>
+                <li><router-link tag="a" to="/fields" :class="activeRoute == '/fields' ? 'is-active':''">
+                    <b-icon size="is-small" icon="format-list-checks"></b-icon> <span class="menu-text">{{ $i18n.get('fields')}}</span>
+                </router-link></li>
+                <li><router-link tag="a" to="/filters" :class="activeRoute == '/filters' ? 'is-active':''">
+                    <b-icon size="is-small" icon="filter"></b-icon> <span class="menu-text">{{ $i18n.get('filters')}}</span>
+                </router-link></li>
+                <li><router-link tag="a" to="/categories" :class="activeRoute == '/categories' ? 'is-active':''">
+                    <b-icon size="is-small" icon="shape"></b-icon> <span class="menu-text">{{ $i18n.get('categories')}}</span>
+                </router-link></li>
+                <li><router-link tag="a" to="/events" :class="activeRoute == '/events' ? 'is-active':''">
+                    <b-icon size="is-small" icon="calendar"></b-icon> <span class="menu-text">{{ $i18n.get('events')}}</span>
+                </router-link></li>
+                <li><a class="navbar-item" :href="wordpressAdmin">
+                    <b-icon size="is-small" icon="wordpress"></b-icon> <span class="menu-text">Wordpress</span>
+                </a></li>
+            </ul>
+        </aside>
+    </nav>
+</template>
+
+<script>
+export default {
+    name: 'PrimaryMenu',
+    data(){
+        return {
+            isCompressed: false,
+            activeRoute: '/collections'
+        }
+    },
+    watch: {
+        '$route' (to, from) {
+            this.isCompressed = (to.params.id != undefined);
+            this.activeRoute = to.path;
+        }
+    },
+    created () {
+        this.isCompressed = (this.$route.params.id != undefined);
+        this.activeRoute = this.$route.path;
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+    @import "../scss/_variables.scss";
+
+    #primary-menu {
+        background-color: $primary;
+        -webkit-transition: width 0.8s; /* Safari */
+        transition: all 0.1s;
+        width: 180px !important;
+        max-width: 180px !important;
+
+        li{
+            a {color: white}
+            a:hover {color: $primary}
+            a.is-active {
+                background-color: white;
+                color: $secondary;
+                color: $primary;
+            }
+        }
+
+        &.is-compressed {
+            width: 64px !important;
+            max-width: 64px !important;
+            .menu-text {
+                display: none;
+            }
+            box-shadow: -1px 0px 5px #111 inset;
+        }
+    }
+</style>
+
+

src/admin/pages/collection-page.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="columns is-fullheight">
+    <div class="container columns is-fullheight">
         <nav id="secondary-menu" role="navigation" aria-label="secondary navigation" class="column is-2 is-sidebar-menu">
             <aside class="menu">
                 <ul class="menu-list">

webpack.config.js

@@ -33,7 +33,15 @@ module.exports = {
             {
                 test: /\.css$/,
                 use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
+            },
+            {
+                test: /\.scss$/,
+                loader: 'sass-resources-loader',
+                options: {
+                    resources: path.resolve(__dirname, './src/admin/scss/_variables.scss')
+                }
             }
+
         ]
     },
     resolve: {