Re-implement header bar (directus#408)

* Implement new header bar component

* rename header-bar to v-header-bar

* Make header bar a global component

* Remove header bar from main app.vue

* Remove header bar from main app.vue parent

* Use new header bar on pages

* Use store for sidebar nav state

* Render header button based on config passed to header bar

* Re-style alert

* Add button support to header

* Add header button to item listing

* Re-add buttons to edit view

* Fix styling of disabled button

src/app.vue

@@ -20,14 +20,10 @@
       area="full-page" />
 
     <div v-else>
-      <header-bar
-        :show-info-button="infoSidebarHasContent"
-        @toggleNav="toggleNav"
-        @toggleInfo="toggleInfo" />
       <v-blocker
         v-if="navActive && $mq === 'small'"
         :z-index="25"
-        @click="toggleNav(false)" />
+        @click="toggleNav" />
       <nav-sidebar
         v-show="navActive || $mq !== 'small'"
         @toggleNav="toggleNav" />
@@ -70,6 +66,7 @@ import NavSidebar from "./components/sidebars/nav-sidebar.vue";
 import InfoSidebar from "./components/sidebars/info-sidebar.vue";
 import VBlocker from "./components/blocker.vue";
 import VError from "./components/error.vue";
+import { TOGGLE_NAV } from "./store/mutation-types";
 
 export default {
   name: "directus",
@@ -82,11 +79,13 @@ export default {
   },
   data() {
     return {
-      navActive: false,
       infoActive: false
     };
   },
   computed: {
+    navActive() {
+      return this.$store.state.sidebars.nav;
+    },
     publicRoute() {
       return this.$route.meta.publicRoute || false;
     },
@@ -112,7 +111,7 @@ export default {
   watch: {
     $route() {
       this.bodyClass();
-      this.navActive = false;
+      this.$store.commit(TOGGLE_NAV, false);
       this.infoActive = false;
     },
     infoActive(visible) {
@@ -146,7 +145,7 @@ export default {
       }
     },
     toggleNav(visible = !this.navActive) {
-      this.navActive = visible;
+      this.$store.commit(TOGGLE_NAV, visible);
     },
     toggleInfo(visible = !this.infoActive) {
       this.infoActive = visible;
@@ -168,8 +167,6 @@ export default {
 
 <style lang="scss">
 body:not(.no-padding) {
-  padding-top: var(--header-height);
-
   @media (min-width: 50em) {
     padding-left: calc(
       var(--nav-sidebar-width) + 1px

src/components/header-bar/header-bar.vue

@@ -1,96 +1,149 @@
 <template>
-  <header class="header-bar">
+  <header class="v-header-bar">
     <button
+      :disabled="navActive"
       class="nav-toggle"
-      @click="$emit('toggleNav', true)"><i class="material-icons">menu</i></button>
-
-    <portal-target
-      class="title"
-      name="header-title"><h1 class="style-1"><v-breadcrumb /></h1></portal-target>
-
-    <portal-target
-      name="header-custom"
-      class="custom"
-      slim />
-
-    <header-button
-      v-if="showInfoButton"
-      icon="info"
-      class="button"
-      @click="$emit('toggleInfo')">
-      {{ $t('info') }}
-    </header-button>
-    <portal-target
-      name="header-buttons"
-      class="buttons" />
+      @click="activateNav"><i class="material-icons">menu</i></button>
+    <h1
+      v-if="title"
+      class="title">{{ title }}</h1>
+    <ol
+      v-else
+      class="breadcrumb title">
+      <li
+        v-for="({ name, path }, index) in (breadcrumb || defaultBreadcrumb)"
+        :key="path">
+        <template v-if="index !== (breadcrumb || defaultBreadcrumb).length - 1">
+        <router-link :to="path">{{ name }}</router-link></template>
+        <h1 v-else>{{ name }}</h1>
+      </li>
+    </ol>
+    <slot />
+    <slot name="buttons" />
   </header>
 </template>
 
 <script>
+import { TOGGLE_NAV } from "../../store/mutation-types";
+
 export default {
-  name: "header-bar",
+  name: "v-header-bar",
   props: {
-    showInfoButton: {
-      type: Boolean,
-      default: false
+    title: {
+      type: String,
+      default: null
+    },
+    breadcrumb: {
+      type: Array,
+      default: null
+    }
+  },
+  computed: {
+    defaultBreadcrumb() {
+      const routeParts = this.$route.path.split("/").filter(name => name);
+      return routeParts.map((part, i) => {
+        let url = "";
+        for (let x = 0; x < i; x++) {
+          url += `/${routeParts[x]}`;
+        }
+        url += `/${part}`;
+        return {
+          name: this.$helpers.formatTitle(part),
+          path: url
+        };
+      });
+    },
+    navActive() {
+      return this.$store.state.sidebars.nav;
+    }
+  },
+  methods: {
+    activateNav() {
+      this.$store.commit(TOGGLE_NAV, true);
     }
   }
 };
 </script>
 
 <style scoped lang="scss">
-.nav-toggle {
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-  margin-right: 20px;
-  cursor: pointer;
-  transition: opacity 140ms var(--transition);
-
-  &:hover {
-    opacity: 0.6;
-  }
-}
-
-.header-bar {
-  background-color: black;
+.v-header-bar {
   background-color: var(--darkest-gray);
   position: fixed;
   width: 100%;
   right: 0;
   top: 0;
   height: 4.62rem;
-  color: white;
+  color: var(--white);
   display: flex;
   align-items: center;
   z-index: 20;
   padding-left: 20px;
 
-  .title {
-    flex-grow: 1;
-    color: var(--white);
+  @media (min-width: 800px) {
+    padding-left: calc(var(--nav-sidebar-width) + 20px);
+  }
+
+  .nav-toggle {
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
     margin-right: 20px;
+    cursor: pointer;
+    transition: opacity 140ms var(--transition);
 
-    display: flex;
-    align-items: center;
+    &:hover {
+      opacity: 0.6;
+    }
+
+    @media (min-width: 800px) {
+      display: none;
+    }
+  }
+
+  .title {
+    color: var(--gray);
+    font-size: 1.38em;
+    line-height: 1.16;
+    font-weight: 400;
+    height: 20px;
+    flex-grow: 1;
   }
 
-  @media (min-width: 50em) {
-    width: calc(100% - var(--nav-sidebar-width));
+  .breadcrumb {
+    list-style: none;
+    padding: 0;
 
-    .nav-toggle {
-      display: none;
+    li {
+      display: inline-block;
+      &:not(:last-child)::after {
+        content: "chevron_right";
+        font-family: "Material Icons";
+        color: var(--dark-gray);
+        display: inline-block;
+        vertical-align: middle;
+        margin: 0 5px;
+      }
+    }
+
+    a {
+      text-decoration: none;
+      &:hover,
+      .user-is-tabbing &:focus {
+        color: var(--white);
+      }
     }
   }
-}
 
-.buttons {
-  display: flex;
-  height: 100%;
+  h1.title,
+  .title h1 {
+    color: var(--white);
+  }
 }
+</style>
 
-.button {
-  flex-shrink: 0;
+<style>
+body {
+  padding-top: var(--header-height);
 }
 </style>