chore: improve widgets

* Make all widgets expanded by default. This way, without Javascript,
thematics and topics are still available.
* Improve collapse/expand transition.
* Remove widget scrollbar: the height was sometimes weird because of
that. Except for ToC on large devices.

8 files changed, 76 insertions, 103 deletions

diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
index 18291b6..f79cacf 100644
--- a/src/components/Sidebar/Sidebar.module.scss
+++ b/src/components/Sidebar/Sidebar.module.scss
@@ -31,13 +31,11 @@
   display: flex;
   flex-flow: column;
   justify-content: flex-start;
-  max-height: 100vh;
 
   @include mix.media("screen") {
     @include mix.dimensions("md") {
       align-self: flex-start;
       width: 100%;
-      max-height: calc(100vh - (var(--spacing-xs) * 2));
       position: sticky;
       top: var(--spacing-xs);
     }
diff --git a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss
index 058d805..2d6199b 100644
--- a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss
+++ b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss
@@ -47,12 +47,12 @@
 
 .body {
   width: 100%;
-  margin: 0;
-  overflow-y: auto;
+  max-height: 0;
+  margin: 0 0 fun.convert-px(-6); // collapse borders
+  overflow-y: hidden;
   visibility: hidden;
-  opacity: 0;
-  height: 0;
-  transition: all 0.5s ease-in-out 0s;
+  transition: max-height 0.5s linear 0s, margin 0.3s ease-in-out 0.3s,
+    visibility 0.1s linear 0.6s;
 
   &--borders {
     border: fun.convert-px(2) solid var(--color-primary-dark);
@@ -70,6 +70,42 @@
   }
 }
 
+.wrapper {
+  --header-height: #{fun.convert-px(65)};
+
+  display: flex;
+  flex-flow: column;
+  height: max-content;
+  max-height: 100%;
+
+  &--expanded {
+    .icon::before {
+      height: 0;
+    }
+
+    .body {
+      max-height: 100%;
+      margin: var(--spacing-sm) 0;
+      overflow-y: visible;
+      visibility: visible;
+      transition: visibility 0.1s linear 0s, max-height 0.6s ease-in 0s,
+        margin 0.2s ease-in-out 0s;
+    }
+  }
+}
+
+.wrapper--expanded.wrapper--toc {
+  @include mix.media("screen") {
+    @include mix.dimensions("lg") {
+      max-height: 100vh;
+
+      .body {
+        overflow-y: auto;
+      }
+    }
+  }
+}
+
 .header {
   flex: 0 0 auto;
   display: flex;
@@ -81,66 +117,29 @@
   min-height: var(--header-height);
   position: sticky;
   top: 0;
+  z-index: 3;
   background: var(--color-bg);
   border: none;
+  border-top: fun.convert-px(2) solid var(--color-primary-dark);
   border-bottom: fun.convert-px(2) solid var(--color-primary-dark);
   cursor: pointer;
   transition: background 0.2s ease-in-out 0s;
 
-  > button {
-    padding: 0 var(--spacing-xs);
-  }
-}
-
-.wrapper--expanded .icon {
-  &::before {
-    height: 0;
-  }
-}
-
-.header:hover,
-.header:focus {
-  .icon {
-    background: var(--color-primary-light);
-    color: var(--color-fg-inverted);
-    transform: scale(1.2);
-
-    &::before,
-    &::after {
-      background: var(--color-bg);
-    }
-  }
-}
-
-.wrapper {
-  --header-height: #{fun.convert-px(65)};
-
-  display: flex;
-  flex-flow: column;
-  min-height: var(--header-height);
-  position: relative;
-  overflow-y: hidden;
-
-  &:first-of-type {
-    .header {
-      border-top: fun.convert-px(2) solid var(--color-primary-dark);
-    }
-  }
-}
-
-.wrapper--expanded {
-  ~ .wrapper {
-    .header {
-      border-top: fun.convert-px(2) solid var(--color-primary-dark);
+  &:hover,
+  &:focus {
+    .icon {
+      background: var(--color-primary-light);
+      color: var(--color-fg-inverted);
+      transform: scale(1.2);
+
+      &::before,
+      &::after {
+        background: var(--color-bg);
+      }
     }
   }
 
-  .body {
-    visibility: visible;
-    opacity: 1;
-    min-height: inherit;
-    height: 100%;
-    margin: var(--spacing-sm) 0;
-    transition: all 0.45s ease-in-out 0s;
+  > button {
+    padding: 0 var(--spacing-xs);
   }
 }
diff --git a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx
index 6a19d92..1040e7e 100644
--- a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx
+++ b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx
@@ -9,12 +9,14 @@ const ExpandableWidget = ({
   titleLevel = 2,
   expand = false,
   withBorders = false,
+  kind = 'regular',
 }: {
   children: ReactNode;
   title: string;
   titleLevel?: TitleLevel;
   expand?: boolean;
   withBorders?: boolean;
+  kind?: 'regular' | 'toc';
 }) => {
   const intl = useIntl();
   const [isExpanded, setIsExpanded] = useState<boolean>(expand);
@@ -23,9 +25,10 @@ const ExpandableWidget = ({
 
   const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;
 
+  const wrapperKindClass = styles[`wrapper--${kind}`];
   const wrapperClasses = `${styles.wrapper} ${
     isExpanded ? styles['wrapper--expanded'] : ''
-  }`;
+  } ${wrapperKindClass}`;
 
   const bodyClasses = `${styles.body} ${
     withBorders ? styles['body--borders'] : ''
diff --git a/src/components/WidgetParts/List/List.module.scss b/src/components/WidgetParts/List/List.module.scss
index 5da5741..958f792 100644
--- a/src/components/WidgetParts/List/List.module.scss
+++ b/src/components/WidgetParts/List/List.module.scss
@@ -25,11 +25,13 @@
     padding: var(--spacing-2xs) var(--spacing-xs);
     background: none;
     text-decoration: underline solid transparent 0;
-    transition: all 0.16s ease-in-out 0s, text-decoration-color 0s;
+    transition: all 0.2s ease-in-out 0s, font-weight 0s,
+      text-decoration-color 0s;
 
     &:hover,
     &:focus {
       background: var(--color-bg-secondary);
+      font-weight: 600;
     }
 
     &:focus {
diff --git a/src/components/Widgets/ThematicsList/ThematicsList.tsx b/src/components/Widgets/ThematicsList/ThematicsList.tsx
index 9b1f03a..e59050d 100644
--- a/src/components/Widgets/ThematicsList/ThematicsList.tsx
+++ b/src/components/Widgets/ThematicsList/ThematicsList.tsx
@@ -56,7 +56,12 @@ const ThematicsList = ({
   };
 
   return (
-    <ExpandableWidget title={title} titleLevel={titleLevel} withBorders={true}>
+    <ExpandableWidget
+      title={title}
+      titleLevel={titleLevel}
+      withBorders={true}
+      expand={true}
+    >
       {getList()}
     </ExpandableWidget>
   );
diff --git a/src/components/Widgets/ToC/ToC.module.scss b/src/components/Widgets/ToC/ToC.module.scss
deleted file mode 100644
index c2e7f97..0000000
--- a/src/components/Widgets/ToC/ToC.module.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.item {
-  width: 100%;
-  margin: 0;
-
-  &::before {
-    display: none;
-  }
-}
-
-.link {
-  display: flex;
-  flex-flow: row nowrap;
-  width: 100%;
-  padding: var(--spacing-2xs) var(--spacing-sm);
-  background: none;
-  border-bottom: fun.convert-px(1) solid var(--color-border-light);
-  text-decoration: underline solid transparent 0;
-  transition: all 0.16s ease-in-out 0s, text-decoration-color 0s;
-
-  &:hover,
-  &:focus {
-    background: var(--color-bg-secondary);
-  }
-
-  &:focus {
-    color: var(--color-primary);
-    text-decoration-color: var(--color-primary-light);
-    text-decoration-thickness: 0.25ex;
-  }
-
-  &:active {
-    background: var(--color-bg-tertiary);
-    text-decoration-color: transparent;
-    text-decoration-thickness: 0;
-  }
-}
diff --git a/src/components/Widgets/ToC/ToC.tsx b/src/components/Widgets/ToC/ToC.tsx
index c499478..8a2d493 100644
--- a/src/components/Widgets/ToC/ToC.tsx
+++ b/src/components/Widgets/ToC/ToC.tsx
@@ -25,7 +25,7 @@ const ToC = () => {
   };
 
   return (
-    <ExpandableWidget title={title} expand={true} withBorders={true}>
+    <ExpandableWidget title={title} kind="toc" expand={true} withBorders={true}>
       <OrderedList items={getItems(headingsTree)} />
     </ExpandableWidget>
   );
diff --git a/src/components/Widgets/TopicsList/TopicsList.tsx b/src/components/Widgets/TopicsList/TopicsList.tsx
index 80341c3..109b212 100644
--- a/src/components/Widgets/TopicsList/TopicsList.tsx
+++ b/src/components/Widgets/TopicsList/TopicsList.tsx
@@ -56,7 +56,12 @@ const TopicsList = ({
   };
 
   return (
-    <ExpandableWidget title={title} titleLevel={titleLevel} withBorders={true}>
+    <ExpandableWidget
+      title={title}
+      titleLevel={titleLevel}
+      withBorders={true}
+      expand={true}
+    >
       {getList()}
     </ExpandableWidget>
   );