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/>