fix blog page

src/components/blog/BlogSidebar.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import {
+  getRecentPosts,
+  getCategories,
+  formatDate,
+  type BlogPost,
+} from "@/data/blog";
+import BlogSearch from "./BlogSearch";
+
+/**
+ * Sticky single-post sidebar: Search, Recent Posts, Categories and a CTA card.
+ * Styling lives in SingleBlog's scoped <style> block (dm-blog-* classes).
+ */
+export default function BlogSidebar({ current }: { current?: BlogPost }) {
+  const recent = getRecentPosts(5)
+    .filter((p) => p.slug !== current?.slug)
+    .slice(0, 4);
+  const categories = getCategories();
+
+  return (
+    <aside className="dm-blog-sidebar" aria-label="Blog sidebar">
+      {/* Search */}
+      <section className="dm-blog-widget">
+        <h2 className="dm-blog-widget-title">Search</h2>
+        <BlogSearch />
+      </section>
+
+      {/* Recent Posts */}
+      <section className="dm-blog-widget">
+        <h2 className="dm-blog-widget-title">Recent Posts</h2>
+        <ul className="dm-blog-recent">
+          {recent.map((p) => (
+            <li key={p.slug}>
+              <Link href={`/blog/${p.slug}`} className="dm-blog-recent-item">
+                <span className="dm-blog-recent-thumb">
+                  <Image
+                    src={p.image}
+                    alt={p.title}
+                    fill
+                    sizes="62px"
+                    style={{ objectFit: "cover" }}
+                  />
+                </span>
+                <span className="dm-blog-recent-meta">
+                  <span className="dm-blog-recent-title">{p.title}</span>
+                  <time dateTime={p.date} className="dm-blog-recent-date">
+                    {formatDate(p.date)}
+                  </time>
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      {/* Categories */}
+      <section className="dm-blog-widget">
+        <h2 className="dm-blog-widget-title">Categories</h2>
+        <ul className="dm-blog-categories">
+          {categories.map((c) => (
+            <li key={c.name}>
+              <Link href="/blog" className="dm-blog-category-item">
+                <span>{c.name}</span>
+                <span className="dm-blog-category-count">{c.count}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      {/* CTA Card */}
+      <section className="dm-blog-widget dm-blog-cta-card">
+        <h2 className="dm-blog-cta-title">Ready to optimise your fleet?</h2>
+        <p className="dm-blog-cta-text">
+          See how MileTruth™ AI cuts distance, vehicles and emissions — without
+          missing an SLA.
+        </p>
+        <Link href="/contact" className="dm-blog-cta-btn">
+          Contact Us
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <line x1="5" y1="12" x2="19" y2="12" />
+            <polyline points="12 5 19 12 12 19" />
+          </svg>
+        </Link>
+      </section>
+    </aside>
+  );
+}