UX: option to account for the sidebar in the breakpoint mixin (#17577)

* UX: account for sidebar in breakpoint mixin

* default to false

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

@@ -1,5 +1,5 @@
 :root {
-  --d-sidebar-width: 16em;
+  --d-sidebar-width: #{$d-sidebar-width};
   --d-sidebar-animation-time: 0.25s;
   --d-sidebar-animation-ease: ease-in-out;
 }

app/assets/stylesheets/common/foundation/mixins.scss

@@ -16,10 +16,22 @@ $breakpoints: (
   extra-large: 1140px,
 );
 
-@mixin breakpoint($bp, $rule: max-width, $type: screen) {
+@mixin breakpoint($bp, $rule: max-width, $type: screen, $sidebar: false) {
   @media #{$type} and (#{$rule}: map-get($breakpoints, $bp)) {
     @content;
   }
+
+  // if you want to consider the sidebar in your breakpoint
+  // you can pass in $sidebar: true
+  // note that your breakpoint will need to be at the root level
+  @if $sidebar {
+    // when the sidebar is shown, we want to increase the breakpoints by the width of the sidebar
+    @media #{$type} and (#{$rule}: calc(#{map-get($breakpoints, $bp)} + #{$d-sidebar-width})) {
+      .has-sidebar-page {
+        @content;
+      }
+    }
+  }
 }
 
 // CSS3 properties

app/assets/stylesheets/common/foundation/variables.scss

@@ -14,6 +14,8 @@ $topic-body-width-padding: 11px;
 $topic-avatar-width: 45px;
 $reply-area-max-width: 1475px !default;
 
+$d-sidebar-width: 16em !default;
+
 // Brand color variables
 // --------------------------------------------------
 

app/assets/stylesheets/desktop/topic-list.scss

@@ -196,7 +196,7 @@
 
 /* Tablet (portrait) ----------- */
 
-@include breakpoint(medium) {
+@include breakpoint(medium, $sidebar: true) {
   // slightly smaller font, tighten spacing on nav pills
   .nav-pills {
     > li > a {