LuaLS.github.io/src/components/layout/Header.astro at main · LuaLS/LuaLS.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
---
import {
  faBookOpen,
  faHouse,
  faSearch,
} from "@fortawesome/free-solid-svg-icons";
import ExternalLink from "../common/ExternalLink.astro";
import Icon from "../common/Icon.astro";
import Tooltip from "../common/Tooltip.astro";
import { faGithub } from "@fortawesome/free-brands-svg-icons";

export interface Props {
  class?: string;
}

const { class: className } = Astro.props;
---

<header class={className}>
  <nav>
    <a href="/" class="home" aria-label="Home">
      <Tooltip content="Home">
        <Icon icon={faHouse} />
      </Tooltip>
    </a>
    <div>
      <a href="/wiki/" aria-label="Wiki">
        <Tooltip content="Wiki">
          <Icon icon={faBookOpen} />
        </Tooltip>
      </a>
    </div>
    <Tooltip
      content="<div align='center'>Search<br/><kbd>/</kbd></div>"
      allowHTML
    >
      <button
        class="site-search-icon"
        aria-keyshortcuts="/"
        aria-label="Search"
      >
        <Icon icon={faSearch} />
      </button>
    </Tooltip>
    <span class="github">
      <ExternalLink
        url="https://github.com/luals/lua-language-server"
        noIcon
      >
        <Tooltip content="View Project on GitHub">
          <Icon icon={faGithub} />
        </Tooltip>
      </ExternalLink>
    </span>
  </nav>
</header>

<style lang="scss">
  :global(html) {
    scroll-padding-top: 4em;
  }

  header {
    position: fixed;
    top: 0px;
    font-size: 1.3em;
    background-color: #0f2e4b;
    width: 100%;
    height: 3.5rem;
    padding: 0.5rem;
    z-index: 20;
    box-sizing: border-box;

    :global(+ *) {
      margin-top: 3.5em;
    }

    nav {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(4, 2em);
      justify-content: space-between;
      align-items: center;
      justify-items: center;

      & > div {
        width: 100%;
        display: inline-flex;
        justify-content: center;
        margin: auto;
      }

      a {
        color: white;
      }

      button {
        border: none;
        background: none;
        color: white;
        font-size: 1em;
      }

      .github {
        font-size: 1.2em;
        --link-color: white;
      }
    }
  }
</style>