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
   6   import { page } from '../lib/stores.js';
   7
   8   $: view = $page.tab;
   9 </script>
  10
  11 <style>
  12   .navbar-brand :global(a:hover) {
  13     text-decoration: none;
  14   }
  15
  16   .navbar-brand h1 {
  17     display: inline;
  18     font-size: 1.2em;
  19     color: #333;
  20   }
  21
  22   .navbar-brand img {
  23     display: inline-block;
  24     margin-right: 5px;
  25     margin-top: -5px;
  26   }
  27
  28   .nav-item {
  29     white-space: nowrap;
  30   }
  31
  32   .dropdown-menu { /* need to be above map markers */
  33     z-index: 1005;
  34   }
  35
  36   .search-section {
  37     padding: 1em 30px;
  38     background-color: #f5f5f5;
  39     border-top: 2px solid #ddd;
  40     border-bottom: 2px solid #ddd;
  41   }
  42 </style>
  43
  44 <header class="container-fluid">
  45   <nav class="navbar navbar-expand-sm navbar-light">
  46     <div class="navbar-brand">
  47       <PageLink page="search">
  48         <img alt="logo" src="images/osm_logo.120px.png" width="30" height="30"/>
  49         <h1>Nominatim</h1>
  50       </PageLink>
  51     </div>
  52     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  53       <span class="navbar-toggler-icon"></span>
  54     </button>
  55     <div class="collapse navbar-collapse" id="navbarSupportedContent">
  56       <ul class="navbar-nav mr-auto">
  57         <li class="nav-item {view === 'search' ? 'active' : ''}">
  58           <PageLink page="search" extra_classes="nav-link ">Search</PageLink>
  59         </li>
  60         <li class="nav-item {view === 'reverse' ? 'active' : ''}">
  61           <ReverseLink extra_classes="nav-link ">Reverse</ReverseLink>
  62         </li>
  63         <li class="nav-item {view === 'details' ? 'active' : ''}">
  64           <PageLink page="details" extra_classes="nav-link ">Search By ID</PageLink>
  65         </li>
  66       </ul>
  67       <ul class="navbar-nav">
  68         <li class="nav-item dropdown">
  69           <a class="nav-link dropdown-toggle" href="#open-about-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  70             About &amp; Help
  71           </a>
  72           <div class="dropdown-menu dropdown-menu-right">
  73             <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Overview/" target="_blank">API Reference</a>
  74             <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Faq/" target="_blank">FAQ</a>
  75             <a class="dropdown-item" href="https://help.openstreetmap.org/tags/nominatim/">OpenStreetMap Help</a>
  76             <a class="dropdown-item" href="https://github.com/osm-search/Nominatim">Nominatim on Github</a>
  77             <a class="dropdown-item" href="https://github.com/osm-search/nominatim-ui">This frontend on Github</a>
  78             <div class="dropdown-divider"></div>
  79             <a class="dropdown-item" href="#report-issue" data-toggle="modal" data-target="#report-modal">Report problem with results</a>
  80           </div>
  81         </li>
  82       </ul>
  83     </div>
  84   </nav>
  85 </header>
  86 <section class="search-section">
  87   <slot/>
  88 </section>
  89 <LastUpdated/>