u/13character5

Dev Environment

Post-Build

---
import data from "../metadata/navbar.json";
import lodash from "lodash";
const { pathname } = Astro.url;
const { logo = "", powerButton = "", settingsButton = "" } = Astro.props;
//TODO: astro is a fucking dumbass & won't run the logic to make a button active when building website
---

<div class="navbarContainer">
  <nav>
    <img src={logo.src} />
    {
      pathname === "/home" ? ( //fails during build
        <div class="navbarButton single active">Home</div>
      ) : (
        <a href="/home" class="navbarButton single">
          Home
        </a>
      )
    }
    {
      Object.entries(data).map(([category, items]) => (
        <>
          <span class="CategoryName">{category}</span>
          <>
            {items.map((item) => {
              const href = `/${lodash.camelCase(category)}/${item.href}`;
              return pathname === href ? ( //fails during build
                <div class="navbarButton active">{item.name}</div>
              ) : (
                <a href={href} class="navbarButton">
                  {item.name}
                </a>
              );
            })}
          </>
        </>
      ))
    }
    <a href="/">
      <img src={powerButton.src} />
    </a>
    <a href="/">
      <img src={settingsButton.src} />
    </a>
  </nav>
</div>