new: better header bar layout

src/components/Header.astro

@@ -1,55 +1,85 @@
 ---
-const years = await Astro.glob("../pages/archivio/*/index.md");
+const { selectedCourseLabel, courses } = Astro.props
-const yearLabels = years.map((module) => module.file.split("/").at(-2)).toSorted();
-const currentYear = yearLabels.at(-1);
 
-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"))
+    .find(module => module.file.includes('index.md'))
-    .file.split("/")
+    .file.split('/')
-    .at(-2);
+    .at(-2)
-const isCurrentYear = currentYear == selectedYear;
+
-const coursesWithoutIndex = courses.filter((m) => !m.file.includes("index.md"));
+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>
+    </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) => (
+                    previousYear === null ? (
-                        <li
+                        <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:
+                            active: selectedCourseLabel === course.file.split('/').at(-1),
-                                    selectedCourseLabel === course.file.split("/").at(-1),
+                            last: course.frontmatter['header-position'] === 'last',
                         }}
-                        >
+                        href={isCurrentYear ? '/' + course.url.split('/').at(-1) : course.url}
-                            <a
-                                href={
-                                    isCurrentYear
-                                        ? "/" + course.url.split("/").at(-1)
-                                        : course.url
-                                }
                     >
                         {course.frontmatter.title}
                     </a>
-                        </li>
                 ))
             }
-            </ul>
+        </div>
     </nav>
-    </h1>
 </header>

src/pages/archivio/2023-2024/alla-pari.md

@@ -1,5 +1,6 @@
 ---
 layout: ../../../layouts/MarkdownPage.astro
+header-position: last
 title: Tutorato Alla Pari
 ---
 

src/style.css

@@ -2,6 +2,10 @@
 @import url('https://cdn.jsdelivr.net/gh/vsalvino/computer-modern@main/fonts/serif.css');
 @import url('https://cdn.jsdelivr.net/gh/vsalvino/computer-modern@main/fonts/bright.css');
 
+@import url('./styles/chevron-left.css');
+@import url('./styles/chevron-right.css');
+@import url('./styles/calendar.css');
+
 *,
 *::before,
 *::after {
@@ -28,7 +32,8 @@ button,
     cursor: pointer;
 }
 
-a {
+a,
+.link {
     text-decoration: none;
     color: #a00;
 
@@ -89,7 +94,7 @@ body {
     font-size: 20px;
     line-height: 1;
     color: #333;
-    background-color: #fffafa;
+    background-color: #f3f0f0;
 
     display: grid;
     grid-template-columns: 1fr;
@@ -99,40 +104,59 @@ body {
     padding-bottom: 8rem;
 
     header {
+        user-select: none;
+
         width: 100%;
 
         background-color: #a00;
         color: #fff;
 
-        display: flex;
+        display: grid;
-        flex-wrap: wrap;
+        grid-template-rows: auto auto;
 
-        place-content: center;
+        place-items: center;
-        column-gap: 1rem;
-        row-gap: 1.5rem;
 
-        align-content: end;
+        gap: 2rem;
-        align-items: end;
 
         padding: 6rem 1rem 1.25rem;
 
         box-shadow: 0 0 2rem rgba(0, 0, 0, 0.125);
 
         > h1 {
-            line-height: 0.775;
+            line-height: 1.125;
             font-family: 'Computer Modern Serif', sans-serif;
+            text-align: center;
         }
 
-        ul {
+        nav {
+            display: flex;
+            justify-content: space-between;
+
+            width: 100%;
+            max-width: 64rem;
+
+            .row {
                 display: grid;
                 grid-auto-flow: column;
+                gap: 1rem;
+            }
 
-            list-style: none;
+            > .course-navigation {
-
+                display: flex;
+                flex-wrap: wrap;
                 gap: 1rem;
+
+                > .last {
+                    order: 1;
+                }
+            }
         }
 
-        a {
+        a,
+        .link {
+            display: grid;
+            place-content: center;
+
             color: #fff;
 
             padding: 0.5rem;
@@ -146,18 +170,38 @@ body {
             font-size: 22px;
 
             border-radius: 2px;
+
+            &.disabled {
+                color: #420000;
+
+                &:hover {
+                    background: none;
+                }
+            }
         }
 
         h1 > a {
             font-size: 42px;
         }
 
-        @media screen and (min-width: 50rem) {
+        @media screen and (max-width: 64rem) {
-            > :nth-child(1) {
+            gap: 1rem;
-                padding-left: 2rem;
+            padding: 2rem 0 1rem;
+
+            nav {
+                flex-direction: column;
+                align-items: center;
+                gap: 1rem;
+
+                > .course-navigation {
+                    justify-content: center;
+                }
+
+                a,
+                .link {
+                    font-size: 18px;
+                    padding: 0.25rem;
                 }
-            > :nth-child(2) {
-                padding-right: 2rem;
             }
         }
     }
@@ -203,20 +247,15 @@ body {
 /* Mobile */
 
 @media screen and (max-width: 50rem) {
+    table {
+        min-width: 50ch;
+        overflow-x: scroll;
+    }
+
     body {
         gap: 3rem;
         padding-bottom: 3rem;
 
-        > header {
-            padding: 3rem 1rem 1.25rem;
-
-            > ul {
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: center;
-            }
-        }
-
         > main {
             width: calc(100vw - 2rem);
             padding: 1rem;

src/styles/calendar.css

@@ -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;
+}

src/styles/chevron-left.css

@@ -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;
+}

src/styles/chevron-right.css

@@ -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;
+}