follow diye page var ve içinde nav var navda da following ve followers var. Nasıl yapsam bilemedim. Twitterdeki gibi yapmak istiyorum fakat işin içinden çıkamadım. Vue tarafında dinamik component slot falan düşündüm fakat twitterde link ile yapılıyor bende öyle istiyorum.
Route::get('/{user:username}/following', [UserFollowController::class, 'following']);
Route::get('/{user:username}/followers', [UserFollowController::class, 'followers']);
public function following(User $user) {
return Inertia::render('follow', [
'following' => [],
'profile' => [
'user' => $user
]
]);
}
public function followers(User $user) {
return Inertia::render('follow', [
'followers' => [],
'profile' => [
'user' => $user
]
]);
}
Follow.vue
<TwitNavFollow />
<TwitFollowers />
<TwitFollowing />
TwitNavFollow
<template>
<div class="sticky top-0 w-full h-[96px] bg-transparent text-normalWhite mr-auto border-b-[0.5px] border-useGray backdrop-blur-sm">
<Link :href="user.username" class="p-3 px-4 h-[48px] flex justify-start gap-5">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 font-extrabold">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
</svg>
<h3 class="font-bold">@{{ user.username }}</h3>
</Link>
<div class="flex justify-evenly items-center text-sm font-light" >
<Link :href="user.username/followers" class="w-6/12 text-center h-[48px] flex flex-col items-center justify-center text-white font-normal cursor-pointer hover:bg-lowWhite transition duration-200 relative"><span>Followers</span><div class="absolute bg-useGreen w-14 h-[4px] rounded top-10"></div></Link>
<Link :href="user.username/following" class="w-6/12 text-center h-[48px] flex flex-col items-center justify-center cursor-pointer hover:bg-lowWhite transition duration-200 text-lowsWhite"><span>Following</span></Link>
</div>
</div>
</template>