chore: update sidebar and widgets styles

I'm now using a widget that can be expanded/collapsed. It also allows
me to handle more effectively widgets overflow and to avoid styles
repetitions.
However, with stylelint rule "no-descending-specificity", I'm not sure
if the stylesheets are really logical... Maybe I should deactivate this
rule.

1 files changed, 72 insertions, 0 deletions

diff --git a/src/components/Widgets/SocialMedia/SocialMedia.tsx b/src/components/Widgets/SocialMedia/SocialMedia.tsx
new file mode 100644
index 0000000..351fd48
--- /dev/null
+++ b/src/components/Widgets/SocialMedia/SocialMedia.tsx
@@ -0,0 +1,72 @@
+import { socialWebsites } from '@config/social-media';
+import GithubIcon from '@assets/images/social-media/github.svg';
+import GitlabIcon from '@assets/images/social-media/gitlab.svg';
+import LinkedInIcon from '@assets/images/social-media/linkedin.svg';
+import TwitterIcon from '@assets/images/social-media/twitter.svg';
+import styles from './SocialMedia.module.scss';
+import { ExpandableWidget } from '@components/WidgetParts';
+
+const SocialMedia = ({
+  title,
+  github = false,
+  gitlab = false,
+  linkedin = false,
+  twitter = false,
+}: {
+  title: string;
+  github?: boolean;
+  gitlab?: boolean;
+  linkedin?: boolean;
+  twitter?: boolean;
+}) => {
+  const getIcon = (id: string) => {
+    switch (id) {
+      case 'github':
+        return <GithubIcon />;
+      case 'gitlab':
+        return <GitlabIcon />;
+      case 'linkedin':
+        return <LinkedInIcon />;
+      case 'twitter':
+        return <TwitterIcon />;
+      default:
+        break;
+    }
+  };
+
+  const shouldDisplayLink = (id: string) => {
+    switch (id) {
+      case 'github':
+        return github;
+      case 'gitlab':
+        return gitlab;
+      case 'linkedin':
+        return linkedin;
+      case 'twitter':
+        return twitter;
+      default:
+        break;
+    }
+  };
+
+  const items = socialWebsites.map((website) => {
+    return shouldDisplayLink(website.id) ? (
+      <li key={website.id}>
+        <a href={website.url} className={styles.link}>
+          {getIcon(website.id)}
+          <span className="screen-reader-text">{website.name}</span>
+        </a>
+      </li>
+    ) : (
+      ''
+    );
+  });
+
+  return (
+    <ExpandableWidget title={title} expand={true}>
+      <ul className={styles.list}>{items}</ul>
+    </ExpandableWidget>
+  );
+};
+
+export default SocialMedia;