Add header to organization dashboard page

app/views/admin/shared/_new_private_header.erb

@@ -0,0 +1,9 @@
+<div id="header">
+<nav class="navbar-placeholder">
+  <div class="navbar-placeholder-logo">
+        <%= image_tag ("imagotype.svg") %>
+  </div>
+</nav>
+</div>
+<%= stylesheet_link_tag  'header.css',  :media => 'all' %>
+<%= javascript_include_tag  'header' %>

app/views/layouts/application.html.erb

@@ -17,7 +17,7 @@
     <%= insert_google_tag_manager_no_script('primary') %>
     <% if ( ( controller_name != "visualizations" && controller_name != "tables" )  || action_name != "show" ) %>
       <% breadcrumb = local_assigns.fetch(:breadcrumb, true) %>
-      <%= render 'admin/shared/private_header', :breadcrumb => breadcrumb %>
+      <%= render 'admin/shared/new_private_header' %>
 
       <% if current_user.notification.present? %>
         <div class="CDB-Text FlashMessage">

assets/stylesheets/new-dashboard/bundles/_header.scss

@@ -4,6 +4,24 @@
 @import "../typography";
 @import "../utilities";
 
-#app {
+#app,
+.FormAccount-Section {
   padding-top: 64px;
 }
+
+.navbar-placeholder {
+  display: flex;
+  position: fixed;
+  z-index: 11;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 64px;
+  border-bottom: 1px solid $white;
+  background-color: $primary-color;
+}
+
+.navbar-placeholder-logo {
+  width: 24px;
+  height: 24px;
+}

config/application.rb

@@ -69,6 +69,7 @@ module CartoDB
       cdb.js
       carto_node.js
       embed.js
+      header.js
       dashboard_templates.js
       dashboard_deps.js
       dashboard.js
@@ -163,6 +164,7 @@ module CartoDB
       editor3.css
       builder_embed.css
 
+      header.css
       table.css
       leaflet.css
       map.css

lib/assets/javascripts/new-dashboard/bundles/header/components/RouterLink.js

@@ -1,4 +1,7 @@
 import Vue from 'vue';
+import getCARTOData from 'new-dashboard/store/utils/getCARTOData';
+
+const CARTOData = getCARTOData();
 
 Vue.component(
   'router-link',
@@ -9,7 +12,7 @@ Vue.component(
     },
     computed: {
       url: function () {
-        const baseUrl = window.CartoConfig.data.user_data.base_url;
+        const baseUrl = CARTOData.user_data.base_url;
         return baseUrl + this.staticRoute;
       }
     }

lib/assets/javascripts/new-dashboard/bundles/header/header.js

@@ -4,12 +4,14 @@ import i18n from 'new-dashboard/i18n';
 import NavigationBar from 'new-dashboard/components/NavigationBar/NavigationBar';
 import 'new-dashboard/bundles/header/components/RouterLink';
 import 'new-dashboard/directives/click-outside';
+import getCARTOData from 'new-dashboard/store/utils/getCARTOData';
 
 Vue.config.productionTip = false;
 
-const user = window.CartoConfig.data.user_data;
-const baseUrl = window.CartoConfig.data.user_data.base_url;
-const notificationsCount = window.CartoConfig.data.organization_notifications.length;
+const CARTOData = getCARTOData();
+const user = CARTOData.user_data;
+const baseUrl = CARTOData.user_data.base_url;
+const notificationsCount = CARTOData.organization_notifications.length;
 
 /* eslint-disable no-new */
 new Vue({

lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue

@@ -167,8 +167,11 @@ export default {
 }
 
 .navbar-imagotype {
+  position: absolute;
+  left: 50%;
   width: 24px;
   height: 24px;
+  transform: translate3d(-50%, 0, 0);
 }
 
 .navbar-user {

lib/assets/javascripts/new-dashboard/components/Search/Search.vue

@@ -14,6 +14,9 @@
 
 <script>
 import SearchSuggestions from './Suggestions/SearchSuggestions';
+import getCARTOData from 'new-dashboard/store/utils/getCARTOData';
+
+const CARTOData = getCARTOData();
 
 export default {
   name: 'Search',
@@ -24,7 +27,7 @@ export default {
     return {
       searchTerm: '',
       isInputFocused: false,
-      baseUrl: window.CartoConfig.data.user_data.base_url
+      baseUrl: CARTOData.user_data.base_url
     };
   },
   props: {

lib/assets/javascripts/new-dashboard/store/utils/getCARTOData.js

@@ -4,6 +4,7 @@ export default function getCARTOData () {
   }
 
   return {
-    user_data: window.user_data
+    user_data: window.user_data,
+    organization_notifications: window.organization_notifications
   };
 }

webpack/v4/webpack.base.config.js

@@ -222,7 +222,7 @@ module.exports = {
         ]
       },
       {
-        test: /\.(ttf|eot|woff|woff2|svg)(.+#.+)?$/,
+        test: /\.(ttf|eot|woff|woff2)(.+#.+)?$/,
         use: {
           loader: 'file-loader',
           options: {
@@ -233,7 +233,7 @@ module.exports = {
         }
       },
       {
-        test: /\.(png|gif)$/,
+        test: /\.(png|gif|svg)$/,
         use: {
           loader: 'file-loader',
           options: {