From e0b9d43c0d4688b0cb3e22edb2c2db12365f04b0 Mon Sep 17 00:00:00 2001 From: MartinBraquet Date: Wed, 30 Jul 2025 14:00:54 +0200 Subject: [PATCH] Replace logo with home button for narrow width --- app/Header.tsx | 30 +++++++++++++++++++++++++----- package-lock.json | 1 - 2 files changed, 25 insertions(+), 6 deletions(-) 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 (