mirror of
https://github.com/BerriAI/litellm.git
synced 2026-09-12 23:01:41 +00:00
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:
parent
7279dca929
commit
9f79dfdbdc
3 changed files with 5 additions and 68 deletions
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue