tutorial-git/astro-site/src/components/Header.astro at 4eca32eae5c0adf25ff167e32dd658ea71444585 · braboj/tutorial-git · 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
---
import site from "../data/site.json";
const { currentPath = "/" } = Astro.props;
const base = import.meta.env.BASE_URL;
---

<div class="site-header-bar">
  <header class="site-header">
    <a href={base} class="site-header-title">
      <svg class="site-header-icon" viewBox="0 0 92 92" width="22" height="22" fill="currentColor" aria-hidden="true">
        <path d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V35.71a7.04 7.04 0 0 1-3.82-9.234L29.242 16.07 1.73 43.583a5.918 5.918 0 0 0 0 8.37l40.121 40.118a5.916 5.916 0 0 0 8.369 0l39.936-39.934a5.925 5.925 0 0 0 0-8.372"/>
      </svg>
      {site.title}
    </a>
    <div class="site-header-actions">
      <a href={site.repo} class="repo-link" target="_blank" rel="noopener noreferrer" aria-label="GitHub repository">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true">
          <path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"/>
        </svg>
      </a>
      <button class="theme-toggle" id="theme-toggle" aria-label="Switch to dark theme">
        <svg class="icon-light" viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true">
          <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
        </svg>
        <svg class="icon-dark" viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true">
          <path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/>
        </svg>
      </button>
    </div>
  </header>
</div>

<div class="site-tabs-bar" style="overflow:hidden">
  <button class="nav-toggle" id="nav-toggle" aria-label="Open navigation menu" aria-expanded="false">
    <svg class="nav-toggle-icon" viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
    </svg>
  </button>
  <nav class="site-tabs" id="site-tabs" aria-label="Main navigation">
    {site.tabs.map((tab) => {
      const tabSection = tab.href.split("/").filter(Boolean)[0];
      const currentSection = currentPath.split("/").filter(Boolean)[0];
      const isActive = tab.href === "/" ? currentPath === "/" : tabSection === currentSection;
      const href = tab.href === "/" ? base : `${base}${tab.href.slice(1)}`;
      return (
        <a
          href={href}
          class:list={[{ active: isActive }]}
          aria-current={isActive ? "page" : undefined}
        >
          {tab.label}
        </a>
      );
    })}
  </nav>
</div>

<script is:inline>
  const toggle = document.getElementById("theme-toggle");
  const saved = localStorage.getItem("theme") || "light";
  document.documentElement.setAttribute("data-theme", saved);
  updateToggleLabel(saved);

  toggle.addEventListener("click", () => {
    const current = document.documentElement.getAttribute("data-theme");
    const next = current === "light" ? "dark" : "light";
    document.documentElement.setAttribute("data-theme", next);
    localStorage.setItem("theme", next);
    updateToggleLabel(next);
  });

  function updateToggleLabel(theme) {
    toggle.setAttribute("aria-label",
      theme === "light" ? "Switch to dark theme" : "Switch to light theme"
    );
  }

  const navToggle = document.getElementById("nav-toggle");
  const siteTabs = document.getElementById("site-tabs");

  navToggle.addEventListener("click", () => {
    const expanded = navToggle.getAttribute("aria-expanded") === "true";
    navToggle.setAttribute("aria-expanded", String(!expanded));
    siteTabs.classList.toggle("open");
  });
</script>