streaper2/afrov2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: force vertical sidebar on all devices and ensure it perfectly tracks the article height

Browse Source
This commit is contained in:
streaper2
2026-05-10 14:37:30 +02:00
parent 94de36e937
commit 889d3967d2
2 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/blog/[id]/page.tsx
View File

@@ -77,23 +77,19 @@ export default async function BlogPostPage({ params }: Props) {
{/* Injection du style de force pour le texte */}
<style dangerouslySetInnerHTML={{ __html: noBreakStyle }} />
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Navigation */}
<div className="mb-8">
<Link href="/blog" className="inline-flex items-center text-gray-500 hover:text-brand-600 text-sm font-medium transition-colors">
<ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
</Link>
</div>
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex gap-4 lg:gap-8 justify-center relative items-start">
{/* Conteneur principal de l'article */}
<div className="w-[calc(100%-3rem)] sm:w-full max-w-3xl relative">
<div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100 relative">
{/* Conteneur pour les boutons flottants (s'arrête à la fin de l'article) */}
<div className="absolute top-0 bottom-0 right-4 lg:-right-16 pointer-events-none z-50 h-full">
<div className="sticky top-auto bottom-4 lg:top-1/2 lg:-translate-y-1/2 lg:bottom-auto pointer-events-auto pt-24 lg:pt-0">
<BlogShareButtons title={post.title} />
</div>
{/* Navigation */}
<div className="mb-8">
<Link href="/blog" className="inline-flex items-center text-gray-500 hover:text-brand-600 text-sm font-medium transition-colors">
<ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
</Link>
</div>
{/* Image d'en-tête */}
<div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100 relative z-10">
{/* Image d'en-tête */}
<div className="w-full h-64 md:h-80 relative mb-8 rounded-lg overflow-hidden">
<img
src={post.imageUrl}
@@ -155,6 +151,15 @@ export default async function BlogPostPage({ params }: Props) {
</div>
</div>
</div>
</div>
{/* Sidebar flottante verticale à droite (suit l'article et s'arrête à la fin) */}
<div className="w-10 shrink-0 relative">
<div className="sticky top-1/2 -translate-y-1/2 pt-24 lg:pt-0">
<BlogShareButtons title={post.title} />
</div>
</div>
</div>
</article>
);

18
components/BlogShareButtons.tsx
View File

@@ -32,41 +32,41 @@ export default function BlogShareButtons({ title }: Props) {
if (!url) return null;
return (
<div className="flex flex-row lg:flex-col gap-3 z-50">
<div className="flex flex-col gap-3 z-50">
<a
href={shareLinks.facebook}
target="_blank"
rel="noopener noreferrer"
className="w-12 h-12 lg:w-10 lg:h-10 rounded-full bg-white text-[#1877F2] shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
className="w-10 h-10 rounded-full bg-white text-[#1877F2] shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
title="Partager sur Facebook"
>
<Facebook className="w-6 h-6 lg:w-5 lg:h-5" />
<Facebook className="w-5 h-5" />
</a>
<a
href={shareLinks.twitter}
target="_blank"
rel="noopener noreferrer"
className="w-12 h-12 lg:w-10 lg:h-10 rounded-full bg-white text-black shadow-xl flex items-center justify-center hover:scale-110 transition-transform border border-gray-100"
className="w-10 h-10 rounded-full bg-white text-black shadow-xl flex items-center justify-center hover:scale-110 transition-transform border border-gray-100"
title="Partager sur X (Twitter)"
>
<Twitter className="w-6 h-6 lg:w-5 lg:h-5" />
<Twitter className="w-5 h-5" />
</a>
<button
onClick={() => handleCopy('Lien copié ! Vous pouvez le coller sur Instagram.')}
className="w-12 h-12 lg:w-10 lg:h-10 rounded-full bg-gradient-to-tr from-[#f9ce34] via-[#ee2a7b] to-[#6228d7] text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
className="w-10 h-10 rounded-full bg-gradient-to-tr from-[#f9ce34] via-[#ee2a7b] to-[#6228d7] text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
title="Copier le lien pour Instagram"
>
<Instagram className="w-6 h-6 lg:w-5 lg:h-5" />
<Instagram className="w-5 h-5" />
</button>
<button
onClick={() => handleCopy()}
className="w-12 h-12 lg:w-10 lg:h-10 rounded-full bg-gray-800 text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
className="w-10 h-10 rounded-full bg-gray-800 text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
title="Copier le lien"
>
{copied ? <Check className="w-6 h-6 lg:w-5 lg:h-5 text-green-400" /> : <LinkIcon className="w-6 h-6 lg:w-5 lg:h-5" />}
{copied ? <Check className="w-5 h-5 text-green-400" /> : <LinkIcon className="w-5 h-5" />}
</button>
</div>
);