upgrade Bootstrap 4 => 5, remove jquery (#146)

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

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index d38c87ca869deeb9a6faf84c58e7d06d2fa287fc..a93d6c5ec6b42289795b07869090687edf49a6e0 100644 (file)
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -2,10 +2,24 @@
   import PageLink from './PageLink.svelte';
   import ReverseLink from './ReverseLink.svelte';
   import LastUpdated from './LastUpdated.svelte';
+  import Error from './Error.svelte';
 
-  import { page } from '../lib/stores.js';
+  import { map_store, page } from '../lib/stores.js';
 
   $: view = $page.tab;
+  $: page_title = Nominatim_Config.Page_Title;
+
+  let map_lat;
+  let map_lon;
+
+  map_store.subscribe(map => {
+    if (!map) return;
+
+    map.on('move', function () {
+      map_lat = map.getCenter().lat;
+      map_lon = map.getCenter().lng;
+    });
+  });
 </script>
 
 <style>
@@ -25,8 +39,19 @@
     margin-top: -5px;
   }
 
-  .dropdown-menu { /* need to be above map markers */
-    z-index: 1005;
+  .nav-item {
+    white-space: nowrap;
+  }
+
+  .page-title-section {
+    display: none;
+    text-align: center;
+    padding: 1em;
+  }
+  @media (max-width: 600px) {
+    .page-title-section {
+      display: block;
+    }
   }
 
   .search-section {
@@ -38,48 +63,47 @@
 </style>
 
 <header class="container-fluid">
-  <nav class="navbar navbar-expand-lg 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>
-    <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>
+  <nav class="navbar navbar-expand-sm navbar-light">
+    <div class="container-fluid">
+      <!-- Brand -->
+      <div class="navbar-brand">
+        <PageLink page="search">
+          <img alt="logo" id="theme-logo" src="theme/logo.png" />
+          <h1>{page_title}</h1>
+        </PageLink>
+      </div>
+      <!-- Toggler (hamburger button) -->
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
+        <!-- Left-aligned links -->
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item">
+            <PageLink page="search" extra_classes="nav-link {view === 'search' ? 'active' : ''}">Search</PageLink>
+          </li>
+          <li class="nav-item">
+            <ReverseLink lat={map_lat} lon={map_lon} extra_classes="nav-link {view === 'reverse' ? 'active' : ''}">Reverse</ReverseLink>
+          </li>
+          <li class="nav-item">
+            <PageLink page="details" extra_classes="nav-link {view === 'details' ? 'active' : ''}">Search By ID</PageLink>
+          </li>
+        </ul>
+      </div>
+      <!-- Right aligned links -->
       <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 class="nav-item">
+          <PageLink page="about" extra_classes="nav-link {view === 'about' ? 'active' : ''}">About & Help</PageLink>
         </li>
       </ul>
     </div>
   </nav>
 </header>
+<section class="page-title-section">
+  <h2>{view}</h2>
+</section>
 <section class="search-section">
   <slot/>
 </section>
+<Error/>
 <LastUpdated/>