Fix admin left menu dynamic visibility

[mvorisek]

Fix issue intoduced in #1112. Visibility is controlled by isMenuLeftVisible prop and needs to be not always forced to visible.

[codecov]

Codecov Report

Merging #1157 into develop will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             develop    #1157   +/-   ##
==========================================
  Coverage      75.77%   75.77%           
  Complexity      2539     2539           
==========================================
  Files            130      130           
  Lines           6230     6230           
==========================================
  Hits            4721     4721           
  Misses          1509     1509           

Impacted Files	Coverage Δ	Complexity Δ
src/Layout/Admin.php	89.65% <100.00%> (ø)	11.00 <0.00> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 24df58c...a3dae7e. Read the comment docs.

[ibelar]

let's merge #1151 first and see what can be done after.
Bringing the z-index lower for the left menu should fix the border state in #1156

[mvorisek]

This visibility fix is unrelated with any current PRs!

[mvorisek]

@ibelar PR is complete and fully working, please check and merge

[ibelar]

Look good now!

[mvorisek]

@ibelar it does fixed the original switching behaviour, but if default to on, the menu "flashes" between loads which degrades the UX. Can you fix this in server-side render?

[georgehristov]

I have below code in my custom layout to control the state of navigation menu. It basically persists the state in the session. So basically adding the SessionTrait to Layout and using following code.
Good solution? Shall I make a PR?

$this->isMenuLeftVisible = $this->learn('menu', $this->isMenuLeftVisible);
        
$this->burger->add(['Icon',	'content'])->on('click', [
        		(new jQuery('.ui.left.sidebar'))->toggleClass('visible'),
        		(new jQuery('.epesi-logo'))->toggleClass('expanded'),
        		(new jQuery('body'))->toggleClass('atk-leftMenu-visible'),
        		$this->burger->add('jsCallback')->set(function($j, $visible) {
        			$this->memorize('menu', filter_var($visible, FILTER_VALIDATE_BOOLEAN));
        		}, [$this->menuLeft->js(true)->hasClass('visible')])
)])
]);

[mvorisek]

@georgehristov it is not about persisting the state - it is about adding/removing visible class on the server side thus the browser can render the menu immediatelly which will prevent the flashing introduced by solving this in the JS - which takes some time before the JS is triggered/applied. Your code does not solve this (not-using the JS).

[georgehristov]

I see now. I do not have this problem as I use routing where only the content area of the page is updated on page change.

[mvorisek]

@georgehristov do you solve there a history? #1191

[georgehristov]

Yes, there is a browser history. I have not had problem with that.

[mvorisek]

I see now. I do not have this problem as I use routing where only the content area of the page is updated on page change.

I am lost, you either reload the full page - and this issue is affecting you too - or you use JS to reload the inner component, but then need the history API.