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/ToC/ToC.module.scss | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

(limited to 'src/components/ToC/ToC.module.scss')

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 {
-- 
cgit v1.2.3