From 6315efacd6212a347877102a68f430fffa4ca4ac Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 10 Jan 2022 18:17:40 +0100
Subject: refactor(sidebar): use a component to avoid styles repetition

I also fix some overflow/sticky issues.
I have to set overflow auto only when there is no button-like
links otherwise, with translate, the button is cropped on hover.
---
 src/components/PostsList/PostsList.tsx            |  2 +-
 src/components/Sidebar/Sidebar.module.scss        | 36 +++++++++++++++++++++++
 src/components/Sidebar/Sidebar.tsx                | 12 ++++++++
 src/components/ToC/ToC.module.scss                | 24 ++++++++++++---
 src/components/Widget/Sharing/Sharing.module.scss | 11 +++----
 5 files changed, 75 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Sidebar/Sidebar.module.scss
 create mode 100644 src/components/Sidebar/Sidebar.tsx

(limited to 'src/components')

diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx
index 3354dd5..f401d83 100644
--- a/src/components/PostsList/PostsList.tsx
+++ b/src/components/PostsList/PostsList.tsx
@@ -63,7 +63,7 @@ const PostsList = ({
     });
   };
 
-  return <>{showYears ? getPostsListByYear() : getPostsList()}</>;
+  return <div>{showYears ? getPostsListByYear() : getPostsList()}</div>;
 };
 
 export default PostsList;
diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
new file mode 100644
index 0000000..544a733
--- /dev/null
+++ b/src/components/Sidebar/Sidebar.module.scss
@@ -0,0 +1,36 @@
+@use "@styles/abstracts/mixins" as mix;
+
+.wrapper {
+  grid-column: 2;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-column: 3;
+      grid-row: 2;
+      align-self: stretch;
+      display: flex;
+      flex-flow: column nowrap;
+      position: relative;
+      visibility: hidden;
+
+      &:hover {
+        visibility: visible;
+      }
+
+      > * {
+        visibility: visible;
+      }
+    }
+  }
+}
+
+.body {
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      align-self: flex-start;
+      width: 100%;
+      position: sticky;
+      top: 0;
+    }
+  }
+}
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
new file mode 100644
index 0000000..8c9fa1d
--- /dev/null
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,12 @@
+import { FunctionComponent } from 'react';
+import styles from './Sidebar.module.scss';
+
+const Sidebar: FunctionComponent = ({ children }) => {
+  return (
+    <aside className={styles.wrapper}>
+      <div className={styles.body}>{children}</div>
+    </aside>
+  );
+};
+
+export default Sidebar;
diff --git a/src/components/ToC/ToC.module.scss b/src/components/ToC/ToC.module.scss
index 27e79ad..0f08b87 100644
--- a/src/components/ToC/ToC.module.scss
+++ b/src/components/ToC/ToC.module.scss
@@ -1,9 +1,25 @@
+@use "@styles/abstracts/mixins" as mix;
+
 .wrapper {
-  max-height: 100vh;
   padding-bottom: var(--spacing-sm);
-  position: sticky;
-  top: 0;
-  overflow-y: auto;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("lg") {
+      max-height: 100vh;
+      position: sticky;
+      top: 0;
+      overflow: auto;
+      visibility: hidden;
+
+      > * {
+        visibility: visible;
+      }
+
+      &:hover {
+        visibility: visible;
+      }
+    }
+  }
 }
 
 .list {
diff --git a/src/components/Widget/Sharing/Sharing.module.scss b/src/components/Widget/Sharing/Sharing.module.scss
index a1ba094..7ecb5ff 100644
--- a/src/components/Widget/Sharing/Sharing.module.scss
+++ b/src/components/Widget/Sharing/Sharing.module.scss
@@ -3,12 +3,13 @@
 @use "@styles/abstracts/placeholders";
 
 .wrapper {
-  width: min-content;
-  max-height: 100vh;
   padding-bottom: var(--spacing-sm);
-  position: sticky;
-  top: 0;
-  overflow-y: auto;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      width: min-content;
+    }
+  }
 }
 
 .list {
-- 
cgit v1.2.3