Noissue - Fix broken layout from changeset 1940351cdb4c

static/scss/layout/_sidebar.scss

 // This file is part of acceptableads.org.
 // Copyright (C) 2016-present eyeo GmbH
 //
 // acceptableads.org is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // acceptableads.org is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 112 matching lines @@
   html[dir="rtl"] #sidebar
   {
     right: 0;
     text-align: left;
   }
 }
 
 // Positioning the sidebar on tablet/mobile
 @media(max-width: $sidebar-breakpoint-x - 1)
 {
-  #sidebar
-  {
-    margin-top: -64px;
-  }
   // sidebar appears below content by default on mobile (like a footer)
   // when javascript is enabled, fix the sidebar (navbar with toggle menu) top
+
+ #sidebar
+ {
+   margin-top: -$mobile-sidebar-height;
+ }
+
   .js #sidebar
   {
-    position: fixed;
-    margin-top: 0;
     z-index: 1;
     top: 0;
     left: 0;
+    margin-top: 0;
     overflow: hidden;
     width: 100%;
     // when closed, show the top of the sidebar (just the navbar)
     height: $lg;
   }
 
+  html:not(.open-sidebar).mobile #sidebar
+  {
+    position: fixed;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  html:not(.open-sidebar).mobile.scrollDown #sidebar
+  {
+    transform: translate(0,-$header-height);
+  }
+
   #sidebar-menus
   {
     margin-top: 30px;
   }
 
   .js #sidebar-menus
   {
     margin-top: 0;
   }
 
   // when opened, show the rest
-  .js #sidebar.open
+  .js.open-sidebar #sidebar
   {
     height: 100%;
+    position: fixed;
   }
 
   // align text opposite of desktop on mobile ltr and rtl
 
   html[dir="ltr"].js #sidebar
   {
     text-align: left;
   }
 
   html[dir="rtl"].js #sidebar
   {
     text-align: right;
   }
 
   .js #sidebar
   {
     // show sidebar navbar title and open button by default
     #sidebar-open
     {
       display: block;
     }
+  }
 
-    // Toggle open/close buttons
-    &.open
-    {
-     #sidebar-open
-     {
-      display: none;
-     }
-     #sidebar-close
-     {
-      display: block;
-     }
-   }
- }
+   // Toggle open/close buttons
+  .js.open-sidebar #sidebar
+  {
+      #sidebar-open
+      {
+        display: none;
+      }
+      #sidebar-close
+      {
+        display: block;
+      }
+  }
 
   #sidebar
   {
     .site-title
     {
-        display: block;
+      display: block;
     }
 
     #sidebar-brand
     {
       background-color: $inverted-fg;
     }
 
     #sidebar-open,
     #sidebar-close,
     #sidebar-logo,
@@ skipping 251 matching lines @@
   }
   .js #secondary-navigation
   {
     display: none;
   }
   .js #sidebar.open #secondary-navigation
   {
     display: block;
   }
 }