user dropdown in mobile navbar

frappe/public/css/docs.css

@@ -163,11 +163,17 @@ body {
 }
 @media (max-width: 991px) {
   .navbar-desk {
-    width: 60% !important;
+    width: 40% !important;
   }
   .navbar-desk ~ ul > li {
     float: left;
-    width: 50px;
+  }
+  .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;
@@ -193,13 +199,13 @@ body {
 }
 .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);
@@ -207,7 +213,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/navbar.css

@@ -29,11 +29,17 @@
 }
 @media (max-width: 991px) {
   .navbar-desk {
-    width: 60% !important;
+    width: 40% !important;
   }
   .navbar-desk ~ ul > li {
     float: left;
-    width: 50px;
+  }
+  .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;
@@ -59,13 +65,13 @@
 }
 .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);
@@ -73,7 +79,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/js/frappe/ui/toolbar/navbar.html

@@ -11,8 +11,38 @@
 		<div class="navbar-center text-ellipsis" style="display: none;"></div>
 
 		<ul class="nav navbar-nav navbar-right">
-			<li class="visible-xs visible-sm">
-				<a href="#" data-toggle="modal" data-target="#searchModal"><i class="octicon octicon-search"></i></a>
+			<li class="visible-xs">
+				<a class="navbar-search-button" href="#" data-toggle="modal" data-target="#searchModal"><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">
@@ -39,39 +69,7 @@
 			</div>
 		</div>
 
-		<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 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/less/navbar.less

@@ -37,11 +37,18 @@
 
 @media (max-width: 991px) {
 	.navbar-desk {
-		width: 60% !important;
+		width: 40% !important;
 
 		& ~ ul > li {
 			float: left;
-			width: 50px;
+			a {
+				padding-left: 10px !important;
+				padding-right: 10px !important;
+
+				.avatar {
+					margin-right: 0;
+				}
+			}
 		}
 	}
 	.dropdown-navbar-new-comments > a {
@@ -72,7 +79,6 @@
 .dropdown-navbar-new-comments {
 	& > a {
 		border: 0;
-		margin-left: 15px;
 	}
 	.dropdown-menu {
 		margin-top: 0;
@@ -80,7 +86,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);