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.

11 files changed, 102 insertions, 52 deletions

diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx
index 3354dd5..f401d83 100644
--- a/src/components/PostsList/PostsList.tsx
+++ b/src/components/PostsList/PostsList.tsx
@@ -63,7 +63,7 @@ const PostsList = ({
     });
   };
 
-  return <>{showYears ? getPostsListByYear() : getPostsList()}</>;
+  return <div>{showYears ? getPostsListByYear() : getPostsList()}</div>;
 };
 
 export default PostsList;
diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
new file mode 100644
index 0000000..544a733
--- /dev/null
+++ b/src/components/Sidebar/Sidebar.module.scss
@@ -0,0 +1,36 @@
+@use "@styles/abstracts/mixins" as mix;
+
+.wrapper {
+  grid-column: 2;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-column: 3;
+      grid-row: 2;
+      align-self: stretch;
+      display: flex;
+      flex-flow: column nowrap;
+      position: relative;
+      visibility: hidden;
+
+      &:hover {
+        visibility: visible;
+      }
+
+      > * {
+        visibility: visible;
+      }
+    }
+  }
+}
+
+.body {
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      align-self: flex-start;
+      width: 100%;
+      position: sticky;
+      top: 0;
+    }
+  }
+}
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
new file mode 100644
index 0000000..8c9fa1d
--- /dev/null
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,12 @@
+import { FunctionComponent } from 'react';
+import styles from './Sidebar.module.scss';
+
+const Sidebar: FunctionComponent = ({ children }) => {
+  return (
+    <aside className={styles.wrapper}>
+      <div className={styles.body}>{children}</div>
+    </aside>
+  );
+};
+
+export default Sidebar;
diff --git a/src/components/ToC/ToC.module.scss b/src/components/ToC/ToC.module.scss
index 27e79ad..0f08b87 100644
--- a/src/components/ToC/ToC.module.scss
+++ b/src/components/ToC/ToC.module.scss
@@ -1,9 +1,25 @@
+@use "@styles/abstracts/mixins" as mix;
+
 .wrapper {
-  max-height: 100vh;
   padding-bottom: var(--spacing-sm);
-  position: sticky;
-  top: 0;
-  overflow-y: auto;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("lg") {
+      max-height: 100vh;
+      position: sticky;
+      top: 0;
+      overflow: auto;
+      visibility: hidden;
+
+      > * {
+        visibility: visible;
+      }
+
+      &:hover {
+        visibility: visible;
+      }
+    }
+  }
 }
 
 .list {
diff --git a/src/components/Widget/Sharing/Sharing.module.scss b/src/components/Widget/Sharing/Sharing.module.scss
index a1ba094..7ecb5ff 100644
--- a/src/components/Widget/Sharing/Sharing.module.scss
+++ b/src/components/Widget/Sharing/Sharing.module.scss
@@ -3,12 +3,13 @@
 @use "@styles/abstracts/placeholders";
 
 .wrapper {
-  width: min-content;
-  max-height: 100vh;
   padding-bottom: var(--spacing-sm);
-  position: sticky;
-  top: 0;
-  overflow-y: auto;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      width: min-content;
+    }
+  }
 }
 
 .list {
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 7d25843..fb79b41 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -18,6 +18,7 @@ import { ParsedUrlQuery } from 'querystring';
 import { useEffect } from 'react';
 import styles from '@styles/pages/Page.module.scss';
 import { Sharing } from '@components/Widget';
+import Sidebar from '@components/Sidebar/Sidebar';
 
 const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
   const {
@@ -67,9 +68,9 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
           dangerouslySetInnerHTML={{ __html: content }}
         ></div>
         <PostFooter subjects={subjects} />
-        <aside className={styles.aside}>
+        <Sidebar>
           <Sharing title={title} excerpt={intro} />
-        </aside>
+        </Sidebar>
         <section className={styles.comments}>
           <CommentsList comments={comments} />
           <CommentForm articleId={post.databaseId} />
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index db4b7a8..1bd6c62 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -14,6 +14,7 @@ import { getPublishedPosts } from '@services/graphql/queries';
 import PostHeader from '@components/PostHeader/PostHeader';
 import styles from '@styles/pages/Listing.module.scss';
 import { ThematicsList, TopicsList } from '@components/Widget';
+import Sidebar from '@components/Sidebar/Sidebar';
 
 const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
   const getKey = (pageIndex: number, previousData: PostsListData) => {
@@ -59,10 +60,10 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
             position="center"
           >{t`Load more?`}</Button>
         )}
-        <aside className={styles.aside}>
+        <Sidebar>
           <ThematicsList />
           <TopicsList />
-        </aside>
+        </Sidebar>
       </article>
     </>
   );
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index d9c4e4f..5e6d138 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -12,6 +12,7 @@ import { FormEvent, useState } from 'react';
 import PostHeader from '@components/PostHeader/PostHeader';
 import styles from '@styles/pages/Page.module.scss';
 import { SocialMedia } from '@components/Widget';
+import Sidebar from '@components/Sidebar/Sidebar';
 
 const ContactPage: NextPageWithLayout = () => {
   const [name, setName] = useState('');
@@ -112,14 +113,14 @@ const ContactPage: NextPageWithLayout = () => {
             </FormItem>
           </Form>
         </div>
-        <aside className={styles.aside}>
+        <Sidebar>
           <SocialMedia
             title={t`Find me elsewhere`}
             github={true}
             gitlab={true}
             linkedin={true}
           />
-        </aside>
+        </Sidebar>
       </article>
     </>
   );
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 025d554..c771bb2 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -11,6 +11,7 @@ import { ArticleMeta } from '@ts/types/articles';
 import styles from '@styles/pages/Page.module.scss';
 import { CVPreview, SocialMedia } from '@components/Widget';
 import { t } from '@lingui/macro';
+import Sidebar from '@components/Sidebar/Sidebar';
 
 const CV: NextPageWithLayout = () => {
   const dates = {
@@ -38,14 +39,14 @@ const CV: NextPageWithLayout = () => {
         <div className={styles.body}>
           <CVContent />
         </div>
-        <aside className={styles.aside}>
+        <Sidebar>
           <CVPreview title={t`Other formats`} imgSrc={image} pdf={pdf} />
           <SocialMedia
             title={t`Open-source projects`}
             github={true}
             gitlab={true}
           />
-        </aside>
+        </Sidebar>
       </article>
     </>
   );
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";