Add search form

RoyalIcing · RoyalIcing · commit 900effff16fd · 2020-04-12T05:24:20.000+10:00
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/layout/_banner.html.eex b/apps/components_guide_web/lib/components_guide_web/templates/layout/_banner.html.eex
@@ -4,7 +4,7 @@
       <span>Components <br>·Guide</span>
     </a>
     <nav role="navigation" class="flex-grow sm:pl-8 lg:px-16 text-base md:text-lg text-center">
-      <ul class="h-full grid grid-cols-2 flex flex-col md:flex-row justify-around items-stretch tracking-wide">
+      <ul class="h-full grid grid-cols-2 md:grid-cols-3 flex flex-col md:flex-row justify-around items-stretch tracking-wide">
         <%= nav_items(@path_info) %>
         
         <% if false do %>
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/layout/app.html.eex b/apps/components_guide_web/lib/components_guide_web/templates/layout/app.html.eex
@@ -4,11 +4,11 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>Components.Guide</title>
+    <title>Components.Guide — Web tutorials on React, Accessibility, Modern CSS, TypeScript</title>
     <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
   </head>
   <body>
-    <%= render ComponentsGuideWeb.LayoutView, "_header.html", path_info: @conn.path_info %>
+    <%= render ComponentsGuideWeb.LayoutView, "_banner.html", path_info: @conn.path_info %>
     <main role="main">
       <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
       <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
diff --git a/apps/components_guide_web/lib/components_guide_web/views/layout_view.ex b/apps/components_guide_web/lib/components_guide_web/views/layout_view.ex
@@ -8,15 +8,28 @@ defmodule ComponentsGuideWeb.LayoutView do
   @nav_links [
     {"By Concept", to: "/concepts"},
     {"By Technology", to: "/links"},
-    {"Patterns", to: "/patterns"},
+    {:search},
+    # {"Patterns", to: "/patterns"},
     {"Live Feed", to: "/feed"},
     {"About", to: "/about"}
   ]
 
+  defp search_form do
+    ~E"""
+    <li>
+      <form role=search action="/research" class="flex h-full px-2 items-center">
+        <input type=text name=q placeholder="Search" class="w-full py-1 px-2 bg-white text-black">
+      </form>
+    """
+  end
+
   def nav_items(path_info) do
-    Enum.map(@nav_links, fn
-      {title, to: to} -> nav_link_item(title: title, to: to, path_info: path_info)
-    end)
+    [
+      Enum.map(@nav_links, fn
+        {:search} -> search_form()
+        {title, to: to} -> nav_link_item(title: title, to: to, path_info: path_info)
+      end)
+    ]
   end
 
   def nav_link_item(assigns) do
@@ -29,7 +42,7 @@ defmodule ComponentsGuideWeb.LayoutView do
       end
 
     ~E"""
-    <li><a href="<%= @to %>" aria-current="<%= current %>" class="flex h-full px-4 py-2 md:py-4 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= @title %></a>
+    <li><a href="<%= @to %>" aria-current="<%= current %>" class="flex h-full px-4 py-2 md:py-2 font-bold border-4 border-transparent hover:bg-gray-800 hover:border-white"><%= @title %></a>
     """
   end
 end
