luceos
I have the menu switching on/off easily enough, I just get it to check a javascript setting that I pass from the extension and the session to see if the user is logged in or not
extend.php
(new Extend\Settings())
->default('madeyedeer-pallet-theme.show_side_nav_to_guests', true)
->serializeToForum('showSideNavToGuests', 'madeyedeer-pallet-theme.show_side_nav_to_guests', 'boolval'),
partial Sidebar.js
/**
* The `Sidebar` component displays sidebar on the Forum Application.
*/
export default class Sidebar extends Component {
view() {
const user = app.session.user;
if (app.forum.attribute('showSideNavToGuests') === false && !user) return;
// ... code here to inject the menu
This bit works fine. The issue is the side nav menu has "position: fixed" on it, so we need to add some padding to App-content so it doesn't overlap. When the menu is switched off, the padding always stays, so I was trying to manage that using LESS variables - also wanted to see how it would go so I could set more variables for things like colours and other styles based on backend logic for future extensions/features.
I'm using middleware to do this
extend.php
(new Extend\Middleware('forum'))
->add(PalletThemeMiddleware::class),
src/Middleware/PalletThemeMiddleware.php
public function process(ServerRequestInterface $request, RequestHandlerInterface $handler): ResponseInterface
{
$settings = $this->container->make(SettingsRepositoryInterface::class);
$actor = $request->getAttribute('actor');
$isGuest = $actor ? $actor->isGuest() : true;
$showSideNavToGuests = $settings->get('madeyedeer-pallet-theme.show_side_nav_to_guests');
$showSideNav = ($showSideNavToGuests == '1' || !$isGuest) ? 'true' : 'false';
$this->container->resolving('flarum.assets.forum', function (Assets $assets) use ($showSideNav) {
$assets->css(function (SourceCollector $sources) use ($showSideNav) {
$sources->addString(function () use ($showSideNav) {
return "@show-side-nav: {$showSideNav};";
});
});
});
return $handler->handle($request);
}
This injects some css in the same way the custom css that you can enter on the admin/appearance screen is loaded, so this allows LESS variables to come through, in this case @show-side-nav is either 'true' or 'false' (these need to be strings)
and then client-side code...
- default the variable to true - otherwise we have issues saving custom css in admin/appearance saying the variable doesn't exist
- set up a mixin to set the column width 280px or 0 (hide)
- add the column width to screen-desktop as it was causing issues on tablets, needs to switch down to "tablet" view at whatever the desktop width was + the side column
- set padding on App-content
App.less
@show-side-nav: true;
.set-left-column(@show-side-nav);
.set-left-column(true) {
@left-column: 280px;
}
.set-left-column(false) {
@left-column: 0;
}
@screen-desktop: 992px + @left-column;
.App-content {
border: 0;
@media @desktop-up {
padding-left: @left-column;
}
}
This should work as long as when @show-side-nav comes through from our middleware it is set after this code, as LESS will take the later values over the previously defined ones.
This is pretty much how I figured the "dark mode" setting works in the core Flarum code, with @config-dark-mode
flarum/core/less/common/variables.less
@config-dark-mode: false;
// Derive the primary/secondary colors from the config variables. In dark mode,
// we make the user-set colors a bit darker, otherwise they will stand out too
// much.
.define-colors(@config-dark-mode);
.define-colors(false) {
@primary-color: @config-primary-color;
@secondary-color: @config-secondary-color;
@body-bg: @body-bg-light;
...
}
.define-colors(true) {
@primary-color: @config-primary-color;
@secondary-color: @config-secondary-color;
@body-bg: @body-bg-dark;
...
}
This is all managed in flarum/core/src/Frontend/FrontendServiceProvider.php - I might be able to find other methods of setting the variable though, or it might end up being a different method entirely.
Or I might just remove the feature as it's a bit weird anyway - haha. Depends on how many people actually want it.
