portugalfuturista/elixir
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: Save sidebar state in local storage

Browse source
This commit is contained in:
Franciszek Stachura 2024-08-28 16:22:25 +02:00 committed by Théo Lebrun
parent ec37680f04
commit 0e9ff63c15
3 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/script.js
View file

@ -76,7 +76,9 @@ var tag = document.querySelector('.version em')
var openMenu = document.querySelector('.open-menu')
var wrapper = document.querySelector('.wrapper')
openMenu.onclick = tag.onclick = function (e) {
e.preventDefault()
e.preventDefault();
const hasShowMenu = document.documentElement.classList.contains('show-menu');
window.localStorage.setItem('show-sidebar', !hasShowMenu);
document.documentElement.classList.toggle('show-menu');
}
sidebar.onclick = function (e) {

3
static/style.css
View file

@ -1092,6 +1092,9 @@ main {
/* desktop */
@media screen and (min-width: 1000px) {
:root {
--is-widescreen: true;
}
.close-menu {
display: none;
}

13
templates/layout.html
View file

@ -17,7 +17,18 @@
<link rel="stylesheet" href="/static/style.css?v=7">
<link rel="stylesheet" href="/static/banner.css">
<link rel="stylesheet" href="/static/autocomplete.css">
<script>document.documentElement.className = 'js'</script>
<script>
document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js');
//NOTE: placing this here, instead of script.js makes the sidebar less likely to flash on navigation
const showSidebar = window.localStorage.getItem('show-sidebar');
const isWidescreen = getComputedStyle(document.documentElement).getPropertyValue('--is-widescreen') === 'true';
if (isWidescreen && (showSidebar === "true" || showSidebar === null)) {
// special class that opens the sidebar only on widescreen devices
document.documentElement.classList.add('show-menu');
}
</script>
</head>
<body>
<!--[if lte IE 9]>