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, 47 insertions, 0 deletions

diff --git a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx
new file mode 100644
index 0000000..52b5c06
--- /dev/null
+++ b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx
@@ -0,0 +1,47 @@
+import { t } from '@lingui/macro';
+import { TitleLevel } from '@ts/types/app';
+import { ReactNode, useState } from 'react';
+import styles from './ExpandableWidget.module.scss';
+
+const ExpandableWidget = ({
+  children,
+  title,
+  titleLevel = 2,
+  expand = false,
+  withBorders = false,
+}: {
+  children: ReactNode;
+  title: string;
+  titleLevel?: TitleLevel;
+  expand?: boolean;
+  withBorders?: boolean;
+}) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(expand);
+
+  const handleExpanse = () => setIsExpanded((prev) => !prev);
+
+  const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;
+
+  const wrapperClasses = `${styles.wrapper} ${
+    isExpanded ? styles['wrapper--expanded'] : ''
+  }`;
+
+  const bodyClasses = `${styles.body} ${
+    withBorders ? styles['body--borders'] : ''
+  }`;
+
+  return (
+    <div className={wrapperClasses}>
+      <button type="button" className={styles.header} onClick={handleExpanse}>
+        <span className="screen-reader-text">
+          {isExpanded ? t`Collapse` : t`Expand`}
+        </span>
+        <TitleTag className={styles.title}>{title}</TitleTag>
+        <span className={styles.icon} aria-hidden={true}></span>
+      </button>
+      <div className={bodyClasses}>{children}</div>
+    </div>
+  );
+};
+
+export default ExpandableWidget;