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
  12   let map_lat;
  13   let map_lon;
  14
  15   map_store.subscribe(map => {
  16     if (!map) return;
  17
  18     map.on('move', function () {
  19       map_lat = map.getCenter().lat;
  20       map_lon = map.getCenter().lng;
  21     });
  22   });
  23 </script>
  24
  25 <style>
  26   .navbar-brand :global(a:hover) {
  27     text-decoration: none;
  28   }
  29
  30   .navbar-brand h1 {
  31     display: inline;
  32     font-size: 1.2em;
  33     color: #333;
  34   }
  35
  36   .navbar-brand img {
  37     display: inline-block;
  38     margin-right: 5px;
  39     margin-top: -5px;
  40   }
  41
  42   .nav-item {
  43     white-space: nowrap;
  44   }
  45
  46   .page-title-section {
  47     display: none;
  48     text-align: center;
  49     padding: 1em;
  50   }
  51   @media (max-width: 600px) {
  52     .page-title-section {
  53       display: block;
  54     }
  55   }
  56
  57   .search-section {
  58     padding: 1em 30px;
  59     background-color: #f5f5f5;
  60     border-top: 2px solid #ddd;
  61     border-bottom: 2px solid #ddd;
  62   }
  63 </style>
  64
  65 <header class="container-fluid">
  66   <nav class="navbar navbar-expand-sm navbar-light">
  67     <!-- Brand -->
  68     <div class="navbar-brand">
  69       <PageLink page="search">
  70         <img alt="logo" id="theme-logo" src="theme/logo.png" />
  71         <h1>{page_title}</h1>
  72       </PageLink>
  73     </div>
  74     <!-- Toggler (hamburger button) -->
  75     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  76       <span class="navbar-toggler-icon"></span>
  77     </button>
  78     <div class="collapse navbar-collapse" id="navbarSupportedContent">
  79       <!-- Left-aligned links -->
  80       <ul class="navbar-nav mr-auto">
  81         <li class="nav-item {view === 'search' ? 'active' : ''}">
  82           <PageLink page="search" extra_classes="nav-link">Search</PageLink>
  83         </li>
  84         <li class="nav-item {view === 'reverse' ? 'active' : ''}">
  85           <ReverseLink lat={map_lat} lon={map_lon} extra_classes="nav-link">Reverse</ReverseLink>
  86         </li>
  87         <li class="nav-item {view === 'details' ? 'active' : ''}">
  88           <PageLink page="details" extra_classes="nav-link">Search By ID</PageLink>
  89         </li>
  90       </ul>
  91     </div>
  92     <!-- Right aligned links -->
  93     <ul class="navbar-nav">
  94       <li class="nav-item {view === 'about' ? 'active' : ''}">
  95         <PageLink page="about" extra_classes="nav-link">About & Help</PageLink>
  96       </li>
  97     </ul>
  98   </nav>
  99 </header>
 100 <section class="page-title-section">
 101   <h2>{view}</h2>
 102 </section>
 103 <section class="search-section">
 104   <slot/>
 105 </section>
 106 <Error/>
 107 <LastUpdated/>