Open Snarloff opened 6 months ago
have you tried adding 'use client' to the sidebar wrapper ?!
have you tried adding 'use client' to the sidebar wrapper ?!
Yes! In all components too, but the same error
Could you replicate this out of the Playground @Snarloff ? I Have had some issues with The playground on the past. Maybe something related to config as Next 14 brings up some big changes over settings.
Could you replicate this out of the Playground @Snarloff ? I Have had some issues with The playground on the past. Maybe something related to config as Next 14 brings up some big changes over settings.
I replicated it in Playground and in my normal code and it gives this error :/
I having this issue too. Anyone made any progress yet?
This has something to do with the breakpoint. This is my workaround
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
A better workaround is to check for component mount since there is a mismatch in the classname for broken sidebar since the useEffect is done on client side render
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
return (mounted && (
<Sidebar> .... <Sidebar/>))
The "mounted" workaround was not preferable to me as there's an awkward second before the sidebar loads in. Instead I used CSS media queries to hide the sidebar on initial load when it is less than the breakpoint width
Same here. It falls into hydration issue:
Warning: Prop `className` did not match. Server: "ps-sidebar-root ps-rtl css-1jlhf24" Client: "ps-sidebar-root ps-broken ps-rtl css-1jlhf24"
It's also visible all the way without backdrop regardless of collapsed prop value.
"react-pro-sidebar": "^1.1.0", "react": "^18", "next": "14.2.2",
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
I use css variables, and this fixed the issues /// css file --sidebar-bg: rgba(255, 255, 255, 0.9); --sidebar-color: #607489; --sidebar-menu-icon: #0098e5; --sidebar-menu-disabled: #9fb6cf;
// jsx file const menuItemStyles: MenuItemStyles = useMemo( () => ({ root: { icon: { color: "var(--sidebar-menu-icon)",
color: "var(--sidebar-menu-disabled)",
},
},
SubMenuExpandIcon: {
color: "var(--sidebar-sub-menu-span-icon)",
},
...,
[collapsed]
);
Hello!
I have a bug in the package using it in Next.js version 14. The bug is that when entering the mobile device, the sidebar should start closed since it is responsive. However, as shown in the image, it starts open, not being responsive. I ran the sidebar by taking Playgroud.tsx and putting it in a Next project.
Screenshots
Running on
Windows 11 Next.js 14.1.0 Components declares with "use client"
I carried out the same test with Vite and it ran normally, being responsive.