src-routes-layout.tsx

import {
  component$,
  Slot,
  useStyles$,
} from "@builder.io/qwik";
import { Link, routeLoader$, useLocation } from "@builder.io/qwik-city";
import type { RequestHandler, LinkProps } from "@builder.io/qwik-city";

import Header from "~/components/starter/header/header";
import Footer from "~/components/starter/footer/footer";

import styles from "./styles.css?inline";

export const onGet: RequestHandler = async ({ cacheControl }) => {
  // Control caching for this request for best performance and to reduce hosting costs:
  // https://qwik.builder.io/docs/caching/
  cacheControl({
    // Always serve a cached response by default, up to a week stale
    staleWhileRevalidate: 60 * 60 * 24 * 7,
    // Max once every 5 seconds, revalidate on the server to get a fresh version of this page
    maxAge: 5,
  });
};

export const useServerTimeLoader = routeLoader$(() => {
  return {
    date: new Date().toISOString(),
  };
});
export const NavLink = component$<LinkProps>((props) => {
  useStyles$(`
  .text-red {
    color: red;
  }
  .text-blue {
    color: blue;
  }
`);
  const location = useLocation();
  const pathname = location.url.pathname;
  return (
    <>
      <li>
        <Link
          href={props.href}
          class={pathname == props.href ? "text-red" : "text-blue"}
        >
          <Slot />
        </Link>
      </li>
    </>
  );
});

export default component$(() => {
  useStyles$(styles);
  return (
    <>
      <Header />
      <ul>
        <NavLink href="/">Index</NavLink>
        <NavLink href="/demo/flower/">flowers</NavLink>
        <NavLink href="/demo/todolist/">todolist</NavLink>
      </ul>
      <main>
        <Slot />
      </main>
      <Footer />
    </>
  );
});