use route group

src/components/activeLink.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { useSelectedLayoutSegment } from 'next/navigation';
+import { useSelectedLayoutSegments } from 'next/navigation';
 
 export const ActiveLink = ({
   href,
@@ -14,8 +14,8 @@ export const ActiveLink = ({
   activeClassName: string;
   children: React.ReactNode;
 }) => {
-  const segment = useSelectedLayoutSegment();
-  const isActive = href.includes(segment);
+  const segments = useSelectedLayoutSegments();
+  const isActive = href.includes(segments[1]);
 
   return (
     <Link href={href} className={`${className}` + ' ' + (isActive ? `${activeClassName}` : '')}>

src/components/appHeader/index.tsx

@@ -8,15 +8,13 @@ const EventCollector = dynamic(() => import('@components/eventCollector'), {
   ssr: false,
 });
 
-export default function AppHeader() {
+export default function AppHeader({ collector }: { collector: boolean }) {
   return (
     <div data-tauri-drag-region className="flex h-full w-full flex-1 items-center px-2">
       <AppActions />
       <div data-tauri-drag-region className="flex h-full w-full items-center justify-between">
         <div className="flex h-full items-center divide-x divide-zinc-900 px-4 pt-px"></div>
-        <div>
-          <EventCollector />
-        </div>
+        <div>{collector && <EventCollector />}</div>
       </div>
     </div>
   );