atlasanalyticslab.github.io/_includes/header.html at a1174cef1cdf0e4f8ef8c9eb2c57a29d58bf4d6e · AtlasAnalyticsLab/atlasanalyticslab.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
<!--
  Header Component (header.html)

  Purpose:
    Primary site navigation bar with lab branding, page links, and theme toggle.

  Features:
    - Responsive navbar with mobile hamburger menu
    - Fixed-top positioning with shadow
    - Theme toggle with Auto/Dark/Light modes
    - Persistent theme preference via localStorage

  Navigation Pages:
    - Home, News, Team, Openings, Publications, Projects, Funding, Lab Life, Contact

  Dependencies:
    - Bootstrap 5 navbar component
    - theme-toggle.js for theme cycling
-->
<!-- Primary site navigation with lab branding, page links, and theme toggle. -->
<nav class="navbar navbar-expand-lg fixed-top shadow-sm">
  <div class="container-fluid">
    <a class="navbar-brand d-flex align-items-center" href="{{ site.url }}{{ site.baseurl }}/">
      <img src="{{ site.url }}{{ site.baseurl }}/images/logopic/group_logo_medium.png"
           alt="Atlas Analytics Lab logo"
           class="me-2">
      <span>Atlas Analytics Lab</span>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
            aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="mainNavbar">
      <!-- Top-level navigation links surfaced in the header. -->
      <ul class="navbar-nav mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link" href="{{ site.url }}{{ site.baseurl }}/">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="{{ site.url }}{{ site.baseurl }}/allnews.html">News</a></li>
        <li class="nav-item"><a class="nav-link" href="{{ site.url }}{{ site.baseurl }}/team/">Team</a></li>
        <li class="nav-item"><a class="nav-link" href="{{ site.url }}{{ site.baseurl }}/openings">Openings</a></li>
        <li class="nav-item"><a class="nav-link" href="{{ site.url }}{{ site.baseurl }}/publications/">Publications</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle dropdown-toggle-no-caret" href="#" id="projectsDropdown" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">
            Projects
          </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="projectsDropdown">
            <li>
              <a class="dropdown-item" href="https://atlasanalyticslab.github.io/AtlasPatch/" target="_blank"
                 rel="noopener noreferrer">
                AtlasPatch
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item"><a class="nav-link" href="{{ site.url }}{{ site.baseurl }}/funding/">Funding</a></li>
        <li class="nav-item"><a class="nav-link" href="{{ site.url }}{{ site.baseurl }}/gallery/">Lab Life</a></li>
        <li class="nav-item"><a class="nav-link" href="{{ site.url }}{{ site.baseurl }}/contact/">Contact</a></li>
      </ul>
      <!-- Theme toggle cycles Auto → Dark → Light and persists the user's preference. -->
      <div class="d-lg-flex align-items-center ms-lg-3 mt-3 mt-lg-0">
        <button class="btn btn-outline-secondary w-100 theme-toggle" type="button" data-theme-toggle aria-live="polite">
          <span class="theme-toggle-icon" data-theme-icon aria-hidden="true"></span>
          <span class="theme-toggle-label">Auto</span>
        </button>
      </div>
    </div>
  </div>
</nav>