UX: sidebar transition and styling adjustments (#17678)

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

@@ -17,12 +17,7 @@
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-    @media (prefers-reduced-motion: no-preference) {
-      .sidebar-animate & {
-        transition: padding-left var(--d-sidebar-animation-time)
-          var(--d-sidebar-animation-ease) !important; // only works with an important... :/
-      }
-    }
+
     .contents {
       display: flex;
       align-items: center;

app/assets/stylesheets/common/base/menu-panel.scss

@@ -572,6 +572,7 @@ div.menu-links-header {
 // Sidebar-hamburger hybrid
 
 .hamburger-menu.revamped {
+  --d-sidebar-highlight-color: var(--highlight-medium);
   width: var(--d-sidebar-width);
 
   .panel-body-content {
@@ -589,19 +590,9 @@ div.menu-links-header {
       color: var(--primary-high);
       background: var(--tertiary-low);
     }
-
-    .sidebar-section-header-link,
-    .sidebar-section-header-button,
-    .sidebar-section-link {
-      &:hover {
-        background: var(--highlight-medium);
-      }
-    }
   }
 
-  .sidebar-footer-actions-button.btn {
-    &:hover {
-      background: var(--highlight-medium);
-    }
+  .sidebar-footer-wrapper {
+    padding: 0.5em 0 0;
   }
 }

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

@@ -1,8 +1,8 @@
 .sidebar-wrapper {
   .sidebar-footer-wrapper {
     .sidebar-footer-container {
-      margin-left: 1.5em;
       margin-right: 0.15em;
+      margin-left: 1em;
     }
   }
 }
@@ -13,21 +13,26 @@
 
   .sidebar-footer-container {
     display: flex;
+    align-items: stretch;
   }
 
   .sidebar-footer-link {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
     font-size: var(--font-down-1);
     color: var(--primary-high);
-    padding: 0.25em 0;
-    height: 100%;
-
-    &:not(:first-child):before {
-      content: "•";
-      padding: 0 0.25em;
+    padding: 0 0.5em;
+    &:hover,
+    &:focus {
+      background: var(--d-sidebar-highlight-color);
     }
   }
 
+  .sidebar-footer-links-separator {
+    color: var(--primary-low-mid);
+  }
+
   .sidebar-footer-actions {
     margin-left: auto;
   }
@@ -41,9 +46,9 @@
       font-size: var(--font-down-1);
       color: var(--primary-medium);
     }
-
+    &:focus,
     &:hover {
-      background: var(--primary-low);
+      background: var(--d-sidebar-highlight-color);
     }
   }
 }

app/assets/stylesheets/common/base/sidebar-section-link.scss

@@ -12,8 +12,9 @@
     font-size: var(--font-down-1);
     transition: background-color 0.25s;
 
+    &:focus,
     &:hover {
-      background: var(--primary-low);
+      background: var(--d-sidebar-highlight-color);
     }
 
     &.active {

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

@@ -11,8 +11,9 @@
     .select-kit {
       .btn {
         background: transparent;
+        &:focus,
         &:hover {
-          background: var(--primary-low);
+          background: var(--d-sidebar-highlight-color);
         }
       }
       .d-icon {
@@ -39,9 +40,9 @@
     &:visited {
       color: var(--primary);
     }
-
+    &:focus,
     &:hover {
-      background: var(--primary-low);
+      background: var(--d-sidebar-highlight-color);
     }
   }
 
@@ -55,8 +56,9 @@
       color: var(--primary-medium);
     }
 
+    &:focus,
     &:hover {
-      background: var(--primary-low);
+      background: var(--d-sidebar-highlight-color);
     }
   }
   .select-kit-collection {

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

@@ -6,6 +6,8 @@
 
 #main-outlet-wrapper {
   .sidebar-wrapper {
+    --d-sidebar-highlight-color: var(--primary-low);
+
     grid-area: sidebar;
     position: sticky;
     top: var(--header-offset);

app/assets/stylesheets/desktop/discourse.scss

@@ -192,9 +192,7 @@ body.has-sidebar-page {
     // increase page max-width to accommodate sidebar width
     max-width: calc(var(--d-sidebar-width) + var(--d-max-width));
   }
-  .d-header .wrap {
-    padding-left: 1.85em;
-  }
+
   #main-outlet-wrapper {
     grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
     gap: 0 2em;