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