From a031a44f92220e14fa9dbf8666887c9ae3cb1f05 Mon Sep 17 00:00:00 2001
From: Graham Smith <gsmith@skye.local>
Date: Tue, 14 Jul 2020 14:19:00 -0400
Subject: [PATCH] breadcrumb
---
src/components/Breadcrumb.vue | 94 +++++++++++++++++++++++++++++++++++
src/components/PageHeader.vue | 19 +++++--
2 files changed, 110 insertions(+), 3 deletions(-)
create mode 100644 src/components/Breadcrumb.vue
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
new file mode 100644
index 00000000..6bccb51c
--- /dev/null
+++ b/src/components/Breadcrumb.vue
@@ -0,0 +1,94 @@
+<template>
+ <div class="breadcrumb-container" v-if="crumbs.length > 0">
+ <!-- <b-breadcrumb id="nav-breadcrumb" :items="crumbs" /> -->
+ <b-breadcrumb id="nav-breadcrumb">
+ <b-breadcrumb-item
+ v-for="(crumb, index) in crumbs"
+ :key="index"
+ :active="crumb.active"
+ :to="crumb.to"
+ >
+ <b-icon-chevron-double-right class="mr-2" v-if="index !== 0" />
+ {{ crumb.text }}</b-breadcrumb-item
+ >
+ </b-breadcrumb>
+ </div>
+</template>
+<script>
+const routeMap = {};
+export default {
+ created() {
+ this.$router.options.routes.forEach(route => {
+ routeMap[route.path] =
+ route.meta && route.meta.breadcrumb
+ ? route.meta.breadcrumb
+ : route.name;
+ });
+ },
+ computed: {
+ crumbs() {
+ if (this.$route.path === "/") {
+ return [];
+ }
+
+ const pathArray = this.$route.path.split("/");
+ // remove home route since it's a special case and we'll add it later
+ pathArray.shift();
+
+ let currentPath = "";
+ const breadcrumbs = pathArray.reduce(
+ (breadcrumbArray, path) => {
+ currentPath += "/" + path;
+
+ if (routeMap[currentPath]) {
+ breadcrumbArray.push({
+ path: currentPath,
+ to: currentPath,
+ text: routeMap[currentPath]
+ });
+ }
+ return breadcrumbArray;
+ },
+ // initialize with home route
+ [
+ {
+ path: "",
+ to: "/",
+ text: "Home"
+ }
+ ]
+ );
+
+ breadcrumbs[breadcrumbs.length - 1].active = true;
+
+ return breadcrumbs;
+ }
+ }
+};
+</script>
+<style lang="scss" scoped>
+.breadcrumb-container {
+ padding-left: 7rem;
+ text-transform: uppercase;
+
+ #nav-breadcrumb {
+ border-radius: 0;
+ margin-bottom: 0;
+ background-color: transparent;
+
+ .breadcrumb-item {
+ &,
+ & > a {
+ color: $p1-light-green;
+ }
+ &.active span {
+ font-weight: 800;
+ }
+ // hide the default >
+ & + .breadcrumb-item::before {
+ display: none;
+ }
+ }
+ }
+}
+</style>
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index f93a6841..60e43ec3 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -1,7 +1,8 @@
<template>
<div class="page-header">
+ <Breadcrumb />
<div class="content">
- <h1 class="title mx-2">
+ <h1 class="title mx-5">
{{ title }}
</h1>
<h4 v-if="subtext" class="subtext mx-lg-auto mx-5">
@@ -22,13 +23,14 @@
</template>
<script>
+import Breadcrumb from "@/components/Breadcrumb.vue";
export default {
props: {
title: String,
subtext: String,
description: String
},
- components: {}
+ components: { Breadcrumb }
};
</script>
<style lang="scss" scoped>
@@ -40,9 +42,9 @@ export default {
background-attachment: fixed;
overflow: auto;
margin-bottom: 7rem;
- margin-top: 98px;
background-size: cover;
overflow: hidden;
+ margin-top: 102px;
.title,
.subtext,
@@ -55,6 +57,17 @@ export default {
max-width: 50%;
}
}
+ @include media-breakpoint-only(lg) {
+ .breadcrumb-container {
+ padding-left: 2.5rem;
+ }
+ }
+
+ @include media-breakpoint-down(md) {
+ .breadcrumb-container {
+ padding-left: 2rem;
+ }
+ }
.content {
min-height: 400px;
--
GitLab