Header: Move primary nav to the left side

Author: Turbo87

app/components/header.hbs

@@ -52,7 +52,9 @@
         <menu.Item><LinkTo @route="category-slugs">List of category slugs</LinkTo></menu.Item>
       </dd.Menu>
     </Dropdown>
-    <span local-class="sep">|</span>
+  </nav>
+
+  <div local-class="login">
     {{#if this.session.currentUser}}
       <Dropdown data-test-user-menu as |dd|>
         <dd.Trigger local-class="dropdown-button" data-test-toggle>
@@ -96,7 +98,7 @@
         Log in with GitHub
       </button>
     {{/if}}
-  </nav>
+  </div>
 
   <div local-class='menu'>
     <Dropdown as |dd|>

app/components/header.module.css

@@ -18,8 +18,8 @@
 
     @media only screen and (min-width: 890px) {
         grid-template:
-            "index-link search-form nav" auto
-            / auto 1fr auto;
+            "index-link search-form nav login" auto
+            / auto minmax(150px, 400px) minmax(220px, 1fr) auto;
     }
 
     a {
@@ -80,20 +80,12 @@ input.search {
     background-size: 14px 15px;
     border-radius: 15px;
     box-shadow: none;
-    transition: box-shadow 150ms, max-width 150ms;
+    transition: box-shadow 150ms;
 
     &:focus {
         outline: none;
         box-shadow: 0 0 0 4px var(--yellow500);
     }
-
-    @media only screen and (min-width: 551px) {
-        max-width: 400px;
-
-        &:focus {
-            max-width: 100%;
-        }
-    }
 }
 
 .search-label {
@@ -127,6 +119,14 @@ input.search {
     }
 }
 
+.login {
+    display: none;
+
+    @media only screen and (min-width: 890px) {
+        display: block;
+    }
+}
+
 .menu {
     grid-area: menu;
     text-align: right;