added a new component for breadcrumbs and reworked the component for getting icons using sprites

resources/js/Pages/Client/AcademicJournals/Index.vue

@@ -16,10 +16,15 @@ import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
 import AdditionalProgramTitle
   from "@/componentss/features/additionalEducationPrograms/components/AdditionalProgramTitle.vue";
 import FormEducationalFilter from "@/componentss/shared/filter/filters/FormEducationalFilter.vue";
+import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
+import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
+import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
 
 export default {
   name: "Index",
   components: {
+    BaseBreadcrumbs,
+    BasicIcon, BreadcrumbsItem,
     FormEducationalFilter,
     AdditionalProgramTitle,
     BasicListFilter,
@@ -47,13 +52,10 @@ export default {
     },
 		seo: {
 			type: Object,
-		}
-  },
-  methods: {
-
-  },
-
-	mounted() {
+		},
+    breadcrumbs: {
+      type: Object
+    }
   }
 };
 </script>
@@ -70,8 +72,9 @@ export default {
         <div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
           <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Научные периодические издания НТГСПИ</h2>
         </div>
-        <!-- Grid -->
-        <AcademicJournalsListBreadcrumbs />
+        <BaseBreadcrumbs :breadcrumbs="breadcrumbs">
+          <BreadcrumbsItem title="Научные журналы" :url="route('client.academicJournals.index')" />
+        </BaseBreadcrumbs>
         <div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3 gap-3 sm:gap-6">
           <template v-for="journal in journals.data">
             <Link :href="route('client.academicJournals.show', journal.slug)" class="group flex items-center bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition" >

resources/js/Pages/Client/AcademicJournals/Show.vue

@@ -18,10 +18,16 @@ import ProgramTitle from "@/componentss/features/educationalPrograms/components/
 import ProgramListBreadcrumbs from "@/componentss/features/educationalPrograms/components/ProgramListBreadcrumbs.vue";
 import FormEducationalFilter from "@/componentss/shared/filter/filters/FormEducationalFilter.vue";
 import BackButton from "@/componentss/ui/buttons/BackButton.vue";
+import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
+import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
+import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
 
 export default {
   name: "Show",
   components: {
+    BaseBreadcrumbs,
+    BreadcrumbsItem,
+    BasicIcon,
     BackButton,
     FormEducationalFilter,
     ProgramListBreadcrumbs,
@@ -59,20 +65,10 @@ export default {
 		},
 		seo: {
 			type: Object,
-		}
-  },
-  methods: {
-		textLimit(text, symbols) {
-			if (text.length > symbols) {
-				let LimitedText
-				LimitedText = text.substring(0, symbols)
-				return LimitedText + "..."
-			}
-			return text
 		},
-
-  },
-  mounted() {
+    breadcrumbs: {
+      type: Object
+    }
   }
 };
 </script>
@@ -88,7 +84,10 @@ export default {
       <div class=" space-y-5 md:space-y-8">
         <div class="space-y-3">
           <BackButton link="client.academicJournals.index" title="К списку журналов" />
-          <AcademicJournalsItemBreadcrumbs :title="journal.data.title" />
+          <BaseBreadcrumbs :breadcrumbs="breadcrumbs">
+            <BreadcrumbsItem :title="journal.data.title" :url="$page.url" />
+          </BaseBreadcrumbs>
+
           <AcademicJournalsTitle class="text-center" :header="journal.data.title" />
         </div>