import { component$, useStyles$ } from '@builder.io/qwik';
import { useContent, Link, useLocation } from '@builder.io/qwik-city';
import styles from './menu.css?inline';

export default component$(() => {
  useStyles$(styles);

  const { menu } = useContent();
  const loc = useLocation();

  return (
    <aside class="menu">
      {menu
        ? menu.items?.map((item) => (
            <>
              <h5>{item.text}</h5>
              <ul>
                {item.items?.map((item) => (
                  <li>
                    <Link
                      href={item.href}
                      class={{
                        'is-active': loc.pathname === item.href,
                      }}
                    >
                      {item.text}
                    </Link>
                  </li>
                ))}
              </ul>
            </>
          ))
        : null}
    </aside>
  );
});