feature: mobile - classes added

src/styles/content/_index.scss

@@ -1,5 +1,9 @@
 main {
   height: calc(100vh - 72px);
+
+  @media (max-width: 768px) {
+    height: calc(100vh - 50px);
+  }
 }
 
 /* Styles of the right-hand menu + pages with that menu */
@@ -11,17 +15,13 @@ main {
   /*margin-top: 50px;*/
   overflow: hidden;
 
-  /*@media(min-width: 1024px) {
-    margin-top: 0;
-  }*/
-
   .views-container {
     flex: 1 0 0;
     /*-webkit-backface-visibility: hidden;*/
 
     &.sidebar-is-closed {
 
-      @media(min-width: 1024px) {
+      @media(min-width: 768.01px) {
         margin-left: -152px;
         transform: translate(152px);
       }
@@ -38,6 +38,11 @@ main {
     transition: all 0.5s;
     width: 217px;
 
+    @media (max-width: 768px) {
+      height: calc(100vh - 50px);
+      width: 65px;
+    }
+
     ul {
 
       li {
@@ -65,35 +70,35 @@ main {
 
     /* Styles use with JS to open/close the sidebar */
     &.jsRightMenu {
-      display: none;
-
-      @media(min-width: 1024px) {
-        display: block;
-      }
+      display: block;
     }
 
     &.jsRightMenu:not([open]) {
-      transform: translate(152px);
+      @media (min-width: 768.01px) {
+        transform: translate(152px);
+      }
+
+      /* Quick fix. When you got time, use animation on the span instead */
+      @media (max-width: 768px) {
+        ul>li:first-child>span,
+        ul>li:first-child>a {
+          visibility: hidden;
+        }
+      }
     }
 
     &.jsRightMenu[open] {
+      display: block;
+      bottom: 0;
+      right: 0;
 
-      @media(min-width: 1024px) {
-        display: block;
-        bottom: 0;
+      @media(max-width: 768px) {
         box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
         min-width: 60%;
         position: fixed;
-        right: 0;
         top: 50px;
         z-index: 1;
       }
-      @media(min-width: 1024px) {
-        box-shadow: none;
-        min-width: unset;
-        position: unset;
-        z-index: unset;
-      }
     }
   }
 }
@@ -105,6 +110,10 @@ main {
   height: calc(100vh - 72px); /* 72px == header's height */
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none;
+
+  @media (max-width: 768px) {
+    height: calc(100vh - 50px);
+  }
 }
 
 /* Custom scrollbar of the left-menu*/