Merge pull request #307 from gitcoinco/feat/navigation

Feat: add sidebar + breadcrumbs

Author: cristinalare

src/app/apps/[slug]/page.tsx

@@ -2,6 +2,7 @@ import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { AppCard, CaseStudyCard, MechanismCard, ResearchCard, CampaignCard } from '@/components/cards'
 import ContentDetailPage from '@/components/templates/ContentDetailPage'
+import { AppSidebar } from '@/components/layouts/AppSidebar'
 import { getAppBySlug, apps } from '@/content/apps'
 import { getCaseStudiesByPlatform, getCaseStudyBySlug } from '@/content/case-studies'
 import { getMechanismBySlug } from '@/content/mechanisms'
@@ -80,9 +81,13 @@ export default async function AppDetailPage({ params }: PageProps) {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumb) }} />
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }} />
       <ContentDetailPage
+        sidebar={<AppSidebar />}
         item={app}
-        breadcrumbHref="/apps"
-        breadcrumbLabel="Back to Apps"
+        breadcrumbItems={[
+          { href: '/', label: 'Home' },
+          { href: '/apps', label: 'Apps' },
+          { label: app.name },
+        ]}
         showDate={false}
         relatedSections={[
           {

src/app/apps/page.tsx

@@ -5,6 +5,7 @@ import {
   SensemakingSection,
   CategoryContent,
 } from "@/components/layouts";
+import { AppSidebar } from "@/components/layouts/AppSidebar";
 import { AppCard } from "@/components/cards";
 import { apps, getFeaturedApps } from "@/content/apps";
 import { getSensemakingFor } from "@/content/research";
@@ -16,7 +17,7 @@ export const metadata: Metadata = pageSeo.apps;
 export default function AppsPage() {
   const featuredApps = getFeaturedApps(3);
   return (
-    <ListPageLayout>
+    <ListPageLayout sidebar={<AppSidebar />}>
       <ListPageHeader title="Apps" description="Funding platforms, DAOs, grant programs"/>
 
       <SensemakingSection article={getSensemakingFor("apps")} />
@@ -26,7 +27,7 @@ export default function AppsPage() {
           title="Featured Apps"
           subtitle="Essential platforms shaping Ethereum funding"
         />
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid gap-6 [grid-template-columns:repeat(auto-fit,minmax(300px,1fr))]">
           {featuredApps.map((app) => (
             <AppCard key={app.slug} app={app} variant="home" />
           ))}

src/app/campaigns/[slug]/page.tsx

@@ -2,6 +2,7 @@ import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { AppCard, MechanismCard, CaseStudyCard, ResearchCard, CampaignCard } from '@/components/cards'
 import ContentDetailPage from '@/components/templates/ContentDetailPage'
+import { AppSidebar } from '@/components/layouts/AppSidebar'
 import { getCampaignBySlug, campaigns } from '@/content/campaigns'
 import { getAppBySlug } from '@/content/apps'
 import { getMechanismBySlug } from '@/content/mechanisms'
@@ -103,9 +104,13 @@ export default async function CampaignDetailPage({ params }: PageProps) {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumb) }} />
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }} />
       <ContentDetailPage
+        sidebar={<AppSidebar />}
         item={campaign}
-        breadcrumbHref="/campaigns"
-        breadcrumbLabel="Back to Campaigns"
+        breadcrumbItems={[
+          { href: '/', label: 'Home' },
+          { href: '/campaigns', label: 'Campaigns' },
+          { label: campaign.name },
+        ]}
         ctaUrl={campaign.ctaUrl}
         ctaLabel="Visit Campaign"
         contentBefore={campaignStats}

src/app/campaigns/page.tsx

@@ -7,6 +7,7 @@ import {
   SensemakingSection,
   CategoryContent,
 } from "@/components/layouts";
+import { AppSidebar } from "@/components/layouts/AppSidebar";
 import { CampaignCard } from "@/components/cards";
 import { campaigns, getFeaturedCampaigns } from "@/content/campaigns";
 import { getSensemakingFor } from "@/content/research";
@@ -18,7 +19,7 @@ export const metadata: Metadata = pageSeo.campaigns;
 export default function CampaignsPage() {
   const featuredCampaigns = getFeaturedCampaigns(2);
   return (
-    <ListPageLayout>
+    <ListPageLayout sidebar={<AppSidebar />}>
       <ListPageHeader
         title="Funding Campaigns"
         description="Active or upcoming funding rounds"

src/app/case-studies/[slug]/page.tsx

@@ -2,6 +2,7 @@ import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { AppCard, MechanismCard, CaseStudyCard, ResearchCard, CampaignCard } from '@/components/cards'
 import ContentDetailPage from '@/components/templates/ContentDetailPage'
+import { AppSidebar } from '@/components/layouts/AppSidebar'
 import { getCaseStudyBySlug, caseStudies } from '@/content/case-studies'
 import { getAppBySlug } from '@/content/apps'
 import { getMechanismBySlug } from '@/content/mechanisms'
@@ -74,9 +75,13 @@ export default async function CaseStudyDetailPage({ params }: PageProps) {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumb) }} />
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }} />
       <ContentDetailPage
+        sidebar={<AppSidebar />}
         item={caseStudy}
-        breadcrumbHref="/case-studies"
-        breadcrumbLabel="Back to Case Studies"
+        breadcrumbItems={[
+          { href: '/', label: 'Home' },
+          { href: '/case-studies', label: 'Case Studies' },
+          { label: caseStudy.name },
+        ]}
         relatedSections={[
           {
             title: 'Related Apps',

src/app/case-studies/page.tsx

@@ -7,6 +7,7 @@ import {
   SensemakingSection,
   CategoryContent,
 } from "@/components/layouts";
+import { AppSidebar } from "@/components/layouts/AppSidebar";
 import { caseStudies } from "@/content/case-studies";
 import { getSensemakingFor } from "@/content/research";
 import SectionHeader from "@/components/ui/SectionHeader";
@@ -15,7 +16,7 @@ export const metadata: Metadata = pageSeo.caseStudies;
 
 export default function CaseStudiesPage() {
   return (
-    <ListPageLayout>
+    <ListPageLayout sidebar={<AppSidebar />}>
       <ListPageHeader
         title="Case Studies"
         description="Analysis of a funding experiment"

src/app/globals.css

@@ -204,7 +204,15 @@
 
   /* Container */
   .container-page {
-    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-24;
+    @apply max-w-[74rem] mx-auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .detail-page-container {
+    @apply max-w-[800px] mx-auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
   }
 
   /* Star decorative element */
@@ -237,6 +245,24 @@
   }
 }
 
+@media (min-width: 640px) {
+  .container-page, .detail-page-container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container-page {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+  .detail-page-container {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+}
+
 @layer utilities {
   /* Woodcut-style texture overlay (optional) */
   .texture-woodcut {

src/app/layout.tsx

@@ -6,9 +6,11 @@ import "./globals.css";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
-import SearchProvider from "@/components/search/SearchProvider";
+import { SearchProvider } from "@/context/SearchContext";
 import SearchModal from "@/components/search/SearchModal";
 import AIChatSidebar from "@/components/search/AIChatSidebar";
+import { ScrollToTop } from "@/components/layout/ScrollToTop";
+import { SidebarProvider } from "@/context/SidebarContext";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -109,13 +111,16 @@ export default function RootLayout({
       className={`${inter.variable} ${bdoGrotesk.variable} ${source_serif.variable} ${ibm_plex_mono.variable}`}
     >
       <body className="min-h-screen flex flex-col">
+        <SidebarProvider>
         <SearchProvider>
+          <ScrollToTop />
           <Header />
-          <main className="flex-grow pt-[72px]">{children}</main>
+          <main className="flex-grow pt-[70px]">{children}</main>
           <Footer />
           <SearchModal />
           <AIChatSidebar />
         </SearchProvider>
+        </SidebarProvider>
       </body>
       <GoogleAnalytics gaId="G-MYMQNTYY27" />
     </html>

src/app/mechanisms/[slug]/page.tsx

@@ -2,6 +2,7 @@ import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { AppCard, MechanismCard, CaseStudyCard, ResearchCard, CampaignCard } from '@/components/cards'
 import ContentDetailPage from '@/components/templates/ContentDetailPage'
+import { AppSidebar } from '@/components/layouts/AppSidebar'
 import { getMechanismBySlug, mechanisms } from '@/content/mechanisms'
 import { getAppBySlug } from '@/content/apps'
 import { getCaseStudyBySlug } from '@/content/case-studies'
@@ -74,9 +75,13 @@ export default async function MechanismDetailPage({ params }: PageProps) {
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumb) }} />
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }} />
       <ContentDetailPage
+        sidebar={<AppSidebar />}
         item={mechanism}
-        breadcrumbHref="/mechanisms"
-        breadcrumbLabel="Back to Mechanisms"
+        breadcrumbItems={[
+          { href: '/', label: 'Home' },
+          { href: '/mechanisms', label: 'Mechanisms' },
+          { label: mechanism.name },
+        ]}
         relatedSections={[
           {
             title: 'Related Apps',

src/app/mechanisms/page.tsx

@@ -6,6 +6,7 @@ import {
   SensemakingSection,
   CategoryContent,
 } from "@/components/layouts";
+import { AppSidebar } from "@/components/layouts/AppSidebar";
 import { mechanisms } from "@/content/mechanisms";
 import { getSensemakingFor } from "@/content/research";
 import SectionHeader from "@/components/ui/SectionHeader";
@@ -15,7 +16,7 @@ export const metadata: Metadata = pageSeo.mechanisms;
 
 export default function MechanismsPage() {
   return (
-    <ListPageLayout>
+    <ListPageLayout sidebar={<AppSidebar />}>
       <ListPageHeader
         title="Funding Mechanisms"
         description="Funding mechanisms and approaches"