added backend search functionality

Signed-off-by: rodude123 <rodude123@gmail.com>

src/blog/css/home.css

@@ -26,8 +26,47 @@ h3 {
     line-height: 2.1875rem;
 }
 
+div.menu {
+    width: 100%;
+    border-bottom: 5px solid var(--mutedGrey);
+}
+
+div.menu input:not([type="submit"]) {
+    width: auto;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+div.menu > ul {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+div.menu ul li {
+    display: flex;
+    flex-direction: row;
+}
+
+div.menu ul li button.btn {
+    padding: initial;
+    border-radius: 0 0.5em 0.5em 0;
+}
+
+div.menu ul li input:not([type="submit"]):focus + button.btn,
+div.menu ul li:hover button.btn,
+div.menu ul li:focus button.btn {
+    background: var(--primaryHover);
+    border: 0.3215em solid var(--primaryHover);
+}
+
+div.menu ul li:hover input:not([type="submit"]),
+div.menu ul li:focus input:not([type="submit"]) {
+    border: 0.3215em solid var(--primaryHover);
+}
+
 section.largePost {
-    /*margin: 0 5em;*/
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;

src/blog/js/index.js

@@ -116,6 +116,25 @@ function createLargePost(post)
  */
 function loadHomeContent()
 {
+	let menuBar = document.createElement('div');
+	menuBar.classList.add('menuBar');
+	// language=HTML
+	menuBar.innerHTML = `
+        <div class="menu">
+            <ul>
+                <li><a href="/blog/category" class="link">categories</a></li>
+                <li>
+                    <label for="search" aria-hidden="true" hidden>search</label>
+                    <input type="search" name="search" id="search"
+                           placeholder="Search...">
+                    <button type="submit" class="btn btnPrimary"><i
+                            class="fa fa-search"></i></button>
+                </li>
+            </ul>
+        </div>
+	`;
+	document.querySelector('#main').appendChild(menuBar);
+	
 	fetch('/api/blog/post').then(res => res.json().then(json =>
 	{
 		for (let i = 0; i < json.length; i++)
@@ -130,10 +149,10 @@ function loadHomeContent()
 				featuredPost.appendChild(h1);
 				let outerContent = createLargePost(json[i]);
 				featuredPost.appendChild(outerContent);
-				document.querySelector('#main').prepend(featuredPost);
+				document.querySelector('#main').appendChild(featuredPost);
 			}
 			
-			if (i === 0)
+			if (i === 1)
 			{
 				let latestPost = document.createElement('section');
 				latestPost.classList.add('largePost');
@@ -143,8 +162,9 @@ function loadHomeContent()
 				latestPost.appendChild(h1);
 				let outerContent = createLargePost(json[i]);
 				latestPost.appendChild(outerContent);
-				document.querySelector('#main').prepend(latestPost);
+				document.querySelector('#main').appendChild(latestPost);
 			}
+			
 		}
 	}));
 }