Created a breadcrumb component & the tree page has a breadcrumb and a better font size

3 files changed, 49 insertions, 15 deletions

diff --git a/src/frontend/components/BaseBreadcrumb.vue b/src/frontend/components/BaseBreadcrumb.vue
new file mode 100644
index 0000000..df82968
--- /dev/null
+++ b/src/frontend/components/BaseBreadcrumb.vue
@@ -0,0 +1,33 @@
+<template>
+	<nav aria-label="breadcrumb">
+		<ol class="breadcrumb">
+			<li
+				v-for="(item, index) in items" class="breadcrumb-item"
+				:key="index">
+				<router-link :to="item.path">
+					{{ item.name }}
+				</router-link>
+			</li>
+			<li class="breadcrumb-item active" aria-current="page">
+				{{ activeItem }}
+			</li>
+		</ol>
+	</nav>
+</template>
+
+
+<script>
+export default {
+	name: "BaseBreadcrumb",
+	props: {
+		items: {
+			type: Array,
+			required: true
+		},
+		activeItem: {
+			type: String,
+			required: true
+		}
+	}
+};
+</script>
\ No newline at end of file
diff --git a/src/frontend/views/RepositoryCommit.vue b/src/frontend/views/RepositoryCommit.vue
index f596601..d3ba174 100644
--- a/src/frontend/views/RepositoryCommit.vue
+++ b/src/frontend/views/RepositoryCommit.vue
@@ -2,18 +2,7 @@
 	<RepositoryNavbar active-page="log" :repository="repository" />
 	<div class="row mx-0">
 		<div class="col ms-2 ps-4 ps-sm-5 fs-5 vld-parent">
-			<nav aria-label="breadcrumb">
-				<ol class="breadcrumb">
-					<li class="breadcrumb-item">
-						<router-link :to="'/' + repository + '/log'">
-							Log
-						</router-link>
-					</li>
-					<li class="breadcrumb-item active" aria-current="page">
-						{{ commit }}
-					</li>
-				</ol>
-			</nav>
+			<BaseBreadcrumb :items="[{ name: 'Log', path: '/' + repository + '/log' }]" :active-item="commit" />
 			<Loading
 				v-model:active="is_loading" :height="24"
 				:width="24" color="#ffffff"
@@ -52,6 +41,7 @@
 <script>
 import RepositoryNavbar from "../components/RepositoryNavbar";
 import CommitPatch from "../components/CommitPatch";
+import BaseBreadcrumb from "../components/BaseBreadcrumb";
 import Loading from "vue-loading-overlay";
 import 'vue-loading-overlay/dist/vue-loading.css';
 import { watch, reactive, toRefs } from "vue";
@@ -62,7 +52,8 @@ export default {
 	components: {
 		RepositoryNavbar,
 		CommitPatch,
-		Loading
+		Loading,
+		BaseBreadcrumb
 	},
 	props: {
 		repository: {
diff --git a/src/frontend/views/RepositoryTree.vue b/src/frontend/views/RepositoryTree.vue
index 80a5c3b..dc2c067 100644
--- a/src/frontend/views/RepositoryTree.vue
+++ b/src/frontend/views/RepositoryTree.vue
@@ -5,7 +5,15 @@
 			v-model:active="is_loading" :height="24"
 			:width="24" color="#ffffff"
 			:opacity="0" />
-		<div class="col ms-4 ps-4 ps-sm-5 mt-3">
+		<div class="col ms-4 ps-4 ps-sm-5 mt-3 fs-5">
+			<BaseBreadcrumb
+				:items="[{ name: repository, path: '/' + repository + '/tree' }].concat(pathArr.slice(0, -1).map((path_part, index) =>
+				{
+					return {
+						name: path_part,
+						path: '/' + repository + '/tree/' + pathArr.slice(0, index + 1).join('/')
+					}
+				}))" :active-item="pathArr[pathArr.length - 1]" />
 			<RepositoryTreeTree
 				:repository="repository" :path="path"
 				:tree="tree" v-if="type === 'tree'" />
@@ -20,6 +28,7 @@
 import RepositoryNavbar from "../components/RepositoryNavbar";
 import RepositoryTreeTree from "../components/RepositoryTreeTree";
 import RepositoryTreeBlob from "../components/RepositoryTreeBlob";
+import BaseBreadcrumb from "../components/BaseBreadcrumb";
 import Loading from "vue-loading-overlay";
 import 'vue-loading-overlay/dist/vue-loading.css';
 import { ref } from "vue";
@@ -30,7 +39,8 @@ export default {
 		RepositoryNavbar,
 		Loading,
 		RepositoryTreeTree,
-		RepositoryTreeBlob
+		RepositoryTreeBlob,
+		BaseBreadcrumb
 	},
 	props: {
 		repository: {