forked from phc/tutorato
new: better header bar layout
parent
7ea4885a57
commit
b275567a8d
@ -1,55 +1,85 @@
|
||||
---
|
||||
const years = await Astro.glob("../pages/archivio/*/index.md");
|
||||
const yearLabels = years.map((module) => module.file.split("/").at(-2)).toSorted();
|
||||
const currentYear = yearLabels.at(-1);
|
||||
const { selectedCourseLabel, courses } = Astro.props
|
||||
|
||||
const { selectedCourseLabel, courses } = Astro.props;
|
||||
const years = await Astro.glob('../pages/archivio/*/index.md')
|
||||
const yearLabels = years.map(module => module.file.split('/').at(-2)).toSorted()
|
||||
|
||||
/** Get the current year using the latest year label */
|
||||
const currentYear = yearLabels.at(-1)
|
||||
|
||||
/** Get the selected year using the courses array */
|
||||
const selectedYear = courses
|
||||
.find((module) => module.file.includes("index.md"))
|
||||
.file.split("/")
|
||||
.at(-2);
|
||||
const isCurrentYear = currentYear == selectedYear;
|
||||
const coursesWithoutIndex = courses.filter((m) => !m.file.includes("index.md"));
|
||||
.find(module => module.file.includes('index.md'))
|
||||
.file.split('/')
|
||||
.at(-2)
|
||||
|
||||
const selectedYearIndex = yearLabels.indexOf(selectedYear)
|
||||
const previousYear = selectedYearIndex > 0 ? yearLabels[selectedYearIndex - 1] : null
|
||||
const nextYear = selectedYearIndex < yearLabels.length - 1 ? yearLabels[selectedYearIndex + 1] : null
|
||||
|
||||
const isCurrentYear = currentYear == selectedYear
|
||||
const coursesWithoutIndex = courses.filter(m => !m.file.includes('index.md'))
|
||||
---
|
||||
|
||||
<header>
|
||||
<h1>
|
||||
<a href="/"> Tutorato Matematica</a>
|
||||
<a href="/">Tutorato Matematica</a>
|
||||
</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<!-- <ul>
|
||||
{
|
||||
yearLabels.slice(0, -1).map((year) => (
|
||||
yearLabels.slice(0, -1).map(year => (
|
||||
<li class:list={{ active: year === selectedYear }}>
|
||||
<a href={`/archivio/${year}`}>{year}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
<li class:list={{ active: currentYear === selectedYear }}>
|
||||
<a href={"/"}>{currentYear}</a>
|
||||
<a href={'/'}>{currentYear}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
</ul> -->
|
||||
<div class="year-navigation">
|
||||
<!-- <div class="mobile-only"></div> -->
|
||||
<div class="row desktop-only">
|
||||
{
|
||||
coursesWithoutIndex.map((course) => (
|
||||
<li
|
||||
previousYear === null ? (
|
||||
<span class="link disabled">
|
||||
<div class="gg-chevron-left" />
|
||||
</span>
|
||||
) : (
|
||||
<a href={`/archivio/${previousYear}`}>
|
||||
<div class="gg-chevron-left" />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
<a href={`/archivio/${selectedYear}`}>{selectedYear}</a>
|
||||
{
|
||||
nextYear === null ? (
|
||||
<span class="link disabled">
|
||||
<div class="gg-chevron-right" />
|
||||
</span>
|
||||
) : (
|
||||
<a href={`/archivio/${nextYear}`}>
|
||||
<div class="gg-chevron-right" />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-navigation">
|
||||
{
|
||||
coursesWithoutIndex.map(course => (
|
||||
<a
|
||||
class:list={{
|
||||
active:
|
||||
selectedCourseLabel === course.file.split("/").at(-1),
|
||||
active: selectedCourseLabel === course.file.split('/').at(-1),
|
||||
last: course.frontmatter['header-position'] === 'last',
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href={
|
||||
isCurrentYear
|
||||
? "/" + course.url.split("/").at(-1)
|
||||
: course.url
|
||||
}
|
||||
href={isCurrentYear ? '/' + course.url.split('/').at(-1) : course.url}
|
||||
>
|
||||
{course.frontmatter.title}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
layout: ../../../layouts/MarkdownPage.astro
|
||||
header-position: last
|
||||
title: Tutorato Alla Pari
|
||||
---
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
.gg-calendar,
|
||||
.gg-calendar::before {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.gg-calendar {
|
||||
position: relative;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid;
|
||||
border-top: 4px solid;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.gg-calendar::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
border-radius: 3px;
|
||||
left: 2px;
|
||||
background: currentColor;
|
||||
height: 2px;
|
||||
top: 2px;
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
.gg-chevron-left {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.gg-chevron-left::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
left: 6px;
|
||||
top: 4px;
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
.gg-chevron-right {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.gg-chevron-right::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-bottom: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(-45deg);
|
||||
right: 6px;
|
||||
top: 4px;
|
||||
}
|
||||
Loading…
Reference in New Issue