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, 26 insertions, 4 deletions

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 8c9fa1d..f319f9e 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,10 +1,32 @@
-import { FunctionComponent } from 'react';
+import { Children, cloneElement, isValidElement, ReactNode } from 'react';
 import styles from './Sidebar.module.scss';
 
-const Sidebar: FunctionComponent = ({ children }) => {
+type SidebarPosition = 'left' | 'right';
+
+const Sidebar = ({
+  children,
+  position,
+  title,
+}: {
+  children: ReactNode;
+  position: SidebarPosition;
+  title?: string;
+}) => {
+  const childrenWithProps = Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      return cloneElement(child, { titleLevel: title ? 3 : 2 });
+    }
+    return child;
+  });
+
+  const positionClass = `wrapper--${position}`;
+
   return (
-    <aside className={styles.wrapper}>
-      <div className={styles.body}>{children}</div>
+    <aside className={`${styles.wrapper} ${styles[positionClass]}`}>
+      <div className={styles.body}>
+        {title && <h2>{title}</h2>}
+        {childrenWithProps}
+      </div>
     </aside>
   );
 };