From 1f465bd7a5987e1e95cf1a521ff5fde8e0f71459 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 12 Jan 2021 13:44:22 +0100
Subject: [PATCH] wait #4183 @1

---
 .../packages/fluidbook/toolbox/css/style.less | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/public/packages/fluidbook/toolbox/css/style.less b/public/packages/fluidbook/toolbox/css/style.less
index c1f3ab24e..014d49f3a 100644
--- a/public/packages/fluidbook/toolbox/css/style.less
+++ b/public/packages/fluidbook/toolbox/css/style.less
@@ -14,6 +14,8 @@
 @secondary-focus: darken(@secondary, 10%);
 @secondary-active: darken(@secondary, 12%);
 @secondary-active-border: darken(@secondary, 15%);
+@sidebar-breakpoint: ~"(max-width:991.98px)";
+@sidebar-over-breakpoint: ~"(min-width:991.98px)";
 
 body {
     background-color: #fafafa;
@@ -46,10 +48,23 @@ main {
     .navbar-brand {
         width: 300px;
         padding: 20px 15px;
+
+        @media @sidebar-breakpoint {
+            margin-left: -135px;
+            top: 3px;
+        }
+    }
+
+    &.navbar-color .navbar-toggler {
+        color: #fff;
+        border: 0;
     }
 
     .navbar-toggler {
         display: none;
+        @media @sidebar-breakpoint {
+            display: block;
+        }
     }
 }
 
@@ -190,6 +205,24 @@ a, a.btn-link {
 .sidebar.sidebar-pills {
     padding-left: 0;
 
+    @media @sidebar-over-breakpoint {
+        margin-left: 0 !important;
+    }
+
+    .sidebar-nav, .sidebar-nav ul.nav {
+        @media @sidebar-breakpoint {
+            width: 225px;
+        }
+    }
+
+    &.bg-light {
+        @media @sidebar-breakpoint {
+            background-color: #fff !important;
+            padding-right: 0;
+            box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
+        }
+    }
+
     .nav-dropdown {
         &.open {
             background-color: transparent;
-- 
2.39.5