update: sidebar - access when in admin on mobile

src/styles/base/main.scss

@@ -262,10 +262,6 @@ h5 {
   border-bottom: 1px solid var(--color-content-header);
   padding: 3rem;
 
-  @include breakpoint(sm) {
-    background: var(--color-grey-10);
-  }
-
   sib-display {
     @include breakpoint(sm) {
       float: left;
@@ -273,20 +269,18 @@ h5 {
   }
 
   .mobile-sidebar-button {
-    @include breakpoint(sm) {
-      float: right;
-      color: var(--color-secondary);
-      font-size: 1.8rem;
-      font-weight: bold!important;
+    float: right;
+    color: var(--color-secondary);
+    font-size: 1.8rem;
+    font-weight: bold!important;
 
-      &::before {
-        font-size: 2.2rem;
-        font-weight: normal;
-        margin-right: 1.2rem;
-      }
+    &::before {
+      font-size: 2.2rem;
+      font-weight: normal;
+      margin-right: 1.2rem;
     }
 
-    @include breakpoint($min: 1025px, $max: 0) {
+    @include breakpoint(lg) {
       display: none;
     }
   }
@@ -383,7 +377,10 @@ h5 {
 
 .space-between {
   justify-content: space-between;
-  padding-bottom: 1.4rem;
+
+  &.with-padding {
+    padding-bottom: 1.4rem;
+  }
 }
 
 .section {

src/styles/components/sidebar.scss

@@ -18,7 +18,8 @@
     /*-webkit-backface-visibility: hidden;*/
 
     &.sidebar-is-closed {
-      @include breakpoint(769px, 0) {
+      
+      @include breakpoint(lg) {
         margin-left: -15.5rem;
         transform: translate(15.5rem);
       }
@@ -141,9 +142,10 @@
     }
 
     &.jsRightMenu {
+      display: none;
 
-      @include breakpoint(sm) {
-        display: none;
+      @include breakpoint(lg) {
+        display: block;
       }
     }
 
@@ -157,7 +159,7 @@
     
     &.jsRightMenu[open] {
 
-      @include breakpoint(sm) {
+      @include breakpoint(md) {
         display: block;
         background: var(--color-right-menu-background);
         bottom: 0;
@@ -165,9 +167,13 @@
         min-width: 60%;
         position: fixed;
         right: 0;
-        top: 83px;
+        top: 50px;
         z-index: 1;
       }
+
+      @include breakpoint(lg) {
+        top: 83px;
+      }
     }
   }
 }

src/styles/index.scss

@@ -9,7 +9,7 @@
 @import 'components/icons/index';
 @import 'base/main';
 
-div#viewport {
+#viewport {
     display: flex;
     flex: 1;
     /*height: auto;