fix(nav): improve navigation for authorization routes

components/AuthInitializer.tsx

@@ -9,32 +9,41 @@ export default function AuthInitializer({
 }: {
   children: React.ReactNode;
 }) {
-  const { initializeAuth, isLoading, token } = useAuthStore();
+  const { initializeAuth, token, hydrated } = useAuthStore();
   const router = useRouter();
   const pathname = usePathname();
 
+  // 1️⃣ Run initialization once
   useEffect(() => {
-    const run = async () => {
-      await initializeAuth();
+    initializeAuth();
+  }, [initializeAuth]);
 
-      // Routing logic based on auth state
-      const publicPages = ["/", "/login", "/register"];
+  // 2️⃣ Run routing logic only after hydration
+  useEffect(() => {
+    if (!hydrated) return;
 
-      if (token) {
-        if (publicPages.includes(pathname)) {
-          router.replace("/home");
-        }
-      } else {
-        if (!publicPages.includes(pathname)) {
-          router.replace("/");
-        }
+    const publicPages = ["/", "/login", "/register"];
+
+    if (token) {
+      if (publicPages.includes(pathname)) {
+        router.replace("/home");
       }
-    };
+    } else {
+      if (!publicPages.includes(pathname)) {
+        router.replace("/login");
+      }
+    }
+  }, [pathname, token, hydrated, router]);
 
-    run();
-  }, [pathname, token, initializeAuth, router]);
-
-  if (isLoading) return <p>Loading...</p>;
+  // 3️⃣ Show loading until hydrated
+  if (!hydrated) {
+    return (
+      <div className="min-h-screen flex flex-col justify-center items-center gap-3">
+        <div className="animate-spin rounded-full h-20 w-20 border-b-2 border-blue-500"></div>
+        <p className="text-2xl font-semibold tracking-tighter">Loading...</p>
+      </div>
+    );
+  }
 
   return <>{children}</>;
 }

components/Header.tsx

@@ -46,9 +46,9 @@ const Header = ({
   const seconds = timeRemaining % 60;
 
   return (
-    <header className={styles.header}>
+    <header className="bg-[#113768] h-[100px] w-full pt-7 px-6 flex items-center justify-between sticky top-0 z-50">
       {displayUser && (
-        <div className={styles.profile}>
+        <div className="flex items-center gap-3">
           <Avatar className="bg-gray-200 w-10 h-10">
             <AvatarFallback className="flex items-center justify-center h-10 text-lg">
               {user?.username ? (
@@ -58,24 +58,26 @@ const Header = ({
               )}
             </AvatarFallback>
           </Avatar>
-          <span className={styles.text}>
+          <span className="text-md font-bold text-white">
             Hello, {user?.username ? user.username.split(" ")[0] : "User"}
           </span>
         </div>
       )}
 
       {displayTabTitle && (
-        <div className={styles.profile}>
-          <button onClick={handleBackClick} className={styles.iconButton}>
+        <div className="flex items-center gap-3">
+          <button onClick={handleBackClick} className="bg-none border-none p-1">
             <ChevronLeft size={24} color="white" />
           </button>
-          <span className={styles.text}>{displayTabTitle}</span>
+          <span className="text-md font-bold text-white">
+            {displayTabTitle}
+          </span>
         </div>
       )}
 
       {displaySubject && (
-        <div className={styles.profile}>
-          <span className={styles.text}>{displaySubject}</span>
+        <div className="flex items-center gap-3">
+          <span className="text-md font-bold text-white">{displaySubject}</span>
         </div>
       )}