---
import { Icon } from "astro-icon/components";

const { pathname } = Astro.url;

const year = new Date().getFullYear();
const currentPath =
  pathname.endsWith("/") && pathname.length > 1
    ? pathname.slice(0, -1)
    : pathname;
const navItems = [
  { href: "/", label: "Home", icon: "tabler:smart-home" },
  { href: "/work", label: "Work", icon: "tabler:code" },
  { href: "/photography", label: "Photography", icon: "tabler:photo" },
  { href: "/homelab", label: "Homelab", icon: "tabler:server-2" },
  {
    href: "/proglog",
    label: "Triathlon Logbook",
    icon: "tabler:book-2",
  },
  { href: "/blog", label: "Blog", icon: "tabler:writing-filled" },
];
---

<aside data-sidebar>
  <header>
    <h1>dnsc</h1>
  </header>
  <nav>
    <ul>
      {
        navItems.map(({ href, label, icon }) => (
          <li>
            <a href={href} class={currentPath === href ? "active" : ""}>
              <Icon size={18} name={icon} />
              {label}
            </a>
          </li>
        ))
      }
    </ul>
  </nav>
  <footer>
    © {year} • <a href="/now">Now</a> • <a href="/legal">Legal</a>
  </footer>
</aside>

<style>
  h1 {
    font-family: var(--font-fancy);
    font-size: 1.5rem;
    width: 100%;
    text-align: center;
    margin-bottom: 0;
  }

  nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  nav > ul > li > a.active,
  a:hover {
    background-color: var(--muted);
    border-radius: var(--radius-sm);
    font-weight: 600;
  }

  footer {
    font-size: 0.8rem;
    color: var(--muted-foreground);
  }

  footer a {
    text-decoration: none;
  }
</style>
