blob: f319f9e898c25be77883842c9d183c9733a5477a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
import { Children, cloneElement, isValidElement, ReactNode } from 'react';
import styles from './Sidebar.module.scss';
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} ${styles[positionClass]}`}>
<div className={styles.body}>
{title && <h2>{title}</h2>}
{childrenWithProps}
</div>
</aside>
);
};
export default Sidebar;
|
