{/* Background SVG - sized to fit the 320x225.5 container exactly */}
{/* eslint-disable-next-line @next/next/no-img-element */}
diff --git a/app/components/RelatedArticles.js b/app/components/RelatedArticles.js
index adb93f8..cab114f 100644
--- a/app/components/RelatedArticles.js
+++ b/app/components/RelatedArticles.js
@@ -11,10 +11,22 @@ export default function RelatedArticles({ relatedPosts, currentPostSlug }) {
const [currentIndex, setCurrentIndex] = useState(0);
const [progress, setProgress] = useState(0);
+ const [isMobile, setIsMobile] = useState(true);
- // Auto-advance every 3 seconds
+ // Check if we're on mobile (below lg breakpoint)
useEffect(() => {
- if (filteredPosts.length <= 1) return;
+ const checkScreenSize = () => {
+ setIsMobile(window.innerWidth < 1024); // lg breakpoint is 1024px
+ };
+
+ checkScreenSize();
+ window.addEventListener("resize", checkScreenSize);
+ return () => window.removeEventListener("resize", checkScreenSize);
+ }, []);
+
+ // Auto-advance every 3 seconds (only on mobile)
+ useEffect(() => {
+ if (filteredPosts.length <= 1 || !isMobile) return;
const interval = setInterval(() => {
setProgress(0);
@@ -22,11 +34,11 @@ export default function RelatedArticles({ relatedPosts, currentPostSlug }) {
}, 3000);
return () => clearInterval(interval);
- }, [filteredPosts.length]);
+ }, [filteredPosts.length, isMobile]);
- // Progress animation
+ // Progress animation (only on mobile)
useEffect(() => {
- if (filteredPosts.length <= 1) return;
+ if (filteredPosts.length <= 1 || !isMobile) return;
const progressInterval = setInterval(() => {
setProgress((prev) => {
@@ -38,33 +50,64 @@ export default function RelatedArticles({ relatedPosts, currentPostSlug }) {
}, 30); // 30ms intervals for smooth animation
return () => clearInterval(progressInterval);
- }, [currentIndex, filteredPosts.length]);
+ }, [currentIndex, filteredPosts.length, isMobile]);
if (filteredPosts.length === 0) {
return null;
}
return (
-
-
-
+
+
+
Related Articles
- {/* Horizontal Articles Row - All Visible with Centering */}
+ {/* Horizontal Articles Row - Carousel on mobile, Scrollable slider on desktop */}
{
+ const slider = e.currentTarget;
+ const startX = e.pageX - slider.offsetLeft;
+ const scrollLeft = slider.scrollLeft;
+
+ const handleMouseMove = (e) => {
+ const x = e.pageX - slider.offsetLeft;
+ const walk = (x - startX) * 2;
+ slider.scrollLeft = scrollLeft - walk;
+ };
+
+ const handleMouseUp = () => {
+ document.removeEventListener(
+ "mousemove",
+ handleMouseMove
+ );
+ document.removeEventListener("mouseup", handleMouseUp);
+ };
+
+ document.addEventListener("mousemove", handleMouseMove);
+ document.addEventListener("mouseup", handleMouseUp);
+ }
+ : undefined
+ }
>
{filteredPosts.map((relatedPost, index) => (
- {/* Three separate progress bars below the carousel */}
-
- {filteredPosts.map((relatedPost, index) => (
-
+ {/* Progress bars - only show on mobile */}
+ {isMobile && (
+
+ {filteredPosts.map((relatedPost, index) => (
-
- ))}
-
+ key={relatedPost.slug}
+ className="max-w-[var(--measures-spacing-056)] w-full h-[var(--measures-spacing-004)] bg-gray-200 rounded-full overflow-hidden"
+ >
+
+
+ ))}
+
+ )}
);
diff --git a/app/tailwind.css b/app/tailwind.css
index a8a7b09..f8a2885 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -6,6 +6,15 @@
@source "../.storybook/**/*";
@source "./**/*";
+/* Hide scrollbar utility */
+.scrollbar-hide {
+ -ms-overflow-style: none; /* Internet Explorer 10+ */
+ scrollbar-width: none; /* Firefox */
+}
+.scrollbar-hide::-webkit-scrollbar {
+ display: none; /* Safari and Chrome */
+}
+
@theme inline {
/* Custom breakpoints */
--breakpoint-xsm: 429px;