From a24bcceb19cb7272f1725d3fe5e2dd6be2bc0128 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 19 Jul 2022 22:56:41 -0400
Subject: [PATCH] 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    |  2 +-
 .../stylesheets/common/foundation/mixins.scss      | 14 +++++++++++++-
 .../stylesheets/common/foundation/variables.scss   |  2 ++
 app/assets/stylesheets/desktop/topic-list.scss     |  2 +-
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index 94539fb71d9..f8b688ffce4 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/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;
 }
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 9e203d02153..ece3dbf6e23 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/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
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 47d7795d8b8..1600c031c1b 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/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
 // --------------------------------------------------
 
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 915dcbca7b5..19c5e9aee05 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/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 {