Skip to content

Commit f2d0cf2

Browse files
committed
feat: add overview layout
1 parent a957f3b commit f2d0cf2

File tree

1 file changed

+101
-0
lines changed

1 file changed

+101
-0
lines changed
Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
import Document, { type Props as DocumentProps } from './document.astro';
3+
import { BreadcrumbNav, BreadcrumbNavLink, BreadcrumbNavSeparator } from '@components/breadcrumb-nav/breadcrumb-nav';
4+
import { IconChevronRight } from '@tabler/icons-react';
5+
6+
export type Props = DocumentProps;
7+
8+
const { ...props } = Astro.props;
9+
---
10+
11+
<Document {...props}>
12+
<div class="ma-layout-overview">
13+
<div class="ma-layout-overview__content">
14+
<div class="ma-layout-overview__side-bar">TODO: site menu</div>
15+
16+
<nav class="ma-layout-overview__breadcrumbs" aria-labelledby="breadcrumb-label">
17+
<h2 hidden id="breadcrumb-label">Kruimelpad</h2>
18+
<BreadcrumbNav>
19+
<BreadcrumbNavLink href="/">Home</BreadcrumbNavLink>
20+
<BreadcrumbNavSeparator>
21+
<IconChevronRight />
22+
</BreadcrumbNavSeparator>
23+
<BreadcrumbNavLink href="#">{props.title}</BreadcrumbNavLink>
24+
</BreadcrumbNav>
25+
</nav>
26+
27+
<main id="main" class="ma-layout-overview__main">
28+
<div class="ma-layout-overview__main-content">
29+
<slot />
30+
</div>
31+
</main>
32+
</div>
33+
</div>
34+
</Document>
35+
36+
<style>
37+
.ma-layout-overview {
38+
container: ma-layout-overview / inline-size;
39+
width: 100%;
40+
}
41+
42+
.ma-layout-overview__content {
43+
display: grid;
44+
grid-template-columns: var(--basis-space-inline-2xl) 1fr var(--basis-space-inline-2xl);
45+
grid-template-areas:
46+
'. site-nav .'
47+
'. breadcrumbs .'
48+
'. content .';
49+
inline-size: 100%;
50+
}
51+
52+
.ma-layout-overview__side-bar {
53+
grid-area: site-nav;
54+
position: absolute;
55+
top: 0;
56+
left: 0;
57+
}
58+
59+
.ma-layout-overview__breadcrumbs {
60+
grid-area: breadcrumbs;
61+
}
62+
63+
.ma-layout-overview__header {
64+
grid-area: header;
65+
}
66+
67+
.ma-layout-overview__main {
68+
display: contents;
69+
}
70+
71+
.ma-layout-overview__main-content {
72+
grid-area: content;
73+
}
74+
75+
@container ma-layout-overview (width >= 768px) {
76+
.ma-layout-overview__content {
77+
grid-template-columns: var(--basis-space-inline-2xl) minmax(220px, var(--basis-page-max-inline-size)) var(
78+
--basis-space-inline-2xl
79+
);
80+
grid-template-rows: auto 1fr;
81+
grid-template-areas:
82+
'. breadcrumbs .'
83+
'. content . ';
84+
}
85+
}
86+
87+
@container ma-layout-overview (width >= 1140px) {
88+
.ma-layout-overview__side-bar {
89+
position: relative;
90+
}
91+
.ma-layout-overview__content {
92+
grid-template-columns:
93+
minmax(100px, 300px) var(--basis-space-inline-2xl) 1fr minmax(220px, var(--basis-page-max-inline-size))
94+
minmax(300px, 1fr);
95+
grid-template-rows: auto 1fr;
96+
grid-template-areas:
97+
'site-nav . . breadcrumbs . '
98+
'site-nav . . content . ';
99+
}
100+
}
101+
</style>

0 commit comments

Comments
 (0)