website/src/components/Navbar.astro at 3e8bfadfe4683766a83aed2b106bcec886a97dea · cppsea/website · 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
---
const { pathname } = Astro.url;

import { Image } from 'astro:assets';
import logo from '../../public/images/sealogo.png';

const listings = [
  {
    name: 'events',
    src: '/events',
    newTab: false,
  },
  {
    name: 'projects',
    src: '/projects',
    newTab: false,
  },
  {
    name: 'about',
    src: '/about',
    newTab: false,
  },
  {
    name: 'join',
    src: 'https://forms.gle/4HRGjgPjaLXfdzDK7',
    newTab: true,
  },
];
---

<nav>
  <div class='left'>
    <a href='/'>
      <Image
        id='sea-logo'
        src={logo}
        alt='Software Engineering Association (SEA) at Cal Poly Pomona'
      />
    </a>
  </div>

  <ul class='right'>
    {
      listings.map((item) => (
        <li>
          <a
            href={item.src}
            target={item.newTab ? '_blank' : ''}
            rel={item.newTab ? 'noopener' : ''}
            id={pathname.includes(item.src) ? 'active' : ''}
          >
            {item.name}
          </a>
        </li>
      ))
    }
  </ul>
</nav>