From aa1ca65e7c9807c6d6020e39166536297fe1cdae Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 15 Jan 2022 22:45:57 +0100
Subject: 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.
---
 src/components/Sidebar/Sidebar.tsx | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

(limited to 'src/components/Sidebar/Sidebar.tsx')

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>
   );
 };
-- 
cgit v1.2.3