mobile responsive issues resolved

Author: Mostafa Moradi

resources/css/ocify-sidebar.css

@@ -1,24 +1,28 @@
-#main {
-  margin-left: 315px;
-  transition: margin-left 0.3s ease-in-out;
-}
-#main .top-bar {
-  width: calc(100% - 300px);
-  transition: width 0.3s ease-in-out;
-  padding-left: 20px;
+@media (min-width: 768px) {
+  #main {
+    margin-left: 315px;
+    transition: margin-left 0.3s ease-in-out;
+  }
+  #main .top-bar {
+    width: calc(100% - 300px);
+    transition: width 0.3s ease-in-out;
+    padding-left: 28px;
+  }
+  #footer {
+    margin-left: 300px;
+    transition: margin-left 0.3s ease-in-out;
+  }
 }
+
 #main.wide-content {
-  margin-left: 125px;
+  margin-left: 0;
 }
 #main.wide-content .top-bar {
-  width: calc(100% - 110px);
-}
-#footer {
-  margin-left: 300px;
-  transition: margin-left 0.3s ease-in-out;
+  width: 100%;
+  padding-left: 55px;
 }
 #footer.wide-content {
-  margin-left: 110px;
+  margin-left: 0;
 }
 #wrapper {
   background-color: {{ setting_value('visiosoft.theme.defaultadmin::primary_color') }};
@@ -57,15 +61,15 @@
 }
 #wrapper .logo-bar #menu-toggle-2 {
   position: absolute;
-  right: 0;
+  right: -16px;
   width: 34px;
   height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: {{ setting_value('visiosoft.theme.defaultadmin::primary_color') }};
+  background: rgba(24, 201, 65, .9);
   backdrop-filter: blur(68.49px);
-  border-radius: 18.264px;
+  border-radius: 0 5px 5px 0;
   transform: translateX(50%);
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
@@ -85,7 +89,6 @@
   display: flex;
   border-radius: 8px;
   border: 1px solid rgba(220, 220, 220, 0.3);
-  margin: 2em 0;
 }
 #wrapper .sidebar-wrapper #search .search-bar {
   flex: 1;
@@ -234,6 +237,7 @@
 }
 #wrapper.toggled-2 {
   width: 110px;
+  left:-110px;
 }
 #wrapper.toggled-2 .title, #wrapper.toggled-2 .group-sublist, #wrapper.toggled-2 #search, #wrapper.toggled-2 .sidebar-nav i {
   display: none;

resources/css/theme.css

@@ -3397,13 +3397,14 @@ border-color: {{setting_value('visiosoft.theme.defaultadmin::input_focused_borde
 
 .breadcrumb {
     border-radius: 0 !important;
-    background-color: {{ setting_value('visiosoft.theme.defaultadmin::background_color') }} !important;
+    background-color: {{ setting_value('visiosoft.theme.defaultadmin::block_background_color') }} !important;
     font-size: 0.8rem;
     margin-top: 15px !important;
     margin-bottom: 0 !important;
     padding-top: 0 !important;
     padding-bottom: 0 !important;
 }
+
 .breadcrumb li.active {
 background-color: inherit !important;
 }
@@ -3499,12 +3500,22 @@ body.sidebars--static .logo {
 }
 
 @media (max-width: 991px) {
+    .breadcrumb {
+        border-radius: 0 !important;
+        background-color: {{ setting_value('visiosoft.theme.defaultadmin::background_color') }} !important;
+        font-size: 0.8rem;
+        margin-top: 15px !important;
+        margin-bottom: 0 !important;
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+    }
     .login-form-block .form-control {
         min-width: 200px;
     }
     .top-bar {
-    background: {{ setting_value('visiosoft.theme.defaultadmin::secondary_color')}};
-    width: calc(100% - 60px);
+    background: {{ setting_value('visiosoft.theme.defaultadmin::background_color') }};
+    width: 100%;
+    padding-left: 28px;
     }
 
     .top-bar .user-action-dropdown {

resources/js/ocify-sidebar.js

@@ -1,17 +1,17 @@
+if (window.innerWidth <= 768) {
+    $("#wrapper").addClass('toggled-2');
+}
 $("#menu-toggle").click(function (e) {
     e.preventDefault();
-    $("#wrapper").toggleClass("toggled");
+    $("#wrapper").toggleClass('toggled');
 });
 $("#menu-toggle-2").click(function (e) {
     e.preventDefault();
-    $("#wrapper").toggleClass("toggled-2");
-    $(".top-bar").toggleClass("wide-top-bar");
-    $("#main, #footer").toggleClass("wide-content");
-
-    $("#menu-toggle-2 i").toggleClass("fa-angle-left fa-angle-right");
+    $("#wrapper").toggleClass('toggled-2');
+    $(".top-bar").toggleClass('wide-top-bar');
+    $("#main, #footer").toggleClass('wide-content');
 });
 
-
 function flexExpended(class_name) {
     $(class_name).on('click', function () {
         if ($(this).attr('aria-expanded') === "false") {

resources/js/theme/initialize.js

@@ -15,7 +15,6 @@ $(document).on('ready', function () {
 
     // Initialize scrollbars.
     $('.scrollbar').perfectScrollbar();
-
     // Flush the footer to the bottom.
     $('#main').css('min-height', $(window).height() - $('#brand').outerHeight() - $('#footer').outerHeight() - 24);
 

resources/views/partials/interactiveMenu.twig

@@ -14,7 +14,7 @@
         </div>
 
         <div id="menu-toggle-2">
-            <i class="fa fa-angle-left"></i>
+            <i class="fa fa-bars"></i>
         </div>
     </div>