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