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.

1 files changed, 3 insertions, 2 deletions

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>
     </>
   );