107 lines
2.3 KiB
Plaintext
107 lines
2.3 KiB
Plaintext
---
|
|
import { getCollection, getEntry } from "astro:content";
|
|
import type { CollectionEntry } from "astro:content";
|
|
|
|
interface Props {
|
|
collectionName: CollectionEntry<"diaryMainPages">["slug"];
|
|
}
|
|
|
|
const { collectionName } = Astro.props;
|
|
const collectionTitle = (await getEntry("diaryMainPages", collectionName)).data
|
|
.title;
|
|
|
|
const collection = (await getCollection(collectionName)).sort(
|
|
(a, b) => a.data.sorting - b.data.sorting,
|
|
);
|
|
const collectionBasePath = `/blog/${collectionName}`;
|
|
|
|
const pageSelectedClass = (slug?: string) =>
|
|
`${collectionBasePath}${slug ? "/" + slug : ""}` === Astro.url.pathname
|
|
? "pageSelected"
|
|
: "";
|
|
---
|
|
|
|
<aside class="desktopOnly">
|
|
<a href={collectionBasePath}>
|
|
<h4 class={pageSelectedClass()}>
|
|
{collectionTitle}
|
|
</h4>
|
|
</a>
|
|
<ol>
|
|
{
|
|
collection.map((entry) => (
|
|
<li class={pageSelectedClass(entry.slug)}>
|
|
<a href={`${collectionBasePath}/${entry.slug}`}>
|
|
{entry.data.title}
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ol>
|
|
</aside>
|
|
|
|
<style lang="scss">
|
|
aside {
|
|
float: right;
|
|
background: transparent;
|
|
display: block;
|
|
/* 50px padding in main */
|
|
margin: -50px -50px 10px 10px;
|
|
padding: 20px;
|
|
border-bottom-left-radius: 1em;
|
|
border-top-right-radius: 1em;
|
|
border: none;
|
|
border-left: 1px solid var(--blog_content-border);
|
|
border-bottom: 1px solid var(--blog_content-border);
|
|
|
|
@media screen and (max-width: 890px) {
|
|
& {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
ol {
|
|
list-style-type: "\1405\0020\0020";
|
|
list-style-position: inside;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
width: 200px;
|
|
|
|
&:hover {
|
|
&::marker {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
a:link,
|
|
a:visited,
|
|
a:hover,
|
|
a:active {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
li.pageSelected {
|
|
font-weight: bold;
|
|
}
|
|
|
|
h4.pageSelected,
|
|
h4:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|