secondary nav, group links in narrow view

2 files changed, 51 insertions, 2 deletions

diff --git a/src/page/album.js b/src/page/album.js
index b68189fd..fd3f4f5d 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -269,7 +269,13 @@ export function write(album, {wikiData}) {
                         }
                     ],
                     content: html.tag('div', generateAlbumChronologyLinks(album, null, {generateChronologyLinks}))
-                }
+                },
+
+                secondaryNav: generateAlbumSecondaryNav(album, null, {
+                    language,
+                    link,
+                    getLinkThemeString,
+                }),
             };
         }
     };
@@ -398,6 +404,42 @@ export function generateAlbumSidebar(album, currentTrack, {
     }
 }
 
+export function generateAlbumSecondaryNav(album, currentTrack, {
+    link,
+    language,
+    getLinkThemeString,
+}) {
+    const { groups } = album;
+
+    if (!groups.length) {
+        return null;
+    }
+
+    const groupParts = groups.map(group => {
+        const albums = group.albums.filter(album => album.date);
+        const index = albums.indexOf(album);
+        const next = index >= 0 && albums[index + 1];
+        const previous = index > 0 && albums[index - 1];
+        return {group, next, previous};
+    }).map(({group, next, previous}) => {
+        const previousNext = !currentTrack && [
+            previous && link.album(previous, {color: false, text: language.$('misc.nav.previous')}),
+            next && link.album(next, {color: false, text: language.$('misc.nav.next')})
+        ].filter(Boolean);
+        return html.tag('span', {style: getLinkThemeString(group.color)}, [
+            language.$('albumSidebar.groupBox.title', {
+                group: link.groupInfo(group)
+            }),
+            previousNext?.length && `(${previousNext.join(',\n')})`
+        ]);
+    });
+
+    return {
+        classes: ['dot-between-spans'],
+        content: groupParts.join('\n'),
+    };
+}
+
 export function generateAlbumNavLinks(album, currentTrack, {
     generatePreviousNextLinks,
     language
diff --git a/src/page/track.js b/src/page/track.js
index 04e00ee3..955fe029 100644
--- a/src/page/track.js
+++ b/src/page/track.js
@@ -7,6 +7,7 @@ import fixWS from 'fix-whitespace';
 import {
     generateAlbumChronologyLinks,
     generateAlbumNavLinks,
+    generateAlbumSecondaryNav,
     generateAlbumSidebar
 } from './album.js';
 
@@ -335,7 +336,13 @@ export function write(track, {wikiData}) {
                             ${generateAlbumChronologyLinks(album, track, {generateChronologyLinks})}
                         </div>
                     `
-                }
+                },
+
+                secondaryNav: generateAlbumSecondaryNav(album, track, {
+                    language,
+                    link,
+                    getLinkThemeString,
+                }),
             };
         }
     };