wedmaniac•15mo ago

How do I rerender my island after a signal change?

Hi there im trying to rerender this sidebar navigation when you toggle it, making it change size and changing the button but nothing really happens! Thx in advance for your input!

import { useSignal } from '@preact/signals';

interface SidebarNavProps {
    loggedIn: boolean;
}

export default function SidebarNav({ loggedIn }: SidebarNavProps) {
    const isSidebarOpen = useSignal(false);
    const toggleSidebar = () => {
        isSidebarOpen.value = !isSidebarOpen.value;
        console.log(isSidebarOpen.value);
    };

    return (
        <div class={`relative ${isSidebarOpen ? 'w-64' : 'w-16'} transition-all ease-in-out duration-300 overflow-hidden z-10 h-screen`}>
            <button onClick={toggleSidebar} class={`absolute top-1/2 text-black rounded-full focus:outline-none z-20`}>
                {isSidebarOpen ? '←' : '→'}
            </button>

            <div class={`absolute top-0 left-0 h-full p-4 bg-gray shadow-lg rounded-r-md ${isSidebarOpen ? 'block' : 'hidden'}`}>
            {loggedIn ? (
                <>
                <a href="/dashboard" class="block p-2 text-blue-500">Dashboard</a>
                <a href="/logout" class="block p-2 text-blue-500">Logout</a>
                </>
            ) : (
                <>
                <a href="/login" class="block p-2 text-blue-500">Login</a>
                <a href="/register" class="block p-2 text-blue-500">Register</a>
                </>
            )}
            </div>
        </div>
    );
}

import { useSignal } from '@preact/signals';

interface SidebarNavProps {
    loggedIn: boolean;
}

export default function SidebarNav({ loggedIn }: SidebarNavProps) {
    const isSidebarOpen = useSignal(false);
    const toggleSidebar = () => {
        isSidebarOpen.value = !isSidebarOpen.value;
        console.log(isSidebarOpen.value);
    };

    return (
        <div class={`relative ${isSidebarOpen ? 'w-64' : 'w-16'} transition-all ease-in-out duration-300 overflow-hidden z-10 h-screen`}>
            <button onClick={toggleSidebar} class={`absolute top-1/2 text-black rounded-full focus:outline-none z-20`}>
                {isSidebarOpen ? '←' : '→'}
            </button>

            <div class={`absolute top-0 left-0 h-full p-4 bg-gray shadow-lg rounded-r-md ${isSidebarOpen ? 'block' : 'hidden'}`}>
            {loggedIn ? (
                <>
                <a href="/dashboard" class="block p-2 text-blue-500">Dashboard</a>
                <a href="/logout" class="block p-2 text-blue-500">Logout</a>
                </>
            ) : (
                <>
                <a href="/login" class="block p-2 text-blue-500">Login</a>
                <a href="/register" class="block p-2 text-blue-500">Register</a>
                </>
            )}
            </div>
        </div>
    );
}

2 Replies

wedmaniacOP•15mo ago

I literally found the solution while writing this post, I need to use isSidebarOpen.value instead of isSidebarOpen in the conditional html! However I decided to post it anyway if someone finds them in the same situation as me!:)

marvinh.•15mo ago

Yeah useSignal returns a signal not the value itself