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>
);