src/components/Header.svelte

   1 <script>
   2   import PageLink from './PageLink.svelte';
   3   import ReverseLink from './ReverseLink.svelte';
   4   import LastUpdated from './LastUpdated.svelte';
   5   import Error from './Error.svelte';
   6
   7   import { map_store, page } from '../lib/stores.js';
   8
   9   $: view = $page.tab;
  10   $: page_title = Nominatim_Config.Page_Title;
  11   $: reverse_only = Nominatim_Config.Reverse_Only;
  12
  13   let map_lat;
  14   let map_lon;
  15
  16   map_store.subscribe(map => {
  17     if (!map) return;
  18
  19     map.on('move', function () {
  20       map_lat = map.getCenter().lat.toFixed(5);
  21       map_lon = map.getCenter().lng.toFixed(5);
  22     });
  23   });
  24 </script>
  25
  26 <style>
  27   .navbar-brand :global(a:hover) {
  28     text-decoration: none;
  29   }
  30
  31   .navbar-brand h1 {
  32     display: inline;
  33     font-size: 1.2em;
  34     color: var(--bs-body-color);
  35   }
  36
  37   .navbar-brand img {
  38     display: inline-block;
  39     margin-right: 5px;
  40     margin-top: -5px;
  41   }
  42
  43   .nav-item {
  44     white-space: nowrap;
  45   }
  46
  47   .page-title-section {
  48     display: none;
  49     text-align: center;
  50     padding: 1em;
  51   }
  52   @media (max-width: 600px) {
  53     .page-title-section {
  54       display: block;
  55     }
  56   }
  57
  58   .search-section {
  59     padding: 1em 30px;
  60     background-color: var(--bs-tertiary-bg);
  61     border-top: 2px solid var(--bs-border-color);
  62     border-bottom: 2px solid var(--bs-border-color);
  63   }
  64
  65 </style>
  66
  67 <header class="container-fluid">
  68   <nav class="navbar navbar-expand-sm navbar-light">
  69     <div class="container-fluid">
  70       <!-- Brand -->
  71       <div class="navbar-brand">
  72         <PageLink page={reverse_only ? 'reverse' : 'search'}>
  73           <img alt="logo" id="theme-logo" src="theme/logo.png" />
  74           <h1>{page_title}</h1>
  75         </PageLink>
  76       </div>
  77       <!-- Toggler (hamburger button) -->
  78       <button class="navbar-toggler"
  79               type="button"
  80               data-bs-toggle="collapse"
  81               data-bs-target="#navbarSupportedContent"
  82               aria-controls="navbarSupportedContent"
  83               aria-expanded="false"
  84               aria-label="Toggle navigation">
  85         <span class="navbar-toggler-icon"></span>
  86       </button>
  87       <div class="collapse navbar-collapse" id="navbarSupportedContent">
  88         <!-- Left-aligned links -->
  89         <ul class="navbar-nav me-auto">
  90           {#if !reverse_only}
  91             <li class="nav-item">
  92               <PageLink page="search"
  93                         extra_classes="nav-link {view === 'search' ? 'active' : ''}">
  94                 Search
  95               </PageLink>
  96             </li>
  97           {/if}
  98           <li class="nav-item">
  99             <ReverseLink lat={map_lat}
 100                          lon={map_lon}
 101                          extra_classes="nav-link {view === 'reverse' ? 'active' : ''}">
 102               Reverse
 103             </ReverseLink>
 104           </li>
 105           <li class="nav-item">
 106             <PageLink page="details"
 107                       extra_classes="nav-link {view === 'details' ? 'active' : ''}">
 108               Search By ID
 109             </PageLink>
 110           </li>
 111         </ul>
 112       </div>
 113       <!-- Right aligned links -->
 114       <ul class="navbar-nav">
 115         <li class="nav-item position-relative">
 116           <button class="btn nav-link dropdown-toggle" id="bd-theme" type="button"
 117                   data-bs-toggle="dropdown" aria-label="Toggle color theme">
 118             <span id="bd-theme-text">Color</span>
 119           </button>
 120           <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
 121             <li>
 122               <button type="button" class="dropdown-item" data-bs-theme-value="light">
 123                 Light
 124               </button>
 125             </li>
 126             <li>
 127               <button type="button" class="dropdown-item" data-bs-theme-value="dark">
 128                 Dark
 129               </button>
 130             </li>
 131             <li>
 132               <button type="button" class="dropdown-item" data-bs-theme-value="auto">
 133                 Auto
 134               </button>
 135             </li>
 136           </ul>
 137         </li>
 138         <li class="nav-item">
 139           <PageLink page="about"
 140                     extra_classes="nav-link {view === 'about' ? 'active' : ''}">
 141             About & Help
 142           </PageLink>
 143         </li>
 144       </ul>
 145     </div>
 146   </nav>
 147 </header>
 148 <section class="page-title-section">
 149   <h2>{view}</h2>
 150 </section>
 151 <section class="search-section">
 152   <slot/>
 153 </section>
 154 <Error/>
 155 <LastUpdated/>