new: better header bar layout

2024-10-02 00:31:44 +02:00
parent 7ea4885a57
commit b275567a8d
13 changed files with 220 additions and 80 deletions
@@ -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>
-        <nav>
-            <ul>
-                {
-                    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>
-                </li>
-            </ul>
-            <ul>
-                {
-                    coursesWithoutIndex.map((course) => (
-                        <li
-                            class:list={{
-                                active:
-                                    selectedCourseLabel === course.file.split("/").at(-1),
-                            }}
-                        >
-                            <a
-                                href={
-                                    isCurrentYear
-                                        ? "/" + course.url.split("/").at(-1)
-                                        : course.url
-                                }
-                            >
-                                {course.frontmatter.title}
-                            </a>
-                        </li>
-                    ))
-                }
-            </ul>
-        </nav>
+        <a href="/">Tutorato Matematica</a>
    </h1>
+    <nav>
+        <!-- <ul>
+            {
+                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>
+            </li>
+        </ul> -->
+        <div class="year-navigation">
+            <!-- <div class="mobile-only"></div> -->
+            <div class="row desktop-only">
+                {
+                    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),
+                            last: course.frontmatter['header-position'] === 'last',
+                        }}
+                        href={isCurrentYear ? '/' + course.url.split('/').at(-1) : course.url}
+                    >
+                        {course.frontmatter.title}
+                    </a>
+                ))
+            }
+        </div>
+    </nav>
 </header>