]> git.openstreetmap.org Git - nominatim-ui.git/blob - src/components/Header.svelte
Merge remote-tracking branch 'upstream/master'
[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   import Error from './Error.svelte';
6
7   import { page } from '../lib/stores.js';
8
9   $: view = $page.tab;
10   $: page_title = Nominatim_Config.Page_Title;
11 </script>
12
13 <style>
14   .navbar-brand :global(a:hover) {
15     text-decoration: none;
16   }
17
18   .navbar-brand h1 {
19     display: inline;
20     font-size: 1.2em;
21     color: #333;
22   }
23
24   .navbar-brand img {
25     display: inline-block;
26     margin-right: 5px;
27     margin-top: -5px;
28   }
29
30   .nav-item {
31     white-space: nowrap;
32   }
33
34   .page-title-section {
35     display: none;
36     text-align: center;
37     padding: 1em;
38   }
39   @media (max-width: 600px) {
40     .page-title-section {
41       display: block;
42     }
43   }
44
45   .search-section {
46     padding: 1em 30px;
47     background-color: #f5f5f5;
48     border-top: 2px solid #ddd;
49     border-bottom: 2px solid #ddd;
50   }
51 </style>
52
53 <header class="container-fluid">
54   <nav class="navbar navbar-expand-sm navbar-light">
55     <!-- Brand -->
56     <div class="navbar-brand">
57       <PageLink page="search">
58         <img alt="logo" id="theme-logo" src="theme/logo.png" />
59         <h1>{page_title}</h1>
60       </PageLink>
61     </div>
62     <!-- Toggler (hamburger button) -->
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       <!-- Left-aligned links -->
68       <ul class="navbar-nav mr-auto">
69         <li class="nav-item {view === 'search' ? 'active' : ''}">
70           <PageLink page="search" extra_classes="nav-link ">Search</PageLink>
71         </li>
72         <li class="nav-item {view === 'reverse' ? 'active' : ''}">
73           <ReverseLink extra_classes="nav-link ">Reverse</ReverseLink>
74         </li>
75         <li class="nav-item {view === 'details' ? 'active' : ''}">
76           <PageLink page="details" extra_classes="nav-link ">Search By ID</PageLink>
77         </li>
78       </ul>
79     </div>
80     <!-- Right aligned links -->
81     <ul class="navbar-nav">
82       <li class="nav-item {view === 'about' ? 'active' : ''}">
83         <PageLink page="about" extra_classes="nav-link ">About & Help</PageLink>
84       </li>
85     </ul>
86   </nav>
87 </header>
88 <section class="page-title-section">
89   <h2>{view}</h2>
90 </section>
91 <section class="search-section">
92   <slot/>
93 </section>
94 <Error/>
95 <LastUpdated/>