in the first code, you'd need to replace useState with another solution to handle the hover. and in the second code using usePathname and useTheme() will make you need to flag it as use client too

bext bet is to isolate anything using these functions/hooks into client components and keep everything else as server components

I feel like that would complicate the workflow a bit too much for a beginner like myself though. I think it would be better to leave these two alone then, at least for now.

Since these components are also pretty small I don't even think they use that many resources anyway, I mean it's just a sidebar with some buttons. Maybe if it would add alot of time to the loadtime like 0.5 seconds more or so then it would be worth splitting things up but since most of the sidebar's content is components which require the client stuff I don't see what difference it would make, unless loading a rectangle saves lots of time up.

I'm just speaking out of my head here, it may be worth it but I don't have enough experience to tell.

I doubt this will even impact your site speed at all

Thank you very much. I've wrote it with the help of Chat GPT and a lot of headache 😄

My pleasure. Good luck with the rest of your app

Thank you very much! 🙏🏻

Mark this as solved if you wouldn’t mind

I have no idea how to do that.

Please let me know if you know

Someone else did it. Thanks

Glad to hear that. I will close this now.