Header.svelte raw

   1  <script>
   2      import { createEventDispatcher } from 'svelte';
   3  
   4      const dispatch = createEventDispatcher();
   5  
   6      export let currentPage = 'dashboard';
   7      export let isLoggedIn = false;
   8      export let userPubkey = '';
   9  
  10      function navigate(page) {
  11          dispatch('navigate', page);
  12      }
  13  
  14      function formatPubkey(pk) {
  15          if (!pk) return '';
  16          return pk.slice(0, 8) + '...' + pk.slice(-4);
  17      }
  18  </script>
  19  
  20  <header>
  21      <div class="header-content">
  22          <h1>ORLY Launcher</h1>
  23  
  24          {#if isLoggedIn}
  25              <nav>
  26                  <button
  27                      class="nav-btn"
  28                      class:active={currentPage === 'dashboard'}
  29                      on:click={() => navigate('dashboard')}
  30                  >
  31                      Dashboard
  32                  </button>
  33                  <button
  34                      class="nav-btn"
  35                      class:active={currentPage === 'config'}
  36                      on:click={() => navigate('config')}
  37                  >
  38                      Config
  39                  </button>
  40                  <button
  41                      class="nav-btn"
  42                      class:active={currentPage === 'update'}
  43                      on:click={() => navigate('update')}
  44                  >
  45                      Update
  46                  </button>
  47              </nav>
  48  
  49              <div class="user-section">
  50                  <span class="pubkey">{formatPubkey(userPubkey)}</span>
  51                  <button class="logout-btn" on:click={() => dispatch('logout')}>
  52                      Logout
  53                  </button>
  54              </div>
  55          {:else}
  56              <button class="login-header-btn" on:click={() => dispatch('login')}>
  57                  Login
  58              </button>
  59          {/if}
  60      </div>
  61  </header>
  62  
  63  <style>
  64      header {
  65          background: var(--card-bg);
  66          border-bottom: 1px solid var(--border-color);
  67          padding: 0 20px;
  68      }
  69  
  70      .header-content {
  71          max-width: 1200px;
  72          margin: 0 auto;
  73          display: flex;
  74          align-items: center;
  75          justify-content: space-between;
  76          height: 60px;
  77      }
  78  
  79      h1 {
  80          font-size: 1.25rem;
  81          font-weight: 600;
  82          color: var(--text-color);
  83      }
  84  
  85      nav {
  86          display: flex;
  87          gap: 4px;
  88      }
  89  
  90      .nav-btn {
  91          padding: 8px 16px;
  92          background: none;
  93          border: none;
  94          border-radius: 4px;
  95          color: var(--muted-color);
  96          cursor: pointer;
  97          font-size: 0.9rem;
  98      }
  99  
 100      .nav-btn:hover {
 101          background: var(--border-color);
 102          color: var(--text-color);
 103      }
 104  
 105      .nav-btn.active {
 106          background: var(--primary);
 107          color: white;
 108      }
 109  
 110      .user-section {
 111          display: flex;
 112          align-items: center;
 113          gap: 12px;
 114      }
 115  
 116      .pubkey {
 117          font-family: monospace;
 118          font-size: 0.85rem;
 119          color: var(--muted-color);
 120      }
 121  
 122      .logout-btn,
 123      .login-header-btn {
 124          padding: 6px 14px;
 125          font-size: 0.85rem;
 126          border-radius: 4px;
 127          cursor: pointer;
 128      }
 129  
 130      .logout-btn {
 131          background: none;
 132          border: 1px solid var(--border-color);
 133          color: var(--text-color);
 134      }
 135  
 136      .logout-btn:hover {
 137          background: var(--border-color);
 138      }
 139  
 140      .login-header-btn {
 141          background: var(--primary);
 142          border: none;
 143          color: white;
 144      }
 145  
 146      .login-header-btn:hover {
 147          background: var(--primary-hover);
 148      }
 149  </style>
 150