UX: Fix exp sidebar toggle alignment, add hovers (#17414)

app/assets/javascripts/discourse/app/components/sidebar/section.js

@@ -28,6 +28,6 @@ export default class SidebarSection extends GlimmerComponent {
   }
 
   get headerCaretIcon() {
-    return this.displaySection ? "angle-down" : "angle-up";
+    return this.displaySection ? "angle-down" : "angle-right";
   }
 }

app/assets/stylesheets/common/base/sidebar.scss

@@ -9,24 +9,25 @@
   margin-right: 0.75em;
   // extending the toggle beyond the page when space allows
   // for better logo alignment with content
+  @media screen and (min-width: 1380px) {
     margin-left: -3.5em;
-  @media screen and (max-width: 1480px) {
-    margin-left: -0.75em;
   }
 
-  @media screen and (max-width: 1380px) {
-    body.has-sidebar-page & {
-      margin-left: 0;
+  // align on icon, because button is transparent
+  @media screen and (max-width: 1480px) {
+    margin-left: calc(var(--toggle-padding) * -1.3);
+  }
+
+  // prevents toggle overflow on smaller screens
+  @media screen and (max-width: 1379px) {
+    :not(.mobile-view) .has-sidebar-page & {
+      margin-left: initial;
     }
   }
 
   transition: margin var(--d-sidebar-animation-speed)
     var(--d-sidebar-animation-ease);
 
-  .mobile-view & {
-    margin-left: calc(var(--toggle-padding) * -1);
-  }
-
   button {
     position: relative;
     font-size: var(--font-up-2);
@@ -52,12 +53,19 @@
     align-self: start;
     overflow-y: auto;
     background-color: var(--primary-very-low);
+    .discourse-touch &,
+    &:hover {
+      .sidebar-section-header-caret {
+        opacity: 1;
+        transition-delay: 0s;
+      }
+    }
   }
 
   .sidebar-container {
     box-sizing: border-box;
     height: 100%;
-    width: 240px;
+    width: var(--d-sidebar-width);
     padding: 1em 0;
     overflow-x: hidden;
     overflow-y: auto;
@@ -65,10 +73,12 @@
     // custom scrollbar styling
     --scrollbarBg: transparent;
     --scrollbarThumbBg: var(--primary-low);
-    --scrollbarWidth: 1em;
+    --scrollbarWidth: 1.2em;
 
     scrollbar-color: transparent var(--scrollbarBg);
-    transition: scrollbar-color 0.2s ease-in-out;
+    transition: scrollbar-color 0.25s ease-in-out;
+    transition-delay: 0.5s;
+
     &::-webkit-scrollbar-thumb {
       background-color: transparent;
       border-radius: calc(var(--scrollbarWidth) / 2);
@@ -79,6 +89,7 @@
       &::-webkit-scrollbar-thumb {
         background-color: var(--scrollbarThumbBg);
       }
+      transition-delay: 0s;
     }
     &::-webkit-scrollbar {
       width: var(--scrollbarWidth);
@@ -148,6 +159,7 @@
     padding: 0.35em 0.5em;
     color: var(--primary-high);
     font-size: var(--font-down-1);
+    transition: background-color 0.25s;
 
     &:hover {
       background: var(--primary-low);
@@ -201,11 +213,22 @@
     align-items: center;
     border: none;
     background: transparent;
-    padding: 0.25em 0;
+    padding: 0;
+    opacity: 0;
+    transition: opacity 0.25s;
+    transition-delay: 0.5s;
+    .discourse-no-touch & {
+      &:hover {
+        svg {
+          color: var(--primary-high);
+        }
+      }
+    }
 
     svg {
       display: block;
       flex: 0 0 auto;
+      transition: color 0.25s;
     }
 
     .d-icon {