fun.

webapp/src/components/Nav.svelte

@@ -1,19 +1,24 @@
 <script>
-  import { debounce } from 'lodash';
-  import { goto, prefetch } from "@sapper/app";
-  import { stores } from "@sapper/app";
-
+  import { debounce } from "lodash";
+  import { goto, prefetch, stores } from "@sapper/app";
   export let segment;
+
   const { page } = stores();
 
-  let q;
   let search;
 
-  page.subscribe((value) => {
-    q = value.query.q || "";
+  let handleSearch = debounce(_handleSearch, 300, {
+    trailing: true,
+    leading: false,
   });
 
- let handleSearch = debounce(_handleSearch);
+  page.subscribe((page) => {
+    setTimeout(() => {
+      if (segment === "search") {
+        search && search.focus();
+      }
+    }, 0);
+  });
 
   async function _handleSearch(event) {
     const url = `/search?q=${event.target.value}`;
@@ -23,35 +28,12 @@
 </script>
 
 <style>
-  nav {
-    border-bottom: 1px solid rgba(255, 62, 0, 0.1);
-    font-weight: 300;
-    padding: 0 1em;
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-  }
-
-  /* clearfix */
-  ul::after {
-    content: "";
-    display: block;
-    clear: both;
-  }
-
-  li {
-    display: block;
-    float: left;
-  }
-
-  [aria-current] {
+  .navigation [aria-current] {
     position: relative;
     display: inline-block;
   }
 
-  [aria-current]::after {
+  .navigation [aria-current]::after {
     position: absolute;
     content: "";
     width: calc(100% - 1em);
@@ -61,38 +43,78 @@
     bottom: -1px;
   }
 
-  a {
+  .navigation {
+    border-bottom: 1px solid rgba(255, 62, 0, 0.1);
+    font-weight: 300;
+    padding: 0;
+  }
+
+  .navigation-container {
+    margin: 0 auto;
+    padding: 0;
+    max-width: 64rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .navigation-container > * {
+    vertical-align: middle;
+  }
+  .navigation-list {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .navigation-item {
+    list-style: none;
+  }
+  .navigation-text,
+  .navigation-link {
     text-decoration: none;
     padding: 1em 0.5em;
     display: block;
   }
-
-  input {
+  .navigation-input {
     line-height: 2;
     margin: 1em;
     vertical-align: middle;
+    width: 15rem;
   }
 </style>
 
-<nav>
-  <ul>
-    <li>
-      <a
-        aria-current={segment === undefined ? 'page' : undefined}
-        rel="prefetch"
-        href=".">News</a>
-    </li>
-    <li>
-      <form action="/search" method="GET" rel="prefetch">
-        <input
-          id="search"
-          bind:this={search}
-          type="text"
-          name="q"
-          value={q}
-          placeholder="Search..."
-          on:keypress={handleSearch} />
-      </form>
-    </li>
-  </ul>
+<nav class="navigation">
+  <div class="navigation-container">
+    <ul class="navigation-list" role="menubar">
+      <li class="navigation-item">
+        <a
+          class="navigation-link"
+          aria-current={segment === undefined ? 'page' : undefined}
+          rel="prefetch"
+          href=".">News</a>
+      </li>
+      <li class="navigation-item">
+        <a
+          class="navigation-link"
+          aria-current={segment === 'search' ? 'page' : undefined}
+          rel="prefetch"
+          href="/search">Search</a>
+      </li>
+    </ul>
+    <form action="/search" method="GET" rel="prefetch" role="search">
+      <input
+        class="navigation-input"
+        id="search"
+        bind:this={search}
+        type="text"
+        name="q"
+        value={$page.query.q || ''}
+        placeholder="Search..."
+        on:keypress={handleSearch} />
+    </form>
+    <ul class="navigation-list">
+      <li class="navigation-item"><span class="navigation-text">Qot.</span></li>
+    </ul>
+  </div>
 </nav>