Having trouble with onCollapse

[boudewijnbout]

Heya! First of all I really want to point out that the work you put into this is really amazing!

I am trying to get a boolean value out of my onCollapse function and store that in a useState that I can retrieve in my sidebar component ( to make a collapseable effect for the nav items ).

import { useState, useRef, useEffect, PropsWithChildren, ReactNode } from 'react';
import { Link } from '@inertiajs/react';
import { User } from '@/types';
import Sidebar from '@/Components/Sidebar';
import MainNav from '@/Components/Cms/MainNav';
import { ThemeProvider } from '@/Components/ThemeProvider';

import {
    ResizableHandle,
    ResizablePanel,
    ResizablePanelGroup,
} from "@/Components/ui/resizable";

import {PanelOnCollapse} from "react-resizable-panels";

export default function Authenticated({ user, children }: PropsWithChildren<{ user: User, header?: ReactNode }>) {

    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

    const handleSidebarCollapse = (collapsed: boolean) => {
        setSidebarCollapsed(collapsed);
    };

    return (
        <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
            <ResizablePanelGroup direction="horizontal" className="h-screen" autoSaveId="persistence" id="group">

                    <ResizablePanel maxSize={13} minSize={13} collapsible={true} collapsedSize={0} className="min-w-[50px] transition-all duration-300 ease-in-out"  onCollapse={handleSidebarCollapse}>
                    <Sidebar collapsed={sidebarCollapsed} />
                </ResizablePanel>

                <ResizableHandle withHandle />

                <ResizablePanel defaultSize={75}>
                    <MainNav avatar={user.avatar} name={user.name} email={user.email} role_id={user.role_id} />
                    {children}
                </ResizablePanel>

            </ResizablePanelGroup>
        </ThemeProvider>
    );
}

But for some reason when I try to console.log my sidebarCollapsed value it will only return false on the first refresh and after that when I collapse my sidebar I only get "undefined"..

Any help is appreciated! :)

[boudewijnbout]

Fixed with a previous answer! :)

[bvaughn]

Glad you figured it out! Thanks for circling back and closing this issue :)