]> git.openstreetmap.org Git - nominatim-ui.git/blob - src/components/Header.svelte
allow theming (#84)
[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   import { get_config_value } from '../lib/config_reader.js';
8
9   $: view = $page.tab;
10 </script>
11
12 <style>
13   .navbar-brand :global(a:hover) {
14     text-decoration: none;
15   }
16
17   .navbar-brand h1 {
18     display: inline;
19     font-size: 1.2em;
20     color: #333;
21   }
22
23   .navbar-brand img {
24     display: inline-block;
25     margin-right: 5px;
26     margin-top: -5px;
27   }
28
29   .nav-item {
30     white-space: nowrap;
31   }
32
33   .page-title-section {
34     display: none;
35     text-align: center;
36     padding: 1em;
37   }
38   @media (max-width: 600px) {
39     .page-title-section {
40       display: block;
41     }
42   }
43
44   .search-section {
45     padding: 1em 30px;
46     background-color: #f5f5f5;
47     border-top: 2px solid #ddd;
48     border-bottom: 2px solid #ddd;
49   }
50 </style>
51
52 <header class="container-fluid">
53   <nav class="navbar navbar-expand-sm navbar-light">
54     <!-- Brand -->
55     <div class="navbar-brand">
56       <PageLink page="search">
57         <img alt="logo" id="theme-logo" src="theme/logo.png" />
58         <h1>{get_config_value('Page_Title')}</h1>
59       </PageLink>
60     </div>
61     <!-- Toggler (hamburger button) -->
62     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
63       <span class="navbar-toggler-icon"></span>
64     </button>
65     <div class="collapse navbar-collapse" id="navbarSupportedContent">
66       <!-- Left-aligned links -->
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     </div>
79     <!-- Right aligned links -->
80     <ul class="navbar-nav">
81       <li class="nav-item {view === 'about' ? 'active' : ''}">
82         <PageLink page="about" extra_classes="nav-link ">About & Help</PageLink>
83       </li>
84     </ul>
85   </nav>
86 </header>
87 <section class="page-title-section">
88   <h2>{view}</h2>
89 </section>
90 <section class="search-section">
91   <slot/>
92 </section>
93 <LastUpdated/>