UX: sidebar styling, spacing consistency, etc (#18059)

app/assets/javascripts/discourse/app/components/sidebar.hbs

@@ -6,6 +6,4 @@
       <Sidebar::Anonymous::Sections />
     {{/if}}
   </div>
-
-  <Sidebar::Footer />
 </DSection>

app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs

@@ -4,7 +4,6 @@
       <div class="panel-body-contents">
         <div class="sidebar-hamburger-dropdown">
           <Sidebar::User::Sections @collapsableSections={{false}}/>
-          <Sidebar::Footer @tagName="" />
         </div>
       </div>
     </div>

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

@@ -1,15 +1,14 @@
 <div class={{concat "sidebar-section-wrapper sidebar-section-" @sectionName}}>
   <div class="sidebar-section-header-wrapper sidebar-row">
     <Sidebar::SectionHeader @collapsable={{@collapsable}} @toggleSectionDisplay={{this.toggleSectionDisplay}}>
+      <span class="sidebar-section-header-caret">
+        {{#if @collapsable}}
+          {{d-icon this.headerCaretIcon}}
+        {{/if}}
+      </span>
       <span class="sidebar-section-header-text">
         {{@headerLinkText}}
       </span>
-
-      {{#if @collapsable}}
-        <span class="sidebar-section-header-caret">
-          {{d-icon this.headerCaretIcon}}
-        </span>
-      {{/if}}
     </Sidebar::SectionHeader>
 
     {{#if this.isSingleHeaderAction}}

app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs

@@ -45,4 +45,5 @@
       {{/each}}
     </Sidebar::Section>
   {{/each}}
+  <Sidebar::Footer />
 </div>

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

@@ -1,19 +1,35 @@
-.sidebar-wrapper {
-  .sidebar-footer-wrapper {
-    .sidebar-footer-container {
-      margin-right: 0.15em;
-      margin-left: 1em;
-    }
-  }
-}
-
 .sidebar-footer-wrapper {
-  border-top: 1.5px solid var(--primary-low);
+  box-sizing: border-box;
-  padding: 0.5em 0 0.5em 0.33em;
+  width: 100%;
+  margin-top: auto;
+  padding-top: 1em;
+  position: sticky;
+  bottom: 0;
 
   .sidebar-footer-container {
     display: flex;
     align-items: stretch;
+    position: relative;
+    border-top: 1.5px solid var(--primary-low);
+    background: var(--primary-very-low);
+    padding: 0.5em 0.8em;
+    &:before {
+      // fade to make scroll more apparent
+      position: absolute;
+      content: "";
+      display: block;
+      height: 1.5em;
+      top: calc(-1.5em - 1px);
+      left: -0.5em;
+      right: -0.5em;
+      width: calc(100% + 0.5em);
+      pointer-events: none;
+      background: linear-gradient(
+        to bottom,
+        transparent,
+        rgba(var(--primary-very-low-rgb), 1)
+      );
+    }
   }
 
   .sidebar-footer-link {
@@ -52,46 +68,3 @@
     }
   }
 }
-
-.sidebar-footer-wrapper {
-  background: var(--primary-very-low);
-  .desktop-view & {
-    position: sticky;
-    bottom: 0;
-    .sidebar-footer-container {
-      position: relative;
-      &:before {
-        // fade to make scroll more apparent
-        position: absolute;
-        content: "";
-        display: block;
-        height: 1.5em;
-        top: calc(-2em - 1px);
-        left: -0.5em;
-        right: -0.5em;
-        pointer-events: none;
-        background: linear-gradient(
-          to bottom,
-          transparent,
-          rgba(var(--primary-very-low-rgb), 1)
-        );
-      }
-    }
-  }
-}
-
-.hamburger-panel .revamped {
-  .sidebar-footer-wrapper {
-    background: var(--secondary);
-    .sidebar-footer-container {
-      &:before {
-        // fade to make scroll more apparent
-        background: linear-gradient(
-          to bottom,
-          transparent,
-          rgba(var(--secondary-rgb), 1)
-        );
-      }
-    }
-  }
-}

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

@@ -1,5 +1,5 @@
 .sidebar-more-section-links-details {
-  &:focus,
+  &:focus-within,
   &:hover {
     background: var(--d-sidebar-highlight-color);
   }
@@ -32,7 +32,6 @@
   .sidebar-more-section-link-details-content {
     background-color: var(--secondary);
     box-shadow: shadow("dropdown");
-    border-radius: 5px;
     margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
 
     .sidebar-row {

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

@@ -1,6 +1,7 @@
 .sidebar-section-link-wrapper {
   display: flex;
   align-items: center;
+  position: relative;
 
   .sidebar-section-link {
     box-sizing: border-box;
@@ -13,6 +14,7 @@
     &:focus,
     &:hover {
       background: var(--d-sidebar-highlight-color);
+      outline: none;
     }
 
     &.active {
@@ -73,12 +75,17 @@
     flex-shrink: 0;
 
     &.image {
+      position: absolute;
       img {
         border-radius: 50%;
         width: 20px;
         aspect-ratio: auto 20 / 20;
         height: 20px;
-        margin-right: 0.75em;
+        margin-right: 0.5em;
+      }
+
+      + .sidebar-section-link-content-text {
+        margin-left: calc(20px + 0.5em);
       }
     }
 
@@ -122,9 +129,17 @@
       color: var(--primary-medium);
       border: none;
       background: transparent;
-      padding: 0.35em 0.5em;
+      padding: 0 0 0 0.5em;
+      height: 100%;
       transition: background-color 0.25s;
 
+      &:focus,
+      .discourse-no-touch & {
+        &:hover {
+          color: var(--primary);
+        }
+      }
+
       svg {
         font-size: var(--font-down-1);
       }

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

@@ -1,10 +1,18 @@
 .sidebar-section-wrapper {
-  margin-bottom: 1em;
+  margin-bottom: 0.5em;
 
   .sidebar-section-header-wrapper {
     display: flex;
     align-items: stretch;
     box-sizing: border-box;
+    padding: 0;
+
+    .discourse-no-touch & {
+      &:hover,
+      &:focus-within {
+        background: var(--d-sidebar-highlight-color);
+      }
+    }
 
     .select-kit {
       .btn {
@@ -21,23 +29,35 @@
       }
 
       summary {
-        padding: 0.25em 0.5em;
+        height: 100%;
+        padding: 0 var(--d-sidebar-row-horizontal-padding) 0
+          calc(var(--d-sidebar-row-horizontal-padding) / 2);
+        &:focus,
+        &:hover {
+          border-color: transparent;
+          .d-icon {
+            color: var(--primary);
+          }
+        }
       }
     }
   }
 
   .sidebar-section-header {
-    @include ellipsis;
     flex: 1 1 auto;
     text-transform: uppercase;
     font-weight: bold;
     font-size: var(--font-1);
     color: var(--primary);
     align-items: center;
+    padding: calc(var(--d-sidebar-row-horizontal-padding) / 2)
+      calc(var(--d-sidebar-row-horizontal-padding) / 2)
+      calc(var(--d-sidebar-row-horizontal-padding) / 2)
+      var(--d-sidebar-row-horizontal-padding);
+    min-width: 0;
 
     &.sidebar-section-header-collapsable {
       justify-content: flex-start;
-      padding: 0;
 
       &:focus {
         background: transparent;
@@ -48,27 +68,39 @@
   .sidebar-section-header-text {
     font-weight: bold;
     margin-right: 0.25em;
+    @include ellipsis;
   }
 
   .sidebar-section-header-caret {
+    display: block;
+    width: 1.5em;
+    margin-left: -1.5em;
     font-size: var(--font-down-2);
+    flex: 0 0 auto;
   }
 
   .sidebar-section-header-button {
     background: none;
     border: none;
-    padding: 0.25em 0.5em;
+    padding: 0 var(--d-sidebar-row-horizontal-padding) 0
+      calc(var(--d-sidebar-row-horizontal-padding) / 2);
 
     .d-icon {
       font-size: var(--font-down-1);
       color: var(--primary-medium);
     }
 
-    &:focus,
+    .discourse-no-touch & {
-    &:hover {
+      &:hover,
-      background: var(--d-sidebar-highlight-color);
+      &:focus {
+        outline: none;
+        .d-icon {
+          color: var(--primary);
         }
       }
+    }
+  }
+
   .select-kit-collection {
     .texts {
       font-size: var(--font-0);

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

@@ -6,22 +6,22 @@
 
 .sidebar-wrapper {
   --d-sidebar-highlight-color: var(--primary-low);
-  --d-sidebar-row-horizontal-padding: 1.5rem;
+  // 1.25rem gets text left-aligned with the hamburger icon
+  --d-sidebar-row-horizontal-padding: 1.25rem;
 
   grid-area: sidebar;
   position: sticky;
   top: var(--header-offset);
+
   .footer-nav-ipad & {
     top: calc(var(--header-offset) + var(--footer-nav-height));
   }
   height: calc(100vh - var(--header-offset));
   align-self: start;
   overflow-y: auto;
-  background-color: var(--primary-very-low);
 
   .sidebar-row {
-    padding: 0.25rem var(--d-sidebar-row-horizontal-padding);
+    padding: 0.33rem var(--d-sidebar-row-horizontal-padding);
-    height: 27px;
     align-items: center;
     font-size: var(--font-down-1);
   }
@@ -31,8 +31,7 @@
     flex-direction: column;
     box-sizing: border-box;
     height: 100%;
-    width: var(--d-sidebar-width);
+    padding: 0;
-    padding: 1em 0 0;
     overflow-x: hidden;
   }
 
@@ -47,7 +46,7 @@
     // custom scrollbar styling
     --scrollbarBg: transparent;
     --scrollbarThumbBg: var(--primary-low);
-    --scrollbarWidth: 1.2em;
+    --scrollbarWidth: 1em;
 
     scrollbar-color: transparent var(--scrollbarBg);
     transition: scrollbar-color 0.25s ease-in-out;
@@ -56,7 +55,11 @@
     &::-webkit-scrollbar-thumb {
       background-color: transparent;
       border-radius: calc(var(--scrollbarWidth) / 2);
-      border: calc(var(--scrollbarWidth) / 4) solid transparent;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
     }
 
     &:hover {
@@ -64,24 +67,62 @@
 
       &::-webkit-scrollbar-thumb {
         background-color: var(--scrollbarThumbBg);
-        border-color: var(--primary-very-low);
       }
 
       transition-delay: 0s;
     }
 
     &::-webkit-scrollbar {
-      width: var(--scrollbarWidth);
+      // 0.5em gives webkit browsers a little space between the scrollbar and the content
+      width: calc(var(--scrollbarWidth) - 0.45em);
     }
 
-    .composer-open & {
     // allows sidebar to scroll to the bottom when the composer is open
     margin-bottom: var(--composer-height);
     padding-bottom: var(--composer-ipad-padding);
   }
-  }
 
   .sidebar-sections {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
     flex: 1;
+    padding: 1em 0 0;
+    max-width: calc(var(--d-sidebar-width) - var(--scrollbarWidth));
+    background-color: var(--primary-very-low);
+  }
+}
+
+.sidebar-hamburger-dropdown {
+  // note that these apply to mobile and desktop dropdowns
+  .sidebar-section-wrapper {
+    .sidebar-section-header-wrapper.sidebar-row {
+      padding-right: 0;
+    }
+
+    .sidebar-section-header {
+      padding: 0;
+    }
+  }
+
+  .discourse-no-touch & {
+    .sidebar-section-wrapper .sidebar-section-header-wrapper:hover,
+    .sidebar-section-wrapper .sidebar-section-header-wrapper:focus-within {
+      background: transparent;
+    }
+  }
+
+  .sidebar-footer-wrapper {
+    margin-top: 1em;
+    .sidebar-footer-container {
+      background: var(--secondary);
+      &:before {
+        background: linear-gradient(
+          to bottom,
+          transparent,
+          rgba(var(--secondary-rgb), 1)
+        );
+      }
+    }
   }
 }

app/assets/stylesheets/desktop/discourse.scss

@@ -195,7 +195,7 @@ body.has-sidebar-page {
 
   #main-outlet-wrapper {
     grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
-    gap: 0 2em;
+    gap: 0 0.5em;
     padding-left: 0;
   }
 }

app/assets/stylesheets/desktop/menu-panel.scss

@@ -37,9 +37,25 @@
       color: var(--primary-high);
       background: var(--tertiary-low);
     }
+
+    .sidebar-section-header-wrapper .select-kit .btn:hover {
+      background: transparent;
+    }
+  }
+
+  .sidebar-section-link-wrapper
+    .sidebar-section-link-hover:hover
+    .sidebar-section-hover-button {
+    background: transparent;
   }
 
   .sidebar-footer-wrapper {
-    padding: 0.5em 0 0;
+    padding: 0;
+    .sidebar-footer-container {
+      padding: 0;
+      &:before {
+        top: calc(-100% + 2px);
+      }
+    }
   }
 }

app/assets/stylesheets/desktop/sidebar-section.scss

@@ -1,12 +1,12 @@
 #main-outlet-wrapper {
-  .sidebar-wrapper {
+  .sidebar-section-wrapper {
     .sidebar-section-header-button,
     .sidebar-section-header-caret,
     .sidebar-section-header-dropdown {
       .discourse-no-touch & {
         opacity: 0;
         transition: opacity 0.25s;
-        transition-delay: 0.5s;
+        transition-delay: 0.25s;
       }
     }
 

app/assets/stylesheets/mobile/menu-panel.scss

@@ -78,4 +78,8 @@
     align-items: center;
     font-size: var(--font-down-1);
   }
+
+  .sidebar-section-wrapper .sidebar-section-header {
+    padding: 0;
+  }
 }

app/assets/stylesheets/mobile/sidebar.scss

@@ -12,10 +12,13 @@
   }
 }
 
-.sidebar-wrapper .sidebar-footer-wrapper .sidebar-footer-container {
+.sidebar-footer-wrapper {
-  margin-top: 0.5em;
+  position: static;
-  margin-right: 0;
+  margin-top: 1em;
-  padding-left: 0.25em;
+  .sidebar-footer-container {
+    background: transparent;
+    padding: 0.5em 0.1em;
+  }
 }
 
 .sidebar-more-section-links-details