Update styling for ScrollArea dependent on URL
I have different styling on the mantine ScrollArea component dependent on whether the user is logged in.
setIsAuthenticated(!['/login', '/register', '/forgot-password', to].includes(path));
}, [location]);
const scrollAreaStyle = {
marginLeft: (!isAuthenticated) ? '0' : '300px',
height: (!isAuthenticated) ? '100vh' : 'calc(100vh - 60px)',
width: (!isAuthenticated) ? '100vw' : 'calc(100vw - 300px)',
overflow: 'hidden',
position: 'relative',
};
However this requires refreshing the page.
So far my attempts to use useEffect to trigger updates as the URL location changes have failed.
setIsAuthenticated(!['/login', '/register', '/forgot-password', to].includes(path));
}, [location]);
const scrollAreaStyle = {
marginLeft: (!isAuthenticated) ? '0' : '300px',
height: (!isAuthenticated) ? '100vh' : 'calc(100vh - 60px)',
width: (!isAuthenticated) ? '100vw' : 'calc(100vw - 300px)',
overflow: 'hidden',
position: 'relative',
};
However this requires refreshing the page.
So far my attempts to use useEffect to trigger updates as the URL location changes have failed.
