From 6315efacd6212a347877102a68f430fffa4ca4ac Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 10 Jan 2022 18:17:40 +0100
Subject: 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.
---
 src/pages/article/[slug].tsx | 5 +++--
 src/pages/blog/index.tsx     | 5 +++--
 src/pages/contact.tsx        | 5 +++--
 src/pages/cv.tsx             | 5 +++--
 4 files changed, 12 insertions(+), 8 deletions(-)

(limited to 'src/pages')

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>
     </>
   );
-- 
cgit v1.2.3