refactor: allow to hide the header

This commit is contained in:
Stefan Imhoff
2023-04-25 19:03:12 +02:00
parent ebc0d04c05
commit 4635ea5f59
2 changed files with 17 additions and 6 deletions

View File

@@ -9,11 +9,11 @@ import PageFooter from '../components/PageFooter.astro';
export interface Props { export interface Props {
backLink?: string; backLink?: string;
footer?: boolean; footer?: boolean;
navigation?: boolean; header?: boolean;
title: string; title: string;
} }
const { backLink, footer = true, navigation, title } = Astro.props; const { backLink, footer = true, header = true, title } = Astro.props;
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@@ -56,9 +56,9 @@ const { backLink, footer = true, navigation, title } = Astro.props;
class="flex h-screen flex-col bg-shibui-100 font-sans font-normal leading-relaxed text-shibui-950 common-ligatures dark:bg-shibui-900 dark:text-shibui-200/[0.87]" class="flex h-screen flex-col bg-shibui-100 font-sans font-normal leading-relaxed text-shibui-950 common-ligatures dark:bg-shibui-900 dark:text-shibui-200/[0.87]"
> >
<Sprite.Provider> <Sprite.Provider>
<PageHeader backLink={backLink} navigation={navigation} /> {header && <PageHeader backLink={backLink} />}
<div class="page-content flex grow"> <div class="page-content flex grow">
<main> <main class="h-full w-full">
<slot /> <slot />
</main> </main>
</div> </div>

View File

@@ -6,13 +6,24 @@ import BaseLayout from './BaseLayout.astro';
export interface Props { export interface Props {
backLink?: string; backLink?: string;
class?: string; class?: string;
footer?: boolean;
gap?: boolean; gap?: boolean;
grid?: 'fullsize' | 'wide' | 'narrow'; grid?: 'fullsize' | 'wide' | 'narrow';
header?: boolean;
innerGrid?: boolean; innerGrid?: boolean;
title: string; title: string;
} }
const { backLink, class: className, gap = true, grid = 'narrow', innerGrid, title } = Astro.props; const {
backLink,
class: className,
footer = true,
gap = true,
grid = 'narrow',
header,
innerGrid,
title,
} = Astro.props;
const gridClasses = cx('grid w-full grid-cols-18', { 'gap-y-gap': gap }, className); const gridClasses = cx('grid w-full grid-cols-18', { 'gap-y-gap': gap }, className);
const wrapperClasses = cx( const wrapperClasses = cx(
@@ -33,7 +44,7 @@ const wrapperClasses = cx(
); );
--- ---
<BaseLayout backLink={backLink} title={title}> <BaseLayout backLink={backLink} footer={footer} header={header} title={title}>
<div class={gridClasses}> <div class={gridClasses}>
<slot name="title" /> <slot name="title" />
<slot name="before-content" /> <slot name="before-content" />