feature: right-hand menu

src/styles/hubl-app/content/_index.scss

@@ -1,3 +1,97 @@
 main {
   height: calc(100vh - 72px);
+}
+
+/* Styles of the right-hand menu + pages with that menu */
+.with-sidebar {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  /*margin-top: 50px;*/
+  overflow: hidden;
+
+  /*@media($large) {
+    margin-top: 0;
+  }*/
+
+  .views-container {
+    flex: 1 0 0;
+    /*-webkit-backface-visibility: hidden;*/
+
+    &.sidebar-is-closed {
+
+      @media($large) {
+        margin-left: -152px;
+        transform: translate(152px);
+      }
+    }
+  }
+
+  >div {
+    transition: all 0.5s;
+  }
+
+  nav {
+    background: #F1F1F1;
+    transition: all 0.5s;
+    width: 217px;
+
+    ul {
+
+      li {
+        border-bottom: 1px solid #D6CECE;
+
+        &>a {
+          vertical-align: super;
+        }
+      }
+      &>li:first-child>a {
+        vertical-align: middle;
+      }
+
+      >solid-route {
+
+        &[active]>li {
+          background-color: var(--color-heading);
+          color: white;
+        }
+        &:hover:not([active])>li {
+          background: #E4E4E4;
+        }
+      }
+    }
+
+    &.jsRightMenu {
+      display: none;
+
+      @media($large) {
+        display: block;
+      }
+    }
+
+    &.jsRightMenu:not([open]) {
+      transform: translate(152px);
+    }
+
+    &.jsRightMenu[open] {
+
+      @media($large) {
+        display: block;
+        bottom: 0;
+        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($large) {
+        box-shadow: none;
+        min-width: unset;
+        position: unset;
+        z-index: unset;
+      }
+    }
+  }
 }

src/styles/hubl-framework/commons/_index.scss

@@ -4,4 +4,4 @@
 @import 'borders';
 @import 'shadows';
 @import 'user-thumb';
-@import 'lists'
+@import 'lists';

src/styles/hubl-framework/commons/colors.scss

@@ -65,17 +65,6 @@
   }
 }
 
-.bg-color-grey {
-  background-color: #F1F1F1;
-
-  &.active:active {
-    background-color: var(--color-heading);
-  }
-  &.hover:hover:not(:active) {
-    background-color: #E4E4E4;
-  }
-}
-
 .bg-color-white {
   background: white;
 }

src/styles/hubl-framework/icons/custom-icons.scss

@@ -63,7 +63,6 @@ $ci-icons: (
   display: inline-block;
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: '#{$ci-font-name}' !important;
-  font-size: 25px;
   font-style: normal;
   font-weight: normal;
   line-height: 1;