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