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