Can you determine devices viewport width in a server component?
Answered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
Maybe I can somehow read some info about devices width from headers?
I have a menu that should be visible on mobile devices and be hidden otherwise.
If I use useEffect to obtain devices width, I can see some delay, before useEffect changes state to show/hide menu
I have a menu that should be visible on mobile devices and be hidden otherwise.
If I use useEffect to obtain devices width, I can see some delay, before useEffect changes state to show/hide menu
Answered by Philippine Crocodile
You should not need Javascript in order to determine if a menu should be shown or not. Instead you should use CSS media queries. And if you want to determin if the mobile menu is open or not, then this is handled by local state
6 Replies
Philippine Crocodile
You should not need Javascript in order to determine if a menu should be shown or not. Instead you should use CSS media queries. And if you want to determin if the mobile menu is open or not, then this is handled by local state
Answer
Philippine Crocodile
const [isOpen, setIsOpen] = useState(false)those two in combination should be enough, you won't need the useEffect.
ps. the mobile menu will have to be a client component if you are using the App Router since you will be using useState.
Asiatic LionOP
Shouldn't useEffect sync state after first render?
First render state is null
And then in useEffect I check current screen size and set state to true or false
First render state is null
And then in useEffect I check current screen size and set state to true or false
Anyway, thank you. It's a lot easier than I thought)