refactor: deep link for faq

src/features/nav/ResponsiveNav.tsx

@@ -20,7 +20,7 @@ export function ResponsiveNav({
       className={`@container/nav grow grid grid-cols-1 grid-rows-[auto_1fr] md:grid-rows-1 md:grid-cols-[10rem_1fr] ${className}`}
     >
       {/* Sidebar */}
-      <aside className={`bg-base-300 md:p-4 md:block ${navigationClassName}`}>{navigation}</aside>
+      <aside className={`bg-base-100 md:p-4 md:block ${navigationClassName}`}>{navigation}</aside>
 
       {/* Main content */}
       <div className={`p-4 grow ${contentClassName}`}>{children}</div>

src/features/nav/TabNavLink.tsx

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+import type { RefAttributes } from 'react';
+import { NavLink, type NavLinkProps } from 'react-router';
+
+const tabClassNames = ({ isActive }: { isActive: boolean }) =>
+  classNames(
+    'link inline-flex text-nowrap mb-[-2px] no-underline w-full',
+    'border-b-2 md:border-b-0 md:border-r-2',
+    'tab md:grow',
+    {
+      'tab-active bg-accent/10 border-accent': isActive,
+    },
+  );
+
+export function TabNavLink({ children, ...props }: NavLinkProps & RefAttributes<HTMLAnchorElement>) {
+  return (
+    <NavLink className={tabClassNames} role="tab" {...props}>
+      {children}
+    </NavLink>
+  );
+}