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