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