From 8a6f09b564d5d2f02d0a2605f6b52070a910aaa3 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 25 Apr 2022 12:57:12 +0200
Subject: chore: add a PageLayout component

---
 src/components/atoms/layout/sidebar.module.scss | 5 +++++
 src/components/atoms/layout/sidebar.tsx         | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/components/atoms')

diff --git a/src/components/atoms/layout/sidebar.module.scss b/src/components/atoms/layout/sidebar.module.scss
index da2acbe..5d36f18 100644
--- a/src/components/atoms/layout/sidebar.module.scss
+++ b/src/components/atoms/layout/sidebar.module.scss
@@ -5,3 +5,8 @@
     margin-top: fun.convert-px(-2);
   }
 }
+
+.body {
+  position: sticky;
+  top: var(--spacing-xs);
+}
diff --git a/src/components/atoms/layout/sidebar.tsx b/src/components/atoms/layout/sidebar.tsx
index 194ed9f..d13cc0d 100644
--- a/src/components/atoms/layout/sidebar.tsx
+++ b/src/components/atoms/layout/sidebar.tsx
@@ -18,7 +18,11 @@ export type SidebarProps = {
  * Render an aside element.
  */
 const Sidebar: FC<SidebarProps> = ({ children, className = '' }) => {
-  return <aside className={`${styles.wrapper} ${className}`}>{children}</aside>;
+  return (
+    <aside className={`${styles.wrapper} ${className}`}>
+      <div className={styles.body}>{children}</div>
+    </aside>
+  );
 };
 
 export default Sidebar;
-- 
cgit v1.2.3