From 1383392a2fd0ef6cea9ec41c6d18eeec9b335563 Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Thu, 7 Oct 2021 18:16:10 -0400
Subject: [PATCH] smaller and bolder breadcrumb (#8566)

* smaller and bolder breadcrumb

* Use breadcrumb in settings

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 app/src/components/v-breadcrumb/v-breadcrumb.vue             | 5 -----
 .../settings/routes/data-model/collections/collections.vue   | 2 +-
 app/src/modules/settings/routes/data-model/fields/fields.vue | 4 +++-
 .../settings/routes/presets/collection/collection.vue        | 2 +-
 app/src/modules/settings/routes/presets/item.vue             | 4 +++-
 app/src/modules/settings/routes/project/project.vue          | 2 +-
 app/src/modules/settings/routes/roles/collection.vue         | 2 +-
 app/src/modules/settings/routes/roles/item/item.vue          | 4 +++-
 app/src/modules/settings/routes/webhooks/collection.vue      | 2 +-
 app/src/modules/settings/routes/webhooks/item.vue            | 4 +++-
 app/src/views/private/components/header-bar/header-bar.vue   | 2 ++
 11 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/app/src/components/v-breadcrumb/v-breadcrumb.vue b/app/src/components/v-breadcrumb/v-breadcrumb.vue
index 077d421fc2..7c2c3a1f3d 100644
--- a/app/src/components/v-breadcrumb/v-breadcrumb.vue
+++ b/app/src/components/v-breadcrumb/v-breadcrumb.vue
@@ -49,7 +49,6 @@ body {
 .v-breadcrumb {
 	display: flex;
 	align-items: center;
-	font-size: 12px;
 
 	.section {
 		display: contents;
@@ -90,9 +89,5 @@ body {
 			}
 		}
 	}
-
-	@media (min-width: 600px) {
-		font-size: inherit;
-	}
 }
 </style>
diff --git a/app/src/modules/settings/routes/data-model/collections/collections.vue b/app/src/modules/settings/routes/data-model/collections/collections.vue
index 4b83fce9b1..9b81b192a1 100644
--- a/app/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/app/src/modules/settings/routes/data-model/collections/collections.vue
@@ -1,6 +1,6 @@
 <template>
 	<private-view :title="t('settings_data_model')">
-		<template #headline>{{ t('settings') }}</template>
+		<template #headline><v-breadcrumb :items="[{ name: t('settings'), to: '/settings' }]" /></template>
 
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded disabled icon secondary>
diff --git a/app/src/modules/settings/routes/data-model/fields/fields.vue b/app/src/modules/settings/routes/data-model/fields/fields.vue
index b33c8e76f5..ae8d2ad234 100644
--- a/app/src/modules/settings/routes/data-model/fields/fields.vue
+++ b/app/src/modules/settings/routes/data-model/fields/fields.vue
@@ -1,6 +1,8 @@
 <template>
 	<private-view :title="collectionInfo && collectionInfo.name">
-		<template #headline>{{ t('settings_data_model') }}</template>
+		<template #headline>
+			<v-breadcrumb :items="[{ name: t('settings_data_model'), to: '/settings/data-model' }]" />
+		</template>
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded icon exact to="/settings/data-model">
 				<v-icon name="arrow_back" />
diff --git a/app/src/modules/settings/routes/presets/collection/collection.vue b/app/src/modules/settings/routes/presets/collection/collection.vue
index d8baccb4ec..6a80a6b5a8 100644
--- a/app/src/modules/settings/routes/presets/collection/collection.vue
+++ b/app/src/modules/settings/routes/presets/collection/collection.vue
@@ -1,6 +1,6 @@
 <template>
 	<private-view :title="t('settings_presets')">
-		<template #headline>{{ t('settings') }}</template>
+		<template #headline><v-breadcrumb :items="[{ name: t('settings'), to: '/settings' }]" /></template>
 
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded disabled icon secondary>
diff --git a/app/src/modules/settings/routes/presets/item.vue b/app/src/modules/settings/routes/presets/item.vue
index 13e4961027..f43bbddec2 100644
--- a/app/src/modules/settings/routes/presets/item.vue
+++ b/app/src/modules/settings/routes/presets/item.vue
@@ -10,7 +10,9 @@
 		readonly
 	>
 		<private-view :title="t('editing_preset')">
-			<template #headline>{{ t('settings_presets') }}</template>
+			<template #headline>
+				<v-breadcrumb :items="[{ name: t('settings_presets'), to: '/settings/presets' }]" />
+			</template>
 			<template #title-outer:prepend>
 				<v-button class="header-icon" rounded icon exact :to="backLink">
 					<v-icon name="arrow_back" />
diff --git a/app/src/modules/settings/routes/project/project.vue b/app/src/modules/settings/routes/project/project.vue
index a443531007..a19c1217e6 100644
--- a/app/src/modules/settings/routes/project/project.vue
+++ b/app/src/modules/settings/routes/project/project.vue
@@ -1,6 +1,6 @@
 <template>
 	<private-view :title="t('settings_project')">
-		<template #headline>{{ t('settings') }}</template>
+		<template #headline><v-breadcrumb :items="[{ name: t('settings'), to: '/settings' }]" /></template>
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded disabled icon secondary>
 				<v-icon name="public" />
diff --git a/app/src/modules/settings/routes/roles/collection.vue b/app/src/modules/settings/routes/roles/collection.vue
index 887189ef66..2c786f8ec6 100644
--- a/app/src/modules/settings/routes/roles/collection.vue
+++ b/app/src/modules/settings/routes/roles/collection.vue
@@ -1,6 +1,6 @@
 <template>
 	<private-view :title="t('settings_permissions')">
-		<template #headline>{{ t('settings') }}</template>
+		<template #headline><v-breadcrumb :items="[{ name: t('settings'), to: '/settings' }]" /></template>
 
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded disabled icon secondary>
diff --git a/app/src/modules/settings/routes/roles/item/item.vue b/app/src/modules/settings/routes/roles/item/item.vue
index cd0cd4b5dc..3f5dcdae09 100644
--- a/app/src/modules/settings/routes/roles/item/item.vue
+++ b/app/src/modules/settings/routes/roles/item/item.vue
@@ -1,6 +1,8 @@
 <template>
 	<private-view :title="loading ? t('loading') : t('editing_role', { role: item && item.name })">
-		<template #headline>{{ t('settings_permissions') }}</template>
+		<template #headline>
+			<v-breadcrumb :items="[{ name: t('settings_permissions'), to: '/settings/roles' }]" />
+		</template>
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded icon exact :to="`/settings/roles/`">
 				<v-icon name="arrow_back" />
diff --git a/app/src/modules/settings/routes/webhooks/collection.vue b/app/src/modules/settings/routes/webhooks/collection.vue
index dd92664b27..30edf8a000 100644
--- a/app/src/modules/settings/routes/webhooks/collection.vue
+++ b/app/src/modules/settings/routes/webhooks/collection.vue
@@ -11,7 +11,7 @@
 		collection="directus_webhooks"
 	>
 		<private-view :title="t('webhooks')">
-			<template #headline>{{ t('settings') }}</template>
+			<template #headline><v-breadcrumb :items="[{ name: t('settings'), to: '/settings' }]" /></template>
 
 			<template #title-outer:prepend>
 				<v-button class="header-icon" rounded disabled icon secondary>
diff --git a/app/src/modules/settings/routes/webhooks/item.vue b/app/src/modules/settings/routes/webhooks/item.vue
index 4988a49f27..6527a31932 100644
--- a/app/src/modules/settings/routes/webhooks/item.vue
+++ b/app/src/modules/settings/routes/webhooks/item.vue
@@ -1,6 +1,8 @@
 <template>
 	<private-view :title="title">
-		<template #headline>{{ t('settings_webhooks') }}</template>
+		<template #headline>
+			<v-breadcrumb :items="[{ name: t('settings_webhooks'), to: '/settings/webhooks' }]" />
+		</template>
 
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded icon exact :to="`/settings/webhooks/`">
diff --git a/app/src/views/private/components/header-bar/header-bar.vue b/app/src/views/private/components/header-bar/header-bar.vue
index 289b489365..dfa9e9b6c3 100644
--- a/app/src/views/private/components/header-bar/header-bar.vue
+++ b/app/src/views/private/components/header-bar/header-bar.vue
@@ -146,6 +146,8 @@ export default defineComponent({
 			top: 2px;
 			left: 0;
 			color: var(--foreground-subdued);
+			font-weight: 600;
+			font-size: 12px;
 			white-space: nowrap;
 			opacity: 1;
 			transition: opacity var(--fast) var(--transition);