]> git.openstreetmap.org Git - nominatim-ui.git/blob - src/components/Header.svelte
9178267f01482a6c5d48b951131cea499f46693b
[nominatim-ui.git] / 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   .page-title-section {
37     display: none;
38     text-align: center;
39     padding: 1em;
40   }
41   @media (max-width: 600px) {
42     .page-title-section {
43       display: block;
44     }
45   }
46
47   .search-section {
48     padding: 1em 30px;
49     background-color: #f5f5f5;
50     border-top: 2px solid #ddd;
51     border-bottom: 2px solid #ddd;
52   }
53 </style>
54
55 <header class="container-fluid">
56   <nav class="navbar navbar-expand-sm navbar-light">
57     <div class="navbar-brand">
58       <PageLink page="search">
59         <img alt="logo" src="images/osm_logo.120px.png" width="30" height="30"/>
60         <h1>Nominatim</h1>
61       </PageLink>
62     </div>
63     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
64       <span class="navbar-toggler-icon"></span>
65     </button>
66     <div class="collapse navbar-collapse" id="navbarSupportedContent">
67       <ul class="navbar-nav mr-auto">
68         <li class="nav-item {view === 'search' ? 'active' : ''}">
69           <PageLink page="search" extra_classes="nav-link ">Search</PageLink>
70         </li>
71         <li class="nav-item {view === 'reverse' ? 'active' : ''}">
72           <ReverseLink extra_classes="nav-link ">Reverse</ReverseLink>
73         </li>
74         <li class="nav-item {view === 'details' ? 'active' : ''}">
75           <PageLink page="details" extra_classes="nav-link ">Search By ID</PageLink>
76         </li>
77       </ul>
78       <ul class="navbar-nav">
79         <li class="nav-item dropdown">
80           <a class="nav-link dropdown-toggle" href="#open-about-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
81             About &amp; Help
82           </a>
83           <div class="dropdown-menu dropdown-menu-right">
84             <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Overview/" target="_blank">API Reference</a>
85             <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Faq/" target="_blank">FAQ</a>
86             <a class="dropdown-item" href="https://help.openstreetmap.org/tags/nominatim/">OpenStreetMap Help</a>
87             <a class="dropdown-item" href="https://github.com/osm-search/Nominatim">Nominatim on Github</a>
88             <a class="dropdown-item" href="https://github.com/osm-search/nominatim-ui">This frontend on Github</a>
89             <div class="dropdown-divider"></div>
90             <a class="dropdown-item" href="#report-issue" data-toggle="modal" data-target="#report-modal">Report problem with results</a>
91           </div>
92         </li>
93       </ul>
94     </div>
95   </nav>
96 </header>
97 <section class="page-title-section">
98   <h2>{view}</h2>
99 </section>
100 <section class="search-section">
101   <slot/>
102 </section>
103 <LastUpdated/>