Simplify nav

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/templates/layout/_banner.html.eex

@@ -1,19 +1,21 @@
 <header role=banner class="bg-gray-900 text-white">
-  <div y-y x-x=md p-l p-r class="pb-4 md:pb-0 text-center md:text-left">
-    <a href="/" class="block px-3 py-2 md:py-4 md:text-right text-sm md:text-base font-bold italic uppercase leading-tight tracking-wide hover:bg-gray-800">
+  <nav role="navigation" class="w-full flex items-center lg:px-16 text-base md:text-lg text-center">
+    <div class="flex-grow max-w-md mr-auto">
+      <%= search_form() %>
+    </div>
+    <a href="/" class="block px-3 py-2 md:py-4 text-right text-sm md:text-base font-bold italic uppercase leading-tight tracking-wide hover:bg-gray-800">
       <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-rows-2 md:grid-cols-3 flex flex-col md:flex-row justify-around items-stretch tracking-wide">
-        <%= nav_items(@path_info) %>
+    <ul class="h-full grid grid-rows-2 md:grid-cols-3 flex flex-col md:flex-row justify-around items-stretch tracking-wide">
+      <%#= nav_items(@path_info) %>
 
-        <% if false do %>
-        <li class="py-1">
-          <a href="/signin/github" class="inline-block md:block px-4 py-1 md:py-2 font-bold text-white bg-red-700 rounded" style="background: linear-gradient(0deg, #E0003C 0%, #FF493F 50%, #FF584A 100%);">
-            <%= "Sign in with GitHub" %>
-          </a>
-        <% end %>
-      </ul>
-    </nav>
-  </div>
+
+      <% if false do %>
+      <li class="py-1">
+        <a href="/signin/github" class="inline-block md:block px-4 py-1 md:py-2 font-bold text-white bg-red-700 rounded" style="background: linear-gradient(0deg, #E0003C 0%, #FF493F 50%, #FF584A 100%);">
+          <%= "Sign in with GitHub" %>
+        </a>
+      <% end %>
+    </ul>
+  </nav>
 </header>

apps/components_guide_web/lib/components_guide_web/views/layout_view.ex

@@ -14,19 +14,25 @@ defmodule ComponentsGuideWeb.LayoutView do
     # {"About", to: "/about"}
   ]
 
-  defp search_form do
+  def search_form do
+    ~E"""
+    <form role=search action="/research" class="flex h-full px-2 items-center">
+      <input type=text name=q placeholder="Search specs, packages, features" class="w-full py-1 px-4 bg-gray-800 text-white rounded-full border border-gray-600">
+    </form>
+    """
+  end
+
+  def search_form_item do
     ~E"""
     <li class=row-span-3>
-      <form role=search action="/research" class="flex h-full px-2 items-center">
-        <input type=text name=q placeholder="Search specs, packages, features" class="w-full py-1 px-4 bg-gray-800 text-white rounded-full border border-gray-600">
-      </form>
+      <%= search_form() %>
     """
   end
 
   def nav_items(path_info) do
     [
       Enum.map(@nav_links, fn
-        {:search} -> search_form()
+        {:search} -> search_form_item()
         {title, to: to} -> nav_link_item(title: title, to: to, path_info: path_info)
       end)
     ]