Merge pull request #1870 from netchampfaris/remove-offcanvas

overlay sidebar and mobile navbar improvements

frappe/desk/page/modules/modules.js

@@ -34,6 +34,7 @@ frappe.pages['modules'].on_page_load = function(wrapper) {
 		page.wrapper.find('.module-sidebar-item.active, .module-link.active').removeClass('active');
 		$(link).addClass('active').parent().addClass("active");
 		show_section($(link).attr('data-name'));
+		$('.module-sidebar-nav').trigger('close_sidebar');
 	}
 
 	var show_section = function(module_name) {
@@ -63,12 +64,12 @@ frappe.pages['modules'].on_page_load = function(wrapper) {
 		page.set_title(__(m.label));
 		page.main.html(frappe.render_template('modules_section', m));
 
-		if(frappe.utils.is_xs() || frappe.utils.is_sm()) {
-			// call this after a timeout, becuase a refresh will set the page to the top
-			setTimeout(function() {
-				$(document).scrollTop($('.module-body').offset().top - 100);
-			}, 100);
-		}
+		// if(frappe.utils.is_xs() || frappe.utils.is_sm()) {
+		// 	// call this after a timeout, becuase a refresh will set the page to the top
+		// 	setTimeout(function() {
+		// 		$(document).scrollTop($('.module-body').offset().top - 150);
+		// 	}, 100);
+		// }
 
 		//setup_section_toggle();
 		frappe.app.update_notification_count_in_modules();
@@ -139,6 +140,7 @@ frappe.pages['modules'].on_page_load = function(wrapper) {
 
 frappe.pages['modules'].on_page_show = function(wrapper) {
 	var route = frappe.get_route();
+	$("body").attr("data-sidebar", 1);
 	if(route.length > 1) {
 		// activate section based on route
 		frappe.modules_page.activate_link(

frappe/desk/page/modules/modules_sidebar.html

@@ -1,4 +1,4 @@
-<ul class="module-sidebar-nav nav nav-pills nav-stacked">
+<ul class="module-sidebar-nav overlay-sidebar nav nav-pills nav-stacked">
     {% for (var i=0, l= modules.length; i < l; i++) { var item = modules[i];
 			if(item.type==="module" && !item.blocked) { %}
 			{{ frappe.render_template("modules_sidebar_item", {"item": item}) }}

frappe/public/css/desk.css

@@ -358,6 +358,7 @@ fieldset[disabled] .form-control {
   max-height: 200px;
   overflow-y: auto;
   overflow-x: hidden;
+  z-index: 1041;
 }
 .ui-autocomplete a {
   transition: none;
@@ -384,15 +385,20 @@ fieldset[disabled] .form-control {
 }
 .ui-datepicker .ui-state-active,
 .ui-autocomplete .ui-state-active {
-  background-color: #5E64FF !important;
-  color: #fff !important;
+  background-color: #F0F4F7 !important;
+  color: #36414C !important;
   text-shadow: none !important;
+  border: none;
+}
+.ui-datepicker .ui-state-active .small,
+.ui-autocomplete .ui-state-active .small {
+  color: #555 !important;
 }
 .ui-menu .ui-menu-item {
-  padding: 7px;
   font-size: 12px;
 }
 .ui-menu .ui-menu-item a {
+  padding: 9px 11.8px !important;
   text-decoration: none;
 }
 @media (min-width: 768px) {

frappe/public/css/docs.css

@@ -161,15 +161,56 @@ body {
   margin-right: 3px;
   border-radius: 4px;
 }
+@media (max-width: 991px) {
+  .navbar-desk {
+    width: 40% !important;
+  }
+  .navbar-desk ~ ul > li {
+    float: left;
+  }
+  .navbar-desk ~ ul > li a {
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
+  .navbar-desk ~ ul > li a .avatar {
+    margin-right: 0;
+  }
+  .dropdown-navbar-new-comments > a {
+    padding: 8px 0 !important;
+    margin-left: 0 !important;
+  }
+}
+@media (max-width: 767px) {
+  .navbar-desk {
+    width: 60% !important;
+  }
+}
+#search-modal .modal-dialog,
+#search-modal .modal-content {
+  background: transparent;
+}
+#search-modal .modal-header {
+  background: #fff;
+  display: table;
+  width: 100%;
+}
+#search-modal .modal-header form,
+#search-modal .modal-header button {
+  display: table-cell;
+  vertical-align: middle;
+}
+#search-modal .modal-header button {
+  height: 30px;
+}
 .dropdown-navbar-new-comments > a {
   border: 0;
-  margin-left: 15px;
 }
 .dropdown-navbar-new-comments .dropdown-menu {
   margin-top: 0;
 }
 @media (max-width: 767px) {
-  .dropdown-navbar-new-comments.open .dropdown-menu {
+  .dropdown-navbar-new-comments.open .dropdown-menu,
+  .dropdown-navbar-user.open .dropdown-menu {
     position: absolute;
     border-top: 1px solid rgba(0, 0, 0, 0.14902);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -177,7 +218,8 @@ body {
     right: 0;
     left: auto;
   }
-  .dropdown-navbar-new-comments.open .dropdown-menu > li > a {
+  .dropdown-navbar-new-comments.open .dropdown-menu > li > a,
+  .dropdown-navbar-user.open .dropdown-menu > li > a {
     padding: 12px;
   }
 }

frappe/public/css/list.css

@@ -23,6 +23,11 @@
   padding-bottom: 4px;
   padding-right: 120px;
 }
+@media (max-width: 767px) {
+  .set-filters {
+    padding-right: 80px;
+  }
+}
 .set-filters .btn {
   margin-bottom: 10px;
 }

frappe/public/css/mobile.css

@@ -279,8 +279,27 @@ body {
   }
   body[data-route=""] .navbar .navbar-home,
   body[data-route="desktop"] .navbar .navbar-home {
+    padding: 8px 10px;
+  }
+  body[data-route=""] .navbar .navbar-home:before,
+  body[data-route="desktop"] .navbar .navbar-home:before {
+    display: none;
+  }
+  body[data-route=""] .navbar .navbar-home img,
+  body[data-route="desktop"] .navbar .navbar-home img {
+    margin-top: 0;
+  }
+  body[data-route=""] .toggle-sidebar,
+  body[data-route="desktop"] .toggle-sidebar {
     display: none !important;
   }
+  body[data-sidebar="0"] .toggle-sidebar {
+    display: none !important;
+  }
+  body[data-sidebar="0"] #navbar-breadcrumbs,
+  body[data-sidebar="0"] .navbar-home {
+    margin-left: 15px !important;
+  }
   .linked-with-dialog {
     width: 100% !important;
   }

frappe/public/css/module.css

@@ -36,6 +36,12 @@
     border-top: 1px solid #d1d8dd;
   }
 }
+@media (max-width: 767px) {
+  .module-body {
+    margin-top: 0;
+    border-top: 1px solid transparent;
+  }
+}
 @media (max-width: 767px) {
   .module-section {
     border: none;

frappe/public/css/navbar.css

@@ -27,15 +27,56 @@
   margin-right: 3px;
   border-radius: 4px;
 }
+@media (max-width: 991px) {
+  .navbar-desk {
+    width: 40% !important;
+  }
+  .navbar-desk ~ ul > li {
+    float: left;
+  }
+  .navbar-desk ~ ul > li a {
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
+  .navbar-desk ~ ul > li a .avatar {
+    margin-right: 0;
+  }
+  .dropdown-navbar-new-comments > a {
+    padding: 8px 0 !important;
+    margin-left: 0 !important;
+  }
+}
+@media (max-width: 767px) {
+  .navbar-desk {
+    width: 60% !important;
+  }
+}
+#search-modal .modal-dialog,
+#search-modal .modal-content {
+  background: transparent;
+}
+#search-modal .modal-header {
+  background: #fff;
+  display: table;
+  width: 100%;
+}
+#search-modal .modal-header form,
+#search-modal .modal-header button {
+  display: table-cell;
+  vertical-align: middle;
+}
+#search-modal .modal-header button {
+  height: 30px;
+}
 .dropdown-navbar-new-comments > a {
   border: 0;
-  margin-left: 15px;
 }
 .dropdown-navbar-new-comments .dropdown-menu {
   margin-top: 0;
 }
 @media (max-width: 767px) {
-  .dropdown-navbar-new-comments.open .dropdown-menu {
+  .dropdown-navbar-new-comments.open .dropdown-menu,
+  .dropdown-navbar-user.open .dropdown-menu {
     position: absolute;
     border-top: 1px solid rgba(0, 0, 0, 0.14902);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -43,7 +84,8 @@
     right: 0;
     left: auto;
   }
-  .dropdown-navbar-new-comments.open .dropdown-menu > li > a {
+  .dropdown-navbar-new-comments.open .dropdown-menu > li > a,
+  .dropdown-navbar-user.open .dropdown-menu > li > a {
     padding: 12px;
   }
 }

frappe/public/css/sidebar.css

@@ -249,6 +249,62 @@ body[data-route^="Module"] .main-menu .form-sidebar {
 .layout-side-section .list-sidebar {
   margin-top: -15px;
 }
+@media (max-width: 991px) {
+  .layout-side-section .overlay-sidebar {
+    margin-top: 0 !important;
+    position: fixed;
+    background: white;
+    top: 0;
+    left: 0;
+    transform: translateX(-110%);
+    z-index: 9999;
+    box-shadow: 5px 0 25px 0px rgba(0, 0, 0, 0.3);
+    height: 100%;
+    width: 40%;
+    padding: 25px;
+    display: block !important;
+    transition: transform 200ms ease-in-out;
+  }
+  .layout-side-section .overlay-sidebar.opened {
+    transform: translateX(0);
+    overflow-y: auto;
+  }
+  .layout-side-section .overlay-sidebar .reports-dropdown {
+    margin: 10px 0;
+  }
+  .layout-side-section .overlay-sidebar .reports-dropdown li:not(.divider) {
+    padding: 10px 0;
+  }
+}
+@media (max-width: 767px) {
+  .layout-side-section .overlay-sidebar {
+    width: 70%;
+  }
+}
+.layout-side-section div.close-sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  opacity: 0.3;
+  background: #000;
+  z-index: 1041;
+  height: 100%;
+  width: 100%;
+}
+@media (max-width: 991px) {
+  .layout-side-section .sidebar-menu {
+    margin: 0;
+  }
+}
+@media (max-width: 991px) {
+  .layout-side-section .module-sidebar-nav {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .layout-side-section .module-sidebar-nav .module-link {
+    padding-left: 25px;
+  }
+}
 .sidebar-left .list-sidebar .stat-label,
 .sidebar-left .list-sidebar .stat-no-records {
   padding: 12px 14px;

frappe/public/js/frappe/form/sidebar.js

@@ -8,7 +8,7 @@ frappe.ui.form.Sidebar = Class.extend({
 		var sidebar_content = frappe.render_template("form_sidebar", {doctype: this.frm.doctype, frm:this.frm});
 
 		this.offcanvas_form_sidebar = $(".offcanvas .form-sidebar").html(sidebar_content);
-		this.page_sidebar = $('<div class="form-sidebar hidden-xs hidden-sm"></div>')
+		this.page_sidebar = $('<div class="form-sidebar overlay-sidebar hidden-xs hidden-sm"></div>')
 			.html(sidebar_content)
 			.appendTo(this.page.sidebar.empty());
 

frappe/public/js/frappe/list/list_sidebar.js

@@ -19,7 +19,7 @@ frappe.views.ListSidebar = Class.extend({
 		var sidebar_content = frappe.render_template("list_sidebar", {doctype: this.doclistview.doctype});
 
 		this.offcanvas_list_sidebar = $(".offcanvas .list-sidebar").html(sidebar_content);
-		this.page_sidebar = $('<div class="list-sidebar hidden-xs hidden-sm"></div>')
+		this.page_sidebar = $('<div class="list-sidebar overlay-sidebar hidden-xs hidden-sm"></div>')
 			.html(sidebar_content)
 			.appendTo(this.page.sidebar.empty());
 

frappe/public/js/frappe/ui/toolbar/awesome_bar.js

@@ -79,7 +79,7 @@ frappe.search = {
 			.autocomplete(opts).data('ui-autocomplete')._renderItem =
 				frappe.search.render_item;
 
-		$("#sidebar-search")
+		$("#modal-search")
 			.on("focus", open_recent)
 			.autocomplete(opts).data('ui-autocomplete')._renderItem =
 				frappe.search.render_item;

frappe/public/js/frappe/ui/toolbar/navbar.html

@@ -1,6 +1,6 @@
 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
 	<div class="container">
-		<div class="navbar-header">
+		<div class="navbar-header navbar-desk">
 			<a class="navbar-brand toggle-sidebar visible-xs visible-sm">
 				<i class="octicon octicon-three-bars"></i>
 			</a>
@@ -11,48 +11,65 @@
 		<div class="navbar-center text-ellipsis" style="display: none;"></div>
 
 		<ul class="nav navbar-nav navbar-right">
-			<div class="dropdown dropdown-navbar-new-comments">
+			<li class="visible-xs">
+				<a class="navbar-search-button" href="#" data-toggle="modal" data-target="#search-modal"><i class="octicon octicon-search"></i></a>
+			</li>
+			<li class="dropdown dropdown-navbar-user">
+				<a class="dropdown-toggle" data-toggle="dropdown" href="#"
+					onclick="return false;">
+				{{ avatar }}
+                <span class="text-ellipsis toolbar-user-fullname hidden-xs hidden-sm">
+					{%= frappe.user.full_name() %}</span>
+                <b class="caret hidden-xs hidden-sm"></b></a>
+				<ul class="dropdown-menu" id="toolbar-user" role="menu">
+					<li class="navbar-set-desktop-icons"><a href="#modules_setup">
+					    {%= __("Set Desktop Icons") %}</a></li>
+					<li><a href="#Form/User/{%= encodeURIComponent(user) %}">
+					    {%= __("My Settings") %}</a></li>
+					<li><a href="#" onclick="return frappe.ui.toolbar.clear_cache();">
+					    {%= __("Reload") %}</a></li>
+					<li><a href="/index" target="_blank">
+						{%= __("View Website") %}</a></li>
+					<li class="divider"></li>
+					<li><a href="#" onclick="return frappe.ui.toolbar.show_about();">
+						{%= __("About") %}</a></li>
+					<li><a href="https://frappe.io" target="_blank" data-link="docs">
+						{%= __("Documentation") %}</a></li>
+					<li><a href="https://discuss.erpnext.com" target="_blank">
+					{%= __("Forums") %}</a></li>
+					<li><a href="https://github.com/frappe/frappe/issues" target="_blank" data-link="issues">
+						{%= __("Report an Issue") %}</a></li>
+					<li class="divider"></li>
+					<li><a href="#" onclick="return frappe.app.logout();">
+						{%= __("Logout") %}</a></li>
+				</ul>
+			</li>
+			<li class="dropdown dropdown-navbar-new-comments">
 				<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-					<span class="navbar-new-comments">0</span></a>
+					<span class="navbar-new-comments">0</span>
 				</a>
 				<ul class="dropdown-menu" id="dropdown-notification" role="menu" style="max-height: 480px; overflow-y: auto;">
 				</ul>
-			</div>
+			</li>
 		</ul>
 
-		<div class="hidden-xs hidden-sm">
-			<ul class="nav navbar-nav navbar-right">
-				<li class="dropdown">
-					<a class="dropdown-toggle" data-toggle="dropdown" href="#"
-						onclick="return false;">
-					{{ avatar }}
-	                <span class="text-ellipsis toolbar-user-fullname">
-						{%= frappe.user.full_name() %}</span>
-	                <b class="caret"></b></a>
-					<ul class="dropdown-menu" id="toolbar-user" role="menu">
-	                    <li class="navbar-set-desktop-icons"><a href="#modules_setup">
-	                        {%= __("Set Desktop Icons") %}</a></li>
-	                    <li><a href="#Form/User/{%= encodeURIComponent(user) %}">
-	                        {%= __("My Settings") %}</a></li>
-	    				<li><a href="#" onclick="return frappe.ui.toolbar.clear_cache();">
-	                        {%= __("Reload") %}</a></li>
-	        			<li><a href="/index" target="_blank">
-	                        {%= __("View Website") %}</a></li>
-	                    <li class="divider"></li>
-	    				<li><a href="#" onclick="return frappe.ui.toolbar.show_about();">
-	    					{%= __("About") %}</a></li>
-	    				<li><a href="https://frappe.io" target="_blank" data-link="docs">
-	    					{%= __("Documentation") %}</a></li>
-	    				<li><a href="https://discuss.erpnext.com" target="_blank">
-	    					{%= __("Forums") %}</a></li>
-	    				<li><a href="https://github.com/frappe/frappe/issues" target="_blank" data-link="issues">
-	    					{%= __("Report an Issue") %}</a></li>
-	                    <li class="divider"></li>
-	        			<li><a href="#" onclick="return frappe.app.logout();">
-	                        {%= __("Logout") %}</a></li>
-	                </ul>
-				</li>
-	        </ul>
+		<div id="search-modal" class="modal fade" role="dialog">
+			<div class="modal-dialog" style="height: 50px;">
+				<div class="modal-content">
+					<div class="modal-header">
+						<form role="search" onsubmit="return false;">
+							<div class="input-group" style="width: 100%">
+								<input id="modal-search" type="text" class="form-control"
+								placeholder="{%= __("Search or type a command") %}" aria-haspopup="true">
+							</div>
+						</form>
+						<button type="button" class="close" data-dismiss="modal"><i class="octicon octicon-x"></i></button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="hidden-xs">
 	        <form class="navbar-form navbar-right" role="search" onsubmit="return false;">
 	          <div class="form-group form-group-sm ui-front">
 	            <input id="navbar-search" type="text" class="form-control"

frappe/public/js/frappe/ui/toolbar/toolbar.js

@@ -10,7 +10,32 @@ frappe.ui.toolbar.Toolbar = Class.extend({
 		}));
 		var sidebar = $('.offcanvas .sidebar-left').append(frappe.render_template("offcanvas_left_sidebar", {}));
 
-		header.find(".toggle-sidebar").on("click", frappe.ui.toolbar.toggle_left_sidebar);
+		// header.find(".toggle-sidebar").on("click", frappe.ui.toolbar.toggle_left_sidebar);
+		header.find(".toggle-sidebar").on("click", function () {
+			var layout_side_section = $('.layout-side-section');
+			var overlay_sidebar = layout_side_section.find('.overlay-sidebar');
+			overlay_sidebar.addClass('opened');
+			overlay_sidebar.find('.reports-dropdown').removeClass('dropdown-menu').addClass('list-unstyled');
+			overlay_sidebar.find('.dropdown-toggle').addClass('text-muted').find('.caret').addClass('hidden-xs hidden-sm');
+
+			$('<div class="close-sidebar">').hide().appendTo(layout_side_section).fadeIn();
+
+			var offcanvas_container = $('body').find('.offcanvas-container');
+			offcanvas_container.css("overflow-y", "hidden");
+
+			layout_side_section.find(".close-sidebar").on('click', close_sidebar);
+
+			$('.module-sidebar-nav').on('close_sidebar', close_sidebar);
+
+			function close_sidebar() {
+				overlay_sidebar.removeClass('opened').find('.dropdown-toggle').removeClass('text-muted');
+				offcanvas_container.css("overflow-y", "visible");
+
+				layout_side_section.find(".close-sidebar").fadeOut(function() {
+					overlay_sidebar.find('.reports-dropdown').addClass('dropdown-menu');
+				});
+			}
+		});
 
 		header.find(".toggle-navbar-new-comments").on("click", function() {
 			$(".offcanvas").toggleClass("active-right").removeClass("active-left");

frappe/public/less/desk.less

@@ -167,6 +167,7 @@ textarea.form-control {
 	max-height: 200px;
 	overflow-y: auto;
 	overflow-x: hidden;
+	z-index: 1041;
 }
 
 .ui-autocomplete a {
@@ -197,16 +198,21 @@ textarea.form-control {
 	}
 
 	.ui-state-active {
-		background-color: @brand-primary !important;
-		color: #fff !important;
+		background-color: @btn-bg !important;
+		color: @text-color !important;
 		text-shadow: none !important;
+		border: none;
+
+		.small {
+			color: #555 !important;
+		}
 	}
 }
 
 .ui-menu .ui-menu-item {
-	padding: 7px;
 	font-size: @text-medium;
 	a {
+		padding: 9px 11.8px !important;
 		text-decoration: none;
 	}
 }

frappe/public/less/list.less

@@ -32,6 +32,10 @@
 .set-filters {
 	padding-bottom: 4px;
 	padding-right: 120px;
+
+	@media (max-width: @screen-xs) {
+		padding-right: 80px;
+	}
 }
 
 .set-filters .btn {

frappe/public/less/mobile.less

@@ -193,10 +193,30 @@
 	body[data-route=""],
 	body[data-route="desktop"] {
 		.navbar .navbar-home {
+			// display: none !important;
+			padding: 8px 10px;
+			&:before {
+				display: none;
+			}
+			img {
+				margin-top: 0;
+			}
+		}
+
+		.toggle-sidebar {
 			display: none !important;
 		}
 	}
 
+	body[data-sidebar="0"] {
+		.toggle-sidebar {
+			display: none !important;
+		}
+		#navbar-breadcrumbs, .navbar-home {
+			margin-left: 15px !important;
+		}
+	}
+
 	.linked-with-dialog {
 		width: 100% !important;
 	}

frappe/public/less/module.less

@@ -49,6 +49,13 @@
 	}
 }
 
+@media(max-width: @screen-xs) {
+	.module-body {
+		margin-top: 0;
+		border-top: 1px solid transparent;
+	}
+}
+
 @media(max-width: @screen-xs) {
 	.module-section {
 		border: none;

frappe/public/less/navbar.less

@@ -35,10 +35,56 @@
 	border-radius: 4px;
 }
 
+@media (max-width: 991px) {
+	.navbar-desk {
+		width: 40% !important;
+
+		& ~ ul > li {
+			float: left;
+			a {
+				padding-left: 10px !important;
+				padding-right: 10px !important;
+
+				.avatar {
+					margin-right: 0;
+				}
+			}
+		}
+	}
+	.dropdown-navbar-new-comments > a {
+		padding: 8px 0 !important;
+		margin-left: 0 !important;
+	}
+}
+
+@media (max-width: 767px) {
+	.navbar-desk {
+		width: 60% !important;
+	}
+}
+
+#search-modal {
+	.modal-dialog, .modal-content {
+		background: transparent;
+	}
+	.modal-header {
+		background: #fff;
+		display: table;
+		width: 100%;
+
+		form, button {
+			display: table-cell;
+			vertical-align: middle;
+		}
+		button {
+			height: 30px;
+		}
+	}
+}
+
 .dropdown-navbar-new-comments {
 	& > a {
 		border: 0;
-		margin-left: 15px;
 	}
 	.dropdown-menu {
 		margin-top: 0;
@@ -46,7 +92,8 @@
 }
 
 @media (max-width: 767px) {
-	.dropdown-navbar-new-comments.open .dropdown-menu {
+	.dropdown-navbar-new-comments.open .dropdown-menu,
+	.dropdown-navbar-user.open .dropdown-menu {
 		position: absolute;
 		border-top: 1px solid rgba(0, 0, 0, 0.14902);
 		box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

frappe/public/less/sidebar.less

@@ -255,6 +255,72 @@ body[data-route^="Module"] .main-menu {
 	margin-top: -15px;
 }
 
+.layout-side-section {
+
+	.overlay-sidebar {
+		@media (max-width: 991px) {
+			margin-top: 0 !important;
+			position: fixed;
+			background: white;
+			top: 0;
+			left: 0;
+			transform: translateX(-110%);
+			z-index: 9999;
+			box-shadow: 5px 0 25px 0px rgba(0,0,0,0.3);
+			height: 100%;
+			width: 40%;
+			padding: 25px;
+			display: block !important;
+			transition: transform 200ms ease-in-out;
+
+			&.opened {
+				transform: translateX(0);
+				overflow-y: auto;
+			}
+
+			.reports-dropdown {
+				margin: 10px 0;
+
+				li:not(.divider) {
+					padding: 10px 0;
+				}
+			}
+		}
+
+		@media (max-width: 767px) {
+			width: 70%;
+		}
+	}
+
+	div.close-sidebar {
+		position: fixed;
+		top: 0;
+		right: 0;
+		opacity: 0.3;
+		background: #000;
+		z-index: 1041;
+		height: 100%;
+		width: 100%;
+	}
+
+	.sidebar-menu {
+		@media (max-width: 991px) {
+			margin: 0;
+		}
+	}
+
+	.module-sidebar-nav {
+		@media (max-width: 991px) {
+			padding-left: 0;
+			padding-right: 0;
+
+			.module-link {
+				padding-left: 25px;
+			}
+		}
+	}
+}
+
 .sidebar-left .list-sidebar {
 	.stat-label,
 	.stat-no-records {