Add blog sidebar with categories and CTA

[tyaga001]

Overview

Add a fixed sidebar to the blog page containing category statistics and a prominent CTA section to improve navigation and conversion.

Features to Implement

1. Category Statistics Panel

interface CategoryStats {
  name: string;
  slug: string;
  count: number;
  subcategories?: {
    name: string;
    count: number;
  }[];
}

// Example structure
const categoryStats = [
  {
    name: 'Tutorials',
    slug: 'tutorials',
    count: 306,
    subcategories: [
      { name: 'Authentication', count: 45 },
      { name: 'Databases', count: 82 },
      { name: 'Performance', count: 24 }
    ]
  }
];

2. Components Structure

interface SidebarProps {
  className?: string;
  categories: CategoryStats[];
}

interface CTACardProps {
  title: string;
  description: string;
  buttonText: string;
  buttonUrl: string;
}

UI Implementation

1. Sidebar Layout

export function BlogSidebar({ categories }: SidebarProps) {
  return (
    <aside className="hidden lg:block sticky top-24 w-80 ml-8">
      <div className="space-y-8">
        <CategoriesList categories={categories} />
        <CTACard />
      </div>
    </aside>
  );
}

2. Categories Section

function CategoriesList({ categories }: { categories: CategoryStats[] }) {
  return (
    <div className="rounded-lg border bg-card p-6">
      <h2 className="text-lg font-semibold mb-4">Categories</h2>
      <div className="space-y-2">
        {categories.map(category => (
          <CategoryItem 
            key={category.slug}
            name={category.name}
            count={category.count}
            href={`/blog/category/${category.slug}`}
          />
        ))}
      </div>
    </div>
  );
}

3. CTA Card Component

function CTACard() {
  return (
    <div className="rounded-lg bg-primary-900 text-primary-foreground p-6">
      <h3 className="text-xl font-bold mb-2">Get Started!</h3>
      <p className="text-sm mb-4">
        Start building better developer tools today with 
        DevTools Academy resources.
      </p>
      <Button 
        variant="secondary" 
        className="w-full"
        href="/get-started"
      >
        Start Learning Free →
      </Button>
    </div>
  );
}

Styling

Desktop

.sidebar {
  @apply w-80 flex-shrink-0 hidden lg:block;
  @apply sticky top-24 h-[calc(100vh-6rem)];
  @apply overflow-y-auto;
}

.category-item {
  @apply flex items-center justify-between;
  @apply px-3 py-2 rounded-md;
  @apply hover:bg-accent transition-colors;
}

.cta-card {
  @apply bg-gradient-to-br from-primary-900 to-primary-800;
  @apply shadow-lg;
}

Responsive Behavior

• Fixed position on desktop (sticky)
• Hidden on mobile
• Smooth transitions
• Proper spacing

Technical Requirements

1. Data Fetching

async function getCategoryStats(): Promise<CategoryStats[]> {
  // Fetch category statistics from DB or generate from posts
}

2. Performance Optimizations

• Cache category counts
• Minimize reflows
• Optimize sticky behavior
• Lazy load subcategories

Acceptance Criteria

• Sidebar is sticky on desktop
• Categories show accurate post counts
• CTA card is visually prominent
• Smooth hover states
• Proper mobile handling
• Accessible navigation
• Performance optimized
• Links work correctly

Nice-to-have Features

• Category description tooltips
• Active category highlighting
• Subcategory expansion
• View count for posts
• Category icons

Testing Requirements

• Desktop layout
• Mobile responsiveness
• Link functionality
• Accessibility
• Performance impact

Priority: Medium