Merge pull request #665 from shieldsjared/github-issue-630

Added a search box to the nav header for the mobile view.

Author: it33

source/myscript.js

@@ -1,7 +1,17 @@
 $(document).ready(function(){
 
 	$('header .links__icon').on('click', function (){
-		$(this).next().slideToggle();
+		$("header .header__searchbar").hide();
+		$("header .header__links").slideToggle();
+	});
+
+	$('header .search__icon').on('click', function (){
+		$("header .header__links").hide();
+		$("header .header__searchbar").slideToggle(400, function() {
+			if($(this).is(':visible')) {
+				$(this).find("input[type=text]").focus();
+			}
+		});
 	});
 
 	if($('.wy-menu-vertical li.current>a').length){

source/templates/header.html

@@ -1,5 +1,8 @@
 <header>
 	<div class="header__container">
+		<div class="search__icon">
+			<i class="fa fa-search"></i>
+		</div>
 		<a href="http://docs.mattermost.com/" class="header__logo">
 			<img width="176" src="https://about.mattermost.com/wp-content/uploads/2016/01/logo.png">
 		</a>
@@ -14,5 +17,12 @@
 			<li><a href="https://about.mattermost.com/contact/">Contact</a></li>
 			<li><a href="https://www.mattermost.org/download/">Download</a></li>
 		</ul>
+		<div class="header__searchbar">
+			<form id="rtd-search-form" class="wy-form" action="{{ pathto('search') }}" method="get">
+                <input type="text" name="q" placeholder="Search by keyword" autofocus />
+                <input type="hidden" name="check_keywords" value="yes" />
+                <input type="hidden" name="area" value="default" />
+            </form>
+		</div>
 	</div>
 </header>

source/theme.css

@@ -210,6 +210,15 @@ header .links__icon {
 	position: relative;
 }
 
+header .search__icon {
+	cursor: pointer;
+	display: none;
+	float: left;
+	font-size: 20px;
+	padding: 0 20px;
+	position: relative;
+}
+
 .wy-nav-top {
 	background: #F5F5F5;
 	padding: 0 10px;
@@ -279,13 +288,23 @@ header .header__links li a {
 	border-top: 3px solid transparent;
 }
 
+header .header__searchbar {
+	display: none;
+	float: left;
+	padding: 0 5px 0 0;
+}
+
 @media (max-width: 768px){
+<<<<<<< HEAD
 	header .links__icon {
 		display: block;
 	}
 	.wy-nav-top {
 		display: none;
 	}
+=======
+	
+>>>>>>> c8fd417... Added a search box to the nav header for the mobile view.
 	.wy-side-nav-search {
 		position: relative;
 	}
@@ -299,9 +318,41 @@ header .header__links li a {
 	.wy-nav-content-wrap.shift {
 		top: 70px;
 	}
+	header .header__container {
+		text-align:center;
+	}
+	header .links__icon {
+		display: block;
+	}
+	header .search__icon {
+		display: block;
+	}
+	header .header__logo {
+		position: relative;
+		margin-left: auto;
+		margin-right: auto;
+		float:none;
+	}
 	header .header__logo img {
 		width: 176px;
 	}
+	header .header__searchbar {
+		border-bottom: 1px solid #ccc;
+		display: none;
+		background: #fff;
+		line-height: 40px;
+		padding: 0 15px 5px;
+		width: 100%;
+	}
+	header .header__searchbar input[type="text"] {
+		width: 100%;
+		border-radius: 50px;
+		border: 1px solid #ddd;
+		padding: 6px 12px;
+	}
+	header .header__searchbar input:focus {
+		outline: none;
+	}
 	header .header__links {
 		border-bottom: 1px solid #ccc;
 		display: none;