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.

2 files changed, 45 insertions, 16 deletions

diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
index 83c1024..18291b6 100644
--- a/src/components/Sidebar/Sidebar.module.scss
+++ b/src/components/Sidebar/Sidebar.module.scss
@@ -2,37 +2,44 @@
 
 .wrapper {
   grid-column: 2;
-  margin-top: var(--spacing-lg);
+  margin: var(--spacing-md) 0;
 
   @include mix.media("screen") {
     @include mix.dimensions("md") {
-      grid-column: 3;
-      grid-row: 2;
       align-self: stretch;
       display: flex;
-      flex-flow: column nowrap;
-      margin-top: 0;
-      position: relative;
-      visibility: hidden;
+      flex-flow: column;
+      justify-content: flex-start;
+      margin: var(--spacing-xs);
 
-      &:hover {
-        visibility: visible;
+      &--right {
+        grid-row: 2 / 4;
+        grid-column: 3;
       }
+    }
 
-      > * {
-        visibility: visible;
+    @include mix.dimensions("lg") {
+      &--left {
+        grid-row: 2 / 4;
+        grid-column: 1;
       }
     }
   }
 }
 
 .body {
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  max-height: 100vh;
+
   @include mix.media("screen") {
     @include mix.dimensions("md") {
       align-self: flex-start;
       width: 100%;
+      max-height: calc(100vh - (var(--spacing-xs) * 2));
       position: sticky;
-      top: 0;
+      top: var(--spacing-xs);
     }
   }
 }
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>
   );
 };