remove isLoggedIn prop from NavColumn and Header

components/Header/index.tsx

@@ -1,19 +1,25 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import CONFIG from '@/lib/configs';
+import { useAuth } from '@/utils/AuthProvider';
 import { useProfile } from '@/utils/ProfileProvider';
 import Icon from '../Icon';
 import { Container, HamburgerButton } from './styles';
 
 interface HeaderProps {
   toggleNavColumn: () => void;
-  isLoggedIn: boolean;
 }
 
-export default function Header({ toggleNavColumn, isLoggedIn }: HeaderProps) {
+export default function Header({ toggleNavColumn }: HeaderProps) {
   const currentPath = usePathname();
   const { profileReady, profileData } = useProfile();
+  const { userId } = useAuth();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  useEffect(() => {
+    setIsLoggedIn(userId !== null);
+  }, [userId]);
 
   const onNavColumnClick = () => {
     toggleNavColumn();

components/NavColumn/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import CONFIG from '@/lib/configs';
@@ -32,7 +32,6 @@ import {
 interface NavColumnProps {
   isOpen: boolean;
   onClose: () => void;
-  isLoggedIn: boolean;
 }
 
 type NavLink = {
@@ -50,26 +49,23 @@ const navLinks: NavLink[] = [
   },
 ];
 
-export default function NavColumn({
-  isOpen,
-  onClose,
-  isLoggedIn,
-}: NavColumnProps) {
+export default function NavColumn({ isOpen, onClose }: NavColumnProps) {
   const currentPath = usePathname();
-  const { signOut } = useAuth();
+  const { signOut, userId } = useAuth();
   const router = useRouter();
   const { profileData, profileReady } = useProfile();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  useEffect(() => {
+    setIsLoggedIn(userId !== null);
+  }, [userId]);
 
   const handleSignOut = () => {
     router.push(CONFIG.login);
     onClose();
     signOut();
   };
 
-  useEffect(() => {
-    console.log('profileData', profileData);
-  }, [profileData]);
-
   return (
     <>
       {isOpen && (

components/NavSystem.tsx

@@ -15,11 +15,10 @@ export default function NavSystem() {
 
   return (
     <>
-      <Header toggleNavColumn={toggleNavColumn} isLoggedIn={userId !== null} />
+      <Header toggleNavColumn={toggleNavColumn} />
       <NavColumn
         isOpen={isNavColumnOpen}
         onClose={() => setIsNavColumnOpen(false)}
-        isLoggedIn={userId !== null}
       />
     </>
   );