diff --git a/app/Header.tsx b/app/Header.tsx index 8c81b34d..36bff855 100644 --- a/app/Header.tsx +++ b/app/Header.tsx @@ -1,21 +1,41 @@ "use client"; +import { useState, useEffect } from "react"; import Link from "next/link"; -import {signOut, useSession} from "next-auth/react"; +import { signOut, useSession } from "next-auth/react"; +import { FaHome } from "react-icons/fa"; import ThemeToggle from "@/lib/client/theme"; export default function Header() { - const {data: session} = useSession(); + const { data: session } = useSession(); + const [isSmallScreen, setIsSmallScreen] = useState(false); - console.log(session); + useEffect(() => { + const checkScreenSize = () => { + setIsSmallScreen(window.innerWidth < 640); // Tailwind's 'sm' breakpoint is 640px + }; + + // Initial check + checkScreenSize(); + + // Add event listener for window resize + window.addEventListener('resize', checkScreenSize); + + // Clean up the event listener when the component unmounts + return () => window.removeEventListener('resize', checkScreenSize); + }, []); return (