refactor(sidebar): use a component to avoid styles repetition

I also fix some overflow/sticky issues.
I have to set overflow auto only when there is no button-like
links otherwise, with translate, the button is cropped on hover.

2 files changed, 15 insertions, 34 deletions

diff --git a/src/styles/pages/Listing.module.scss b/src/styles/pages/Listing.module.scss
index fdad3f5..db826d7 100644
--- a/src/styles/pages/Listing.module.scss
+++ b/src/styles/pages/Listing.module.scss
@@ -10,23 +10,37 @@
     grid-column: 1 / -1;
   }
 
-  > section {
+  > div {
     grid-column: 1 / 3;
   }
 
   > button {
     grid-column: 2;
   }
+
+  > aside > div {
+    max-height: 100vh;
+    overflow: auto;
+  }
 }
 
 .body {
+  --column-3: 0;
+  --grid-gap: 0;
+
   grid-column: 2;
+  composes: grid from "@styles/layout/_grid.scss";
+  align-items: first baseline;
 
   @include mix.media("screen") {
     @include mix.dimensions("md") {
       grid-row: 2;
     }
   }
+
+  > * {
+    grid-column: 2;
+  }
 }
 
 .list {
@@ -36,19 +50,3 @@
 li.item {
   margin: 0 0 var(--spacing-md) 0;
 }
-
-.aside {
-  grid-column: 2;
-  margin-top: var(--spacing-lg);
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      grid-column: 3;
-      grid-row: 2;
-      max-height: 100vh;
-      position: sticky;
-      top: 0;
-      overflow-y: auto;
-    }
-  }
-}
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
index 41172a3..fb19906 100644
--- a/src/styles/pages/Page.module.scss
+++ b/src/styles/pages/Page.module.scss
@@ -37,23 +37,6 @@
   }
 }
 
-.aside {
-  grid-column: 2;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      grid-column: 3;
-      grid-row: 2 / 5;
-      align-self: stretch;
-      padding: 0 var(--spacing-sm);
-    }
-
-    @include mix.dimensions("lg") {
-      grid-row: 2 / 4;
-    }
-  }
-}
-
 .comments {
   grid-column: 1 / -1;
   composes: grid from "@styles/layout/_grid.scss";