Details search: merge three forms into one (#81)

[nominatim-ui.git] / src / components / Header.svelte

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 63e2a4454cf1e9c4b164bb4731716482ae98ba2d..8830f5218276055c17aa5c5e0c65847aca2318bf 100644 (file)
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,67 +1,89 @@
 <script>
+  import PageLink from './PageLink.svelte';
+  import ReverseLink from './ReverseLink.svelte';
   import LastUpdated from './LastUpdated.svelte';
-</script>
 
-<style>
-  header {
-    width: 100%;
-    padding: 5px 15px;
-    z-index: 5;
-  }
+  import { page } from '../lib/stores.js';
 
-  .brand {
-    white-space: nowrap;
-  }
+  $: view = $page.tab;
+</script>
 
-  .brand a:hover{
+<style>
+  .navbar-brand :global(a:hover) {
     text-decoration: none;
   }
 
-  .brand h1 {
+  .navbar-brand h1 {
     display: inline;
-    font-size: 1.5em;
+    font-size: 1.2em;
     color: #333;
   }
 
-  .brand img {
+  .navbar-brand img {
     display: inline-block;
     margin-right: 5px;
     margin-top: -5px;
   }
 
-  .dropdown-menu {
+  .nav-item {
+    white-space: nowrap;
+  }
+
+  .dropdown-menu { /* need to be above map markers */
     z-index: 1005;
   }
+
+  .search-section {
+    padding: 1em 30px;
+    background-color: #f5f5f5;
+    border-top: 2px solid #ddd;
+    border-bottom: 2px solid #ddd;
+  }
 </style>
 
 <header class="container-fluid">
-  <div class="row">
-    <div class="col-4">
-      <div class="brand">
-        <a href="search.html">
-          <img alt="logo" src="images/osm_logo.120px.png" width="30" height="30"/>
-          <h1>Nominatim</h1>
-        </a>
-      </div>
-    </div>
-    <div class="col-4">
-      <LastUpdated/>
+  <nav class="navbar navbar-expand-sm navbar-light">
+    <div class="navbar-brand">
+      <PageLink page="search">
+        <img alt="logo" src="images/osm_logo.120px.png" width="30" height="30"/>
+        <h1>Nominatim</h1>
+      </PageLink>
     </div>
-    <div class="col-4 text-right">
-      <div class="dropdown">
-        <button class="dropdown-toggle btn btn-sm btn-outline-secondary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-          About &amp; Help
-        </button>
-        <div class="dropdown-menu dropdown-menu-right">
-          <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Overview/" target="_blank">API Reference</a>
-          <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Faq/" target="_blank">FAQ</a>
-          <a class="dropdown-item" href="https://help.openstreetmap.org/tags/nominatim/">OpenStreetMap Help</a>
-          <a class="dropdown-item" href="https://github.com/osm-search/Nominatim">Nominatim on Github</a>
-          <a class="dropdown-item" href="https://github.com/osm-search/nominatim-ui">This frontend on Github</a>
-          <div class="dropdown-divider"></div>
-          <a class="dropdown-item" href="#report-issue" data-toggle="modal" data-target="#report-modal">Report problem with results</a>
-        </div>
-      </div>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item {view === 'search' ? 'active' : ''}">
+          <PageLink page="search" extra_classes="nav-link ">Search</PageLink>
+        </li>
+        <li class="nav-item {view === 'reverse' ? 'active' : ''}">
+          <ReverseLink extra_classes="nav-link ">Reverse</ReverseLink>
+        </li>
+        <li class="nav-item {view === 'details' ? 'active' : ''}">
+          <PageLink page="details" extra_classes="nav-link ">Search By ID</PageLink>
+        </li>
+      </ul>
+      <ul class="navbar-nav">
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#open-about-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            About &amp; Help
+          </a>
+          <div class="dropdown-menu dropdown-menu-right">
+            <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Overview/" target="_blank">API Reference</a>
+            <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Faq/" target="_blank">FAQ</a>
+            <a class="dropdown-item" href="https://help.openstreetmap.org/tags/nominatim/">OpenStreetMap Help</a>
+            <a class="dropdown-item" href="https://github.com/osm-search/Nominatim">Nominatim on Github</a>
+            <a class="dropdown-item" href="https://github.com/osm-search/nominatim-ui">This frontend on Github</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#report-issue" data-toggle="modal" data-target="#report-modal">Report problem with results</a>
+          </div>
+        </li>
+      </ul>
     </div>
-  </div>
+  </nav>
 </header>
+<section class="search-section">
+  <slot/>
+</section>
+<LastUpdated/>