adrianm Looks like the method I tried is really unreliable sorry. I am setting a variable in LESS (CSS pre-processor) that should turn the side menu off and remove the padding for anyone that is logged out and with the "show side nav for guests" turned off. I guess that the variable setting is a bit too flaky to rely on as the order that these are declared is crucial. There could also be some weirdness going on with caching that holds onto values sometimes but it seems inconsistent.
You have to understand that the CSS applies to all users. CSS is never a file specific per user. Sometimes CSS is duplicated with minor differences, like is this case with night/dark mode.
What usually happens if an element exists that needs to be different to members vs guests, is that the body element has a class to distinguish the difference; eg <body class="LoggedIn">
for instance. Flarum has this property on the div
with the id app
instead, like scrolled
.
So how could you go about hiding the pane for guests then? First off, I don't know for sure this will work in its entirey, but the first step should be to add this LoggedIn
or alternatively a IsGuest
class to the app
element.
Adding authentication state to HTML
... WIP ..
Less for hiding elements for only Guests
#app:not(.LoggedIn) #drawer {display: hidden !important;}
or using IsGuest
#app.LoggedIn #drawer {display: hidden !important;}