I'm trying to create a header as a server component.

import { logout } from '@/app/login/actions';
import { createClient } from '@/app/utils/supabase/server';
import { HStack, Stack } from '@chakra-ui/react';
import Link from 'next/link';

export default async function NewHeader() {
    const supabase = createClient();

    const { data, error } = await supabase.auth.getUser();
    return (
        <Stack direction={'row'}>
            <HStack
                display={{
                    base: 'none',
                    md: 'flex',
                }}
            >
                <Link href="/">Hem</Link>
                <Link href="/lintelfrar">Lintelfrar</Link>
                <Link href="/skapa">Skapa</Link>
            </HStack>
            {data?.user ? (
                <Link href="/api/auth/logout">Logga ut</Link>
            ) : (
                <Link href="/login">Logga in</Link>
            )}
        </Stack>
    );
}

Is this not a thing? It does not react to me resizing the window