content: generate{Album,Group}SecondaryNav: use nav-link classes

2 files changed, 65 insertions, 43 deletions

diff --git a/src/content/dependencies/generateAlbumSecondaryNav.js b/src/content/dependencies/generateAlbumSecondaryNav.js
index 5b2e340..400420b 100644
--- a/src/content/dependencies/generateAlbumSecondaryNav.js
+++ b/src/content/dependencies/generateAlbumSecondaryNav.js
@@ -100,50 +100,69 @@ export default {
   },
 
   generate(relations, slots, {html, language}) {
-    return relations.secondaryNav.slots({
-      class: 'nav-links-groups',
-      content:
-        stitchArrays({
-          colorStyle: relations.colorStyles,
-          groupLink: relations.groupLinks,
-          previousNextLinks: relations.previousNextLinks ?? null,
-          previousAlbumLink: relations.previousAlbumLinks ?? null,
-          nextAlbumLink: relations.nextAlbumLinks ?? null,
-        }).map(({
-            colorStyle,
-            groupLink,
-            previousNextLinks,
-            previousAlbumLink,
-            nextAlbumLink,
-          }) => {
-            if (
-              slots.mode === 'track' ||
-              !previousAlbumLink && !nextAlbumLink
-            ) {
-              return language.$('albumSidebar.groupBox.title', {
-                group: groupLink,
-              });
-            }
-
-            const {content: previousNextPart} =
-              previousNextLinks.slots({
+    const navLinksShouldShowPreviousNext =
+      (slots.mode === 'track'
+        ? Array.from(relations.previousNextLinks, () => false)
+        : stitchArrays({
+            previousAlbumLink: relations.previousAlbumLinks ?? null,
+            nextAlbumLink: relations.nextAlbumLinks ?? null,
+          }).map(({previousAlbumLink, nextAlbumLink}) =>
+              previousAlbumLink ||
+              nextAlbumLink));
+
+    const navLinkPreviousNextLinks =
+      stitchArrays({
+        showPreviousNext: navLinksShouldShowPreviousNext,
+        previousNextLinks: relations.previousNextLinks ?? null,
+        previousAlbumLink: relations.previousAlbumLinks ?? null,
+        nextAlbumLink: relations.nextAlbumLinks ?? null,
+      }).map(({
+          showPreviousNext,
+          previousNextLinks,
+          previousAlbumLink,
+          nextAlbumLink,
+        }) =>
+          (showPreviousNext
+            ? previousNextLinks.slots({
                 previousLink: previousAlbumLink,
                 nextLink: nextAlbumLink,
                 id: false,
-              });
-
-            return (
-              html.tag('span',
-                colorStyle.slot('context', 'primary-only'),
+              })
+            : null));
 
-                [
-                  language.$('albumSidebar.groupBox.title', {
-                    group: groupLink.slot('color', false),
-                  }),
+    for (const groupLink of relations.groupLinks) {
+      groupLink.setSlot('color', false);
+    }
 
-                  `(${language.formatUnitList(previousNextPart)})`,
-                ]));
+    const navLinkContents =
+      stitchArrays({
+        groupLink: relations.groupLinks,
+        previousNextLinks: navLinkPreviousNextLinks,
+      }).map(({groupLink, previousNextLinks}) => [
+          language.$('albumSidebar.groupBox.title', {
+            group: groupLink,
           }),
+
+          previousNextLinks &&
+            `(${language.formatUnitList(previousNextLinks.content)})`,
+        ]);
+
+    const navLinks =
+      stitchArrays({
+        content: navLinkContents,
+        colorStyle: relations.colorStyles,
+      }).map(({content, colorStyle}, index) =>
+          html.tag('span', {class: 'nav-link'},
+            index > 0 &&
+              {class: 'has-divider'},
+
+            colorStyle.slot('context', 'primary-only'),
+
+            content));
+
+    return relations.secondaryNav.slots({
+      class: 'nav-links-groups',
+      content: navLinks,
     });
   },
 };
diff --git a/src/content/dependencies/generateGroupSecondaryNav.js b/src/content/dependencies/generateGroupSecondaryNav.js
index 6501cfc..17eb508 100644
--- a/src/content/dependencies/generateGroupSecondaryNav.js
+++ b/src/content/dependencies/generateGroupSecondaryNav.js
@@ -83,15 +83,18 @@ export default {
     return relations.secondaryNav.slots({
       class: 'nav-links-groups',
       content:
-        (!relations.previousGroupLink && !relations.nextGroupLink
-          ? categoryLink ?? html.blank()
-          : html.tag('span',
-              relations.colorStyle,
+        (relations.previousGroupLink || relations.nextGroupLink
+          ? html.tag('span', {class: 'nav-link'},
+              relations.colorStyle.slot('context', 'primary-only'),
 
               [
                 categoryLink?.slot('color', false),
                 `(${language.formatUnitList(previousNextPart)})`,
-              ])),
+              ])
+       : categoryLink
+          ? html.tag('span', {class: 'nav-link'},
+              categoryLink)
+          : html.blank()),
     });
   },
 };