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.

1 files changed, 36 insertions, 0 deletions

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;
+    }
+  }
+}