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

resources/js/componentss/features/pages/components/PageSubSectionLinks.vue

@@ -10,7 +10,7 @@
 						<a :class="{'text-white font-normal bg-primary border': isSameRoute(page.path), 'text-gray-600 hover:text-[#2C6288]': !isSameRoute(page.path) }"
 							 :href="(page.is_url) ? page.path : route('page.view', page.path) + '/'"
 							 class="duration-300 flex gap-x-2 w-full rounded-md cursor-pointer items-center px-2 py-1.5 text-left text-sm">
-							<BasicIcon v-if="page.icon" class="w-4" :name="page.icon" />
+							<BasicIcon v-if="page.icon" class="w-4 h-4" :name="page.icon" />
 									{{ page.title }}
 						</a>
 					</li>

resources/js/componentss/features/posts/components/PostItemBreadcrumbs.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="flex justify-between pb-4 items-center">
-		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
+		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3 truncate mask-fade">
 			<div class="grow">
 				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
 					<BreadcrumbsWrapper v-if="breadcrumbs">
@@ -53,7 +53,7 @@
 								{{ textLimit(postTitle, 60) }}
 							</Link>
 						</li>
-					</BreadcrumbsWrapper>
+					</BreadcrumbsWrapper >
 					<BreadcrumbsWrapper v-else>
 						<li class="text-sm">
 							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-primary-hover" href="/">
@@ -203,7 +203,8 @@ export default {
 
 
 <style scoped>
-
-
-
+.mask-fade {
+  mask-image: linear-gradient(to right, black 90%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
+}
 </style>