fix: navbar highlight

app/middleware/url-header.tsx

@@ -0,0 +1,12 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+export function middleware(req:NextRequest, res:NextResponse) {
+    const requestHeaders = new Headers(req.headers)
+    requestHeaders.set('x-path', req.nextUrl.pathname)
+  
+    return NextResponse.next({
+      request: {
+        headers: requestHeaders
+      }
+    })
+  }

components/NavigationBar.tsx

@@ -1,9 +1,8 @@
-
+import { createClient } from "@/utils/supabase/server";
-"use client";
-import { createClient } from "@/utils/supabase/client";
 import Link from "next/link";
+import { redirect, useRouter } from "next/navigation";
 import crypto from 'crypto';
-import { useRouter } from 'next/router';
+import { headers } from "next/headers";
 
 
 export default async function AuthButton() {
@@ -14,18 +13,19 @@ export default async function AuthButton() {
   } = await supabase.auth.getUser();
 
   const signOut = async () => {
+    "use server";
 
     const supabase = createClient();
     await supabase.auth.signOut();
-    window.location.href = "/gallery";
+    return redirect("/login");
   };
 
   
  
   // ...
 
-  const router = useRouter();
+  const heads = headers()
-  const currentPage = router.pathname;
+  const currentPage = heads.get('x-path')
   if(user){
     let email = user.email;
     if(email != null){