4 files changed, 145 insertions, 4 deletions

diff --git a/src/content/dependencies/generateAlbumSecondaryNav.js b/src/content/dependencies/generateAlbumSecondaryNav.js
index 4a3d18be..a5dc0ba8 100644
--- a/src/content/dependencies/generateAlbumSecondaryNav.js
+++ b/src/content/dependencies/generateAlbumSecondaryNav.js
@@ -1,21 +1,47 @@
+import {stitchArrays} from '#sugar';
+
 export default {
   contentDependencies: [
     'generateAlbumSecondaryNavGroupPart',
+    'generateAlbumSecondaryNavSeriesPart',
     'generateSecondaryNav',
   ],
 
   extraDependencies: ['html'],
 
-  relations: (relation, album) => ({
+  query(album) {
+    const query = {};
+
+    query.groups =
+      album.groups;
+
+    query.groupSerieses =
+      query.groups
+        .map(group =>
+          group.serieses
+            .filter(series => series.albums.includes(album)));
+
+    return query;
+  },
+
+  relations: (relation, query, album) => ({
     secondaryNav:
       relation('generateSecondaryNav'),
 
     groupParts:
-      album.groups
+      query.groups
         .map(group =>
           relation('generateAlbumSecondaryNavGroupPart',
             group,
             album)),
+
+    seriesParts:
+      query.groupSerieses
+        .map(serieses => serieses
+          .map(series =>
+            relation('generateAlbumSecondaryNavSeriesPart',
+              series,
+              album))),
   }),
 
   slots: {
@@ -29,7 +55,14 @@ export default {
     relations.secondaryNav.slots({
       class: 'nav-links-groups',
       content:
-        relations.groupParts
-          .map(part => part.slot('mode', slots.mode)),
+        stitchArrays({
+          groupPart: relations.groupParts,
+          seriesParts: relations.seriesParts,
+        }).map(({groupPart, seriesParts}) => [
+            groupPart.slot('mode', slots.mode),
+
+            seriesParts
+              .map(part => part.slot('mode', slots.mode)),
+          ]),
     }),
 };
diff --git a/src/content/dependencies/generateAlbumSecondaryNavSeriesPart.js b/src/content/dependencies/generateAlbumSecondaryNavSeriesPart.js
new file mode 100644
index 00000000..4cba4cf3
--- /dev/null
+++ b/src/content/dependencies/generateAlbumSecondaryNavSeriesPart.js
@@ -0,0 +1,98 @@
+import {atOffset} from '#sugar';
+
+export default {
+  contentDependencies: [
+    'generateColorStyleAttribute',
+    'generatePreviousNextLinks',
+    'linkAlbumDynamically',
+    'linkGroup',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  query(series, album) {
+    const query = {};
+
+    const albums =
+      series.albums;
+
+    const currentIndex =
+      albums.indexOf(album);
+
+    query.previousAlbum =
+      atOffset(albums, currentIndex, -1);
+
+    query.nextAlbum =
+      atOffset(albums, currentIndex, +1);
+
+    return query;
+  },
+
+  relations: (relation, query, series, _album) => ({
+    groupLink:
+      relation('linkGroup', series.group),
+
+    colorStyle:
+      relation('generateColorStyleAttribute', series.group.color),
+
+    previousNextLinks:
+      relation('generatePreviousNextLinks'),
+
+    previousAlbumLink:
+      (query.previousAlbum
+        ? relation('linkAlbumDynamically', query.previousAlbum)
+        : null),
+
+    nextAlbumLink:
+      (query.nextAlbum
+        ? relation('linkAlbumDynamically', query.nextAlbum)
+        : null),
+  }),
+
+  data: (_query, series) => ({
+    name: series.name,
+  }),
+
+  slots: {
+    mode: {
+      validate: v => v.is('album', 'track'),
+      default: 'album',
+    },
+  },
+
+  generate: (data, relations, slots, {html, language}) =>
+    html.tag('span',
+      {class: 'nav-link'},
+
+      relations.colorStyle
+        .slot('context', 'primary-only'),
+
+      language.encapsulate('albumSecondaryNav.series', workingCapsule => {
+        const workingOptions = {};
+
+        workingOptions.series =
+          relations.groupLink.slots({
+            attributes: {class: 'series'},
+            color: false,
+            content: language.sanitize(data.name),
+          });
+
+        if (slots.mode === 'album') {
+          const {previousNextLinks} = relations;
+
+          previousNextLinks.setSlots({
+            previousLink: relations.previousAlbumLink,
+            nextLink: relations.nextAlbumLink,
+            id: false,
+          });
+
+          if (!html.isBlank(previousNextLinks)) {
+            workingCapsule += '.withPreviousNext';
+            workingOptions.previousNext =
+              language.formatUnitList(previousNextLinks.content);
+          }
+        }
+
+        return language.$(workingCapsule, workingOptions);
+      })),
+};
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 9d17fd0f..77d2a56a 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -804,6 +804,10 @@ a:not([href]):hover {
   color: white;
 }
 
+.nav-link a.series {
+  font-style: oblique;
+}
+
 .nav-main-links .nav-link.current > span.nav-link-content > a {
   font-weight: 800;
 }
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 731943a0..0d4bdecd 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -943,6 +943,12 @@ albumSecondaryNav:
   group.withPreviousNext: >-
     {GROUP} ({PREVIOUS_NEXT})
 
+  series: >-
+    Series: {SERIES}
+
+  series.withPreviousNext: >-
+    Series: {SERIES} ({PREVIOUS_NEXT})
+
 #
 # albumPage:
 #