From 744bb47ae7ed930b41beca9c2a0f5a12cf069ced Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 28 Apr 2019 18:50:05 +0100
Subject: [PATCH] Add ProjectBreadcrumb component

---
 src/components/Banner.vue            |  8 +++++---
 src/components/ProjectBreadcrumb.vue | 11 +++++++++++
 src/views/Project.vue                | 14 +++++++++++++-
 3 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ProjectBreadcrumb.vue

diff --git a/src/components/Banner.vue b/src/components/Banner.vue
index 06a7d02..af64d37 100644
--- a/src/components/Banner.vue
+++ b/src/components/Banner.vue
@@ -2,14 +2,16 @@
   <div>
     <header class="bg-gray-900 text-white pt-4 pb-12">
       <div class="max-w-6xl mx-auto px-4">
-        <div class="flex justify-between items-center -mx-4">
-          <div class="w-1/2 px-4">
+        <div class="flex-1 flex justify-between items-center -mx-4">
+          <div class="w-1/7 px-4">
             <router-link :to="{ name: 'projects' }">
               <svg alt="icon" class="w-6 h-6" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><polygon id="path-1" points="0 0 27.6677333 0 27.6677333 11.0021333 0 11.0021333"></polygon><polygon id="path-3" points="0 0.0373333333 27.6677333 0.0373333333 27.6677333 3.7744 0 3.7744"></polygon><polygon id="path-5" points="0 0.365866667 27.6677333 0.365866667 27.6677333 6.01066667 0 6.01066667"></polygon></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-61.000000, -43.000000)"><g transform="translate(61.000000, 43.000000)"><g><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><g></g><polygon fill="#ffffff" mask="url(#mask-2)" points="-1.86666667 12.8688 29.5344 12.8688 29.5344 -1.86666667 -1.86666667 -1.86666667"></polygon></g><g transform="translate(0.000000, 23.893333)"><mask id="mask-4" fill="white"><use xlink:href="#path-3"></use></mask><polygon fill="#ffffff" mask="url(#mask-4)" points="-1.86666667 5.64106667 29.5344 5.64106667 29.5344 -1.82933333 -1.86666667 -1.82933333"></polygon></g><g transform="translate(0.000000, 14.186667)"><mask id="mask-6" fill="white"><use xlink:href="#path-5"></use></mask><polygon fill="#ffffff" mask="url(#mask-6)" points="-1.86666667 7.87733333 29.5344 7.87733333 29.5344 -1.5008 -1.86666667 -1.5008"></polygon></g></g></g></g></svg>
             </router-link>
           </div>
 
-          <div class="w-1/2 px-4">
+          <slot name="banner-left"></slot>
+
+          <div class="w-1/4 px-4">
             <div class="flex justify-end">
               <button type="button" class="font-semibold hover:bg-gray-700 py-1 px-2 rounded inline-flex">
                 Oliver Davies
diff --git a/src/components/ProjectBreadcrumb.vue b/src/components/ProjectBreadcrumb.vue
new file mode 100644
index 0000000..1c015a7
--- /dev/null
+++ b/src/components/ProjectBreadcrumb.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="flex-1 flex items-center text-sm">
+    <ul class="flex spaced-x-3">
+      <li class="flex">
+        <router-link :to="{ name: 'projects' }" class="font-semibold text-white opacity-75">Projects</router-link>
+        <svg class="h-6 w-6 fill-current text-white opacity-75" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.9 9.9c0-.3.1-.5.3-.7.4-.4 1-.4 1.4 0l3.5 3.5 3.5-3.5c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.4.4-1 .4-1.4 0l-4.2-4.2c-.2-.2-.3-.4-.3-.7z"/></svg>
+      </li>
+      <li class="font-semibold">Rebuilding Platform.sh</li>
+    </ul>
+  </div>
+</template>
diff --git a/src/views/Project.vue b/src/views/Project.vue
index fd4eb46..a6cc8f6 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -1,6 +1,18 @@
 <template>
   <div>
-    <banner></banner>
+    <banner>
+      <project-breadcrumb slot="banner-left"></project-breadcrumb>
+    </banner>
     Project
   </div>
 </template>
+
+<script>
+import ProjectBreadcrumb from '@/components/ProjectBreadcrumb'
+
+export default {
+  components: {
+    ProjectBreadcrumb
+  }
+}
+</script>