4 files changed, 55 insertions, 37 deletions

diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index 5853f115..e0f23bd0 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -265,7 +265,7 @@ export default {
 
         secondaryNav: relations.secondaryNav,
 
-        ...relations.sidebar,
+        leftSidebar: relations.sidebar,
 
         socialEmbed: relations.socialEmbed,
       });
diff --git a/src/content/dependencies/generateAlbumSidebar.js b/src/content/dependencies/generateAlbumSidebar.js
index 5ef4501b..266a2662 100644
--- a/src/content/dependencies/generateAlbumSidebar.js
+++ b/src/content/dependencies/generateAlbumSidebar.js
@@ -2,6 +2,7 @@ export default {
   contentDependencies: [
     'generateAlbumSidebarGroupBox',
     'generateAlbumSidebarTrackSection',
+    'generatePageSidebar',
     'linkAlbum',
   ],
 
@@ -10,6 +11,9 @@ export default {
   relations(relation, album, track) {
     const relations = {};
 
+    relations.sidebar =
+      relation('generatePageSidebar');
+
     relations.albumLink =
       relation('linkAlbum', album);
 
@@ -29,34 +33,27 @@ export default {
   },
 
   generate(data, relations, {html}) {
-    const trackListBox = {
-      class: 'track-list-sidebar-box',
-      content:
-        html.tags([
-          html.tag('h1', relations.albumLink),
-          relations.trackSections,
-        ]),
-    };
+    const multipleContents = [];
+    const multipleAttributes = [];
+
+    multipleAttributes.push({class: 'track-list-sidebar-box'});
+    multipleContents.push(
+      html.tags([
+        html.tag('h1', relations.albumLink),
+        relations.trackSections,
+      ]));
 
     if (data.isAlbumPage) {
-      const groupBoxes =
+      multipleAttributes.push(...
         relations.groupBoxes
-          .map(content => ({
-            class: 'individual-group-sidebar-box',
-            content: content.slot('mode', 'album'),
-          }));
-
-      return {
-        leftSidebarMultiple: [
-          ...groupBoxes,
-          trackListBox,
-        ],
-      };
-    }
+          .map(() => ({class: 'individual-group-sidebar-box'})));
 
-    const conjoinedGroupBox = {
-      class: 'conjoined-group-sidebar-box',
-      content:
+      multipleContents.push(...
+        relations.groupBoxes
+          .map(content => content.slot('mode', 'album')));
+    } else {
+      multipleAttributes.push({class: 'conjoined-group-sidebar-box'});
+      multipleContents.push(
         relations.groupBoxes
           .flatMap((content, i, {length}) => [
             content.slot('mode', 'track'),
@@ -65,15 +62,13 @@ export default {
                 style: `border-color: var(--primary-color); border-style: none none dotted none`
               }),
           ])
-          .filter(Boolean),
-    };
+          .filter(Boolean));
+    }
 
-    return {
-      // leftSidebarStickyMode: 'column',
-      leftSidebarMultiple: [
-        trackListBox,
-        conjoinedGroupBox,
-      ],
-    };
+    return relations.sidebar.slots({
+      // stickyMode: 'column',
+      multipleContents,
+      multipleAttributes,
+    });
   },
 };
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index d3069f57..7fc6764c 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -144,6 +144,16 @@ export default {
 
     // Sidebars
 
+    leftSidebar: {
+      type: 'html',
+      mutable: true,
+    },
+
+    rightSidebar: {
+      type: 'html',
+      mutable: true,
+    },
+
     ...legacySidebarSlots('leftSidebar'),
     ...legacySidebarSlots('rightSidebar'),
 
@@ -425,8 +435,21 @@ export default {
         wide: slots[side + 'Wide'],
       });
 
-    const leftSidebar = applyLegacySidebarSlots('leftSidebar', 'sidebar-left');
-    const rightSidebar = applyLegacySidebarSlots('rightSidebar', 'sidebar-right');
+    const applyUpdatedSidebar = (side, id) =>
+      slots[side].slots({
+        attributes:
+          slots[side]
+            .getSlotValue('attributes')
+            .with({id}),
+      });
+
+    const getSidebar = (side, id) =>
+      (html.isBlank(slots[side])
+        ? applyLegacySidebarSlots(side, id)
+        : applyUpdatedSidebar(side, id));
+
+    const leftSidebar = getSidebar('leftSidebar', 'sidebar-left');
+    const rightSidebar = getSidebar('rightSidebar', 'sidebar-right');
 
     const hasSidebarLeft = !html.isBlank(html.resolve(leftSidebar));
     const hasSidebarRight = !html.isBlank(html.resolve(rightSidebar));
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index 7b70d4ff..1b5fbbf8 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -595,7 +595,7 @@ export default {
             ],
           }),
 
-        ...relations.sidebar,
+        leftSidebar: relations.sidebar,
 
         socialEmbed: relations.socialEmbed,
       });