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