gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make single article pages use a wider main column than indexes

Browse Source
This commit is contained in:
gbanyan
2025-11-17 22:21:54 +08:00
parent 77c127756e
commit 45e6088f69
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/layout-shell.tsx
View File

@@ -1,14 +1,27 @@
'use client';
import { usePathname } from 'next/navigation';
import { SiteHeader } from './site-header'; import { SiteHeader } from './site-header';
import { SiteFooter } from './site-footer'; import { SiteFooter } from './site-footer';
import { RightSidebar } from './right-sidebar'; import { RightSidebar } from './right-sidebar';
import { BackToTop } from './back-to-top'; import { BackToTop } from './back-to-top';
export function LayoutShell({ children }: { children: React.ReactNode }) { export function LayoutShell({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
const isDetailPage =
pathname.startsWith('/blog/') || pathname.startsWith('/pages/');
const gridColsClass = isDetailPage
? 'lg:grid-cols-[minmax(0,3fr)_minmax(0,1.2fr)]'
: 'lg:grid-cols-[minmax(0,2.6fr)_minmax(0,1.4fr)]';
return ( return (
<div className="flex min-h-screen flex-col"> <div className="flex min-h-screen flex-col">
<SiteHeader /> <SiteHeader />
<main className="flex-1 px-4 py-6"> <main className="flex-1 px-4 py-6">
<div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-[minmax(0,2.6fr)_minmax(0,1.4fr)]"> <div
className={`mx-auto grid max-w-7xl gap-6 ${gridColsClass}`}
>
<div>{children}</div> <div>{children}</div>
<RightSidebar /> <RightSidebar />
</div> </div>