fix: restore left nav sidebar on blog post pages

The blog sidebar listing all posts was being hidden via CSS
(display: none !important) and the content forced to full-width.
This was replaced with a fixed 'Back to Blog' link that required
users to go back to the list page to navigate between posts.

Changes:
- Remove CSS that hides the blog sidebar on post pages
- Style sidebar to 260px width alongside constrained content
- Remove fixed BackLink component (sidebar handles navigation)
- Clean up unused BackLink styles from styles.module.css

The blog plugin already generates the sidebar (blogSidebarCount: 'ALL'),
so this just un-hides it.

Co-authored-by: Krrish Dholakia <krrish-berri-2@users.noreply.github.com>
This commit is contained in:
Cursor Agent 2026-04-16 21:12:03 +00:00
parent 7279dca929
commit 9f79dfdbdc
No known key found for this signature in database
3 changed files with 5 additions and 68 deletions

View file

@ -799,17 +799,15 @@ video {
BLOG Ramp-style aesthetic
========================================= */
/* Hide blog sidebar on post pages */
/* Blog sidebar on post pages — keep visible for cross-post navigation */
.blog-post-page aside.col {
display: none !important;
max-width: 260px;
flex: 0 0 260px;
}
/* Make blog post content full-width + constrained */
/* Constrain blog post content when sidebar is visible */
.blog-post-page main.col--7 {
--ifm-col-width: 100% !important;
max-width: 820px !important;
margin: 0 auto !important;
flex: 0 0 100% !important;
}
/* Clean post header */

View file

@ -1,20 +1,7 @@
import React, {useEffect} from 'react';
import React from 'react';
import OriginalBlogPostPage from '@theme-original/BlogPostPage';
import styles from './styles.module.css';
function BackLink() {
return (
<div className={styles.backOuter}>
<a href="/blog" className={styles.backLink}>
<svg className={styles.backArrow} fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16l-4-4m0 0l4-4m-4 4h18" />
</svg>
Blog
</a>
</div>
);
}
function HiringCTA() {
return (
<div className={styles.ctaOuter}>
@ -38,15 +25,8 @@ function HiringCTA() {
}
export default function BlogPostPage(props) {
// Add body class so CSS can hide the sidebar
useEffect(() => {
document.body.classList.add('blog-post-body');
return () => document.body.classList.remove('blog-post-body');
}, []);
return (
<>
<BackLink />
<OriginalBlogPostPage {...props} />
<HiringCTA />
</>

View file

@ -1,44 +1,3 @@
.backOuter {
position: fixed;
top: calc(var(--ifm-navbar-height, 60px) + 1rem);
left: 2rem;
z-index: 100;
}
.backLink {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
color: #6b7280;
text-decoration: none !important;
transition: color 0.15s;
}
.backLink:hover {
color: #111827;
}
.backArrow {
width: 1rem;
height: 1rem;
transition: transform 0.15s;
flex-shrink: 0;
}
.backLink:hover .backArrow {
transform: translateX(-3px);
}
[data-theme='dark'] .backLink {
color: #9ca3af;
}
[data-theme='dark'] .backLink:hover {
color: #f9fafb;
}
.ctaOuter {
max-width: 820px;
margin: 0 auto;