The Settings area is responsive now

modules/backend/assets/css/october.css

@@ -13337,3 +13337,49 @@ div[data-control="balloon-selector"]:not(.control-disabled) ul li:hover {
 .sidenav-tree ul.top-level > li > ul li:hover a {
   background-color: #34495e;
 }
+.sidenav-tree .back-link {
+  display: none;
+}
+@media (max-width: 768px) {
+  .sidenav-tree {
+    width: 100%;
+    height: auto!important;
+    display: block!important;
+  }
+  .sidenav-tree > .layout {
+    display: none;
+  }
+  .sidenav-tree-root .sidenav-tree {
+    width: 100%!important;
+    height: 100%!important;
+    display: table-cell !important;
+  }
+  .sidenav-tree-root .sidenav-tree .back-link {
+    display: none!important;
+  }
+  .sidenav-tree-root .sidenav-tree > .layout {
+    display: table!important;
+  }
+  .sidenav-tree-root #layout-body {
+    display: none;
+  }
+  body.has-sidenav-tree .sidenav-tree .back-link {
+    display: block;
+    background: #2b3e50;
+    padding: 13px 15px;
+    color: #bdc3c7;
+    font-size: 14px;
+    text-transform: uppercase;
+    line-height: 14px;
+  }
+  body.has-sidenav-tree .sidenav-tree .back-link i {
+    display: inline-block;
+    margin-right: 10px;
+  }
+  body.has-sidenav-tree .sidenav-tree .back-link:hover {
+    text-decoration: none;
+  }
+  body.has-sidenav-tree #layout-body {
+    display: block!important;
+  }
+}

modules/backend/assets/js/october.sidenav-tree.js

@@ -30,6 +30,8 @@
 
     SidenavTree.prototype.init = function (){
         var self = this
+
+        $(document.body).addClass('has-sidenav-tree')
     
         this.statusCookieName = this.options.treeName + 'groupStatus'
         this.searchCookieName = this.options.treeName + 'search'

modules/backend/assets/less/controls/sidenav-tree.less

@@ -134,4 +134,67 @@
             }
         }
     }
+
+    .back-link {
+        display: none;
+
+
+    }
+}
+
+@media (max-width: @screen-sm) {
+    .sidenav-tree {
+        width: 100%;
+        height: auto!important;
+        display: block!important;
+
+        > .layout {
+            display: none;
+        }
+    }
+
+    .sidenav-tree-root {
+        .sidenav-tree {
+            width: 100%!important;
+            height: 100%!important;
+            display: table-cell!important;
+
+            .back-link {
+                display: none!important;
+            }
+
+            > .layout {
+                display: table!important;
+            }
+        }
+
+        #layout-body {
+            display: none;
+        }
+    }
+
+    body.has-sidenav-tree {
+        .sidenav-tree {
+            .back-link {
+                display: block;
+                background: @color-sidebarnav-back-link-bg;
+                padding: 13px 15px;
+                color: @color-sidebarnav-back-link-text;
+                font-size: 14px;
+                text-transform: uppercase;
+                line-height: 14px;
+                i {
+                    display: inline-block;
+                    margin-right: 10px;
+                }
+                &:hover {
+                    text-decoration: none;
+                }
+            }
+        }
+
+        #layout-body {
+            display: block!important;
+        }
+    }
 }

modules/backend/assets/less/core/variables.less

@@ -86,6 +86,8 @@
 @color-sidebarnav-tree-active-bg:            #34495e;
 @color-sidebarnav-tree-active-text:          #ecf0f1;
 @color-sidebarnav-tree-active-marker:        #e6802b;
+@color-sidebarnav-back-link-bg:              #2b3e50;
+@color-sidebarnav-back-link-text:            #bdc3c7;
 
 @color-list-active:                          #dddddd;
 @color-list-hover:                           #dddddd;

modules/system/controllers/Settings.php

@@ -40,7 +40,7 @@ class Settings extends Controller
     {
         $this->pageTitle = Lang::get('system::lang.settings.menu_label');
         $this->vars['items'] = SettingsManager::instance()->listItems('system');
-        $this->bodyClass = 'compact-container';
+        $this->bodyClass = 'compact-container sidenav-tree-root';
     }
 
     public function mysettings()

modules/system/partials/_settings_menu.htm

@@ -1,8 +1,6 @@
 <?php
     $systemItems = System\Classes\SettingsManager::instance()->listItems('system');
     $mySettingItems = System\Classes\SettingsManager::instance()->listItems('mysettings');
-
-    // + Administrators
 ?>
 
 <?= $this->makePartial('@/modules/system/partials/_settings_menu_items.htm', ['items'=>$mySettingItems]); ?>

modules/system/partials/_system_sidebar.htm

@@ -1,4 +1,6 @@
 <div class="layout-cell sidenav-tree" data-control="sidenav-tree" data-search-input="#settings-search-input">
+    <a class="back-link" href="<?= Backend::url('system/settings') ?>"><i class="icon-angle-left"></i><?= e(trans('system::lang.settings.menu_label')) ?></a>
+
     <div class="layout">
         <div class="layout-row min-size">
             <?= $this->makePartial('@/modules/system/partials/_settings_menu_toolbar.htm') ?>