Adds back button to primary menu and inserts Tainacan logo again on menu header.

src/admin/admin.vue

@@ -13,8 +13,6 @@
         name: "AdminPage",
         data(){
             return {
-                logoHeader: '../wp-content/plugins/tainacan/admin/images/tainacan_logo_header.png',
-                wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
             }
         },
         components: {

src/admin/components/primary-menu.vue

@@ -1,6 +1,13 @@
 <template>
     <nav id="primary-menu" :class="isCompressed ? 'is-compressed' : ''" role="navigation" aria-label="main navigation" class="column is-sidebar-menu">
         <aside class="menu">
+            <div class="menu-header">
+                <ul class="menu-list"><li><router-link tag="a" to="/">
+                    <b-icon size="is-medium" icon="chevron-left"></b-icon>
+                    <img class="tainacan-logo" :src="logoHeader"/>
+                </router-link></li></ul> 
+            </div>
+            
             <ul class="menu-list">
                 <li><router-link tag="a" to="/collections" :class="activeRoute == 'CollectionsPage' ? 'is-active':''">
                     <b-icon size="is-small" icon="folder-multiple"></b-icon> <span class="menu-text">{{ $i18n.get('collections')}}</span>
@@ -33,6 +40,8 @@ export default {
     name: 'PrimaryMenu',
     data(){
         return {
+            logoHeader: '../wp-content/plugins/tainacan/admin/images/tainacan_logo_header.png',
+            wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
             isCompressed: false,
             activeRoute: '/collections'
         }
@@ -61,6 +70,26 @@ export default {
         transition: max-width 0.2s linear; 
         max-width: 222px;
 
+        .menu-header {
+            background-color: $primary-darker;
+            height: 62px;
+            a { padding: 1em 2.5em }
+            .icon {
+                position: absolute;
+                opacity: 0;
+                visibility: hidden;
+                transition: opacity 0.2s linear, visibility 0.2s linear;
+                -webkit-transition: opacity 0.2s linear, visibility 0.2s linear;  
+            }
+            .tainacan-logo {
+                max-height: 28px;
+                opacity: 1;
+                visibility: visible;
+                transition: opacity 0.15s linear, visibility 0.15s linear;
+                -webkit-transition: opacity 0.15s linear, visibility 0.15s linear;
+            }
+        }
+
         li{
             a {
                 color: white;
@@ -91,9 +120,21 @@ export default {
 
         &.is-compressed {
             max-width: 42px;
+
+            .menu-header {
+                a { padding: 1.2em 0.3em }
+                .icon {
+                    visibility: visible; 
+                    opacity: 1;
+                }   
+                .tainacan-logo {   
+                    visibility: hidden; 
+                    opacity: 0;
+                }
+            }
             a{ padding: 1em 0.8em; }
-            .menu-text {
-                visibility: hidden;
+            .menu-text {   
+                visibility: hidden; 
                 opacity: 0;
             }
             box-shadow: -3px 0px 10px #111;
@@ -103,6 +144,21 @@ export default {
         @media screen and (max-width: 769px) {
             width: 100% !important;
             max-width: 100% !important;
+
+            &.is-compressed {
+
+                .menu-header {
+                    .icon {
+                        visibility: hidden !important; 
+                        opacity: 0 !important;
+                    }   
+                    .tainacan-logo {   
+                        visibility: visible !important; 
+                        opacity: 1 !important;
+                    }
+                }
+            }
+
             a{ padding: 1em 0.8em !important;}
             .menu-text {
                 display: none !important;

src/admin/js/router.js

@@ -22,7 +22,7 @@ import FieldsList from '../components/fields-list.vue'
 Vue.use(VueRouter); 
 
 const routes = [
-    { path: '/', component: CollectionsPage, meta: {title: 'Admin Page'} },
+    { path: '/', redirect:'/collections' },
 
     { path: '/collections', name: 'CollectionsPage', component: CollectionsPage, meta: {title: 'Collections Page'} },
     { path: '/collections/new', name: 'CollectionEditionPage', component: CollectionEditionPage, meta: {title: 'Create Collection'} },

src/admin/pages/edition/collection-edition-page.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h1 class="is-size-3">Collection creation  <b-tag v-if="collection != null && collection != undefined" :type="'is-' + getStatusColor(collection.status)" v-text="collection.status"></b-tag></h1>
+        <h1 class="is-size-3">{{ pageTitle }}  <b-tag v-if="collection != null && collection != undefined" :type="'is-' + getStatusColor(collection.status)" v-text="collection.status"></b-tag></h1>
         <form label-width="120px">
             <b-field label="Título">
                 <b-input
@@ -64,6 +64,7 @@ export default {
     name: 'CollectionEditionPage',
     data(){
         return {
+            pageTitle: '',
             collectionId: Number,
             collection: null,
             isLoading: false,
@@ -159,9 +160,11 @@ export default {
     created(){
 
         if (this.$route.fullPath.split("/").pop() == "new") {
+            this.pageTitle = this.$i18n.get('page_title_new_collection');
             this.createNewCollection();
         } else if (this.$route.fullPath.split("/").pop() == "edit") {
 
+            this.pageTitle = this.$i18n.get('page_title_edit_collection');
             this.isLoading = true;
 
             // Obtains current Collection ID from URL

src/admin/scss/_variables.scss

@@ -6,9 +6,11 @@ $primary: #7DB9C3;// #25a189;
 $primary-invert: findColorInvert($primary);
 $secondary: #1F2F56;
 $secondary-invert: findColorInvert($primary);
-
+ 
 $primary-light:#A5CDD7;
+$primary-lighter: lighten($primary-light, 4);
 $primary-dark: #55A0AF;
+$primary-darker: darken($primary-dark, 4);
 
 // Setup $colors to use as bulma classes
 $colors: (

src/admin/tainacan-admin-i18n.php

@@ -19,6 +19,10 @@ return [
     // Actions
     'edit' => __('Edit', 'tainacan'),
     'new' => __('New', 'tainacan'),
+
+    // Page Titles
+    'page_title_new_collection' => __('New Collection', 'tainacan'),
+    'page_title_edit_collection' => __('Edit Collection', 'tainacan'),
 ]
 
  ?>