deblan/side_menu
deblan/side_menu
3
6
Fork 5
Code Issues 6 Pull requests 11 Projects Releases 119 Wiki Activity

poc #21: add a fixed menu on the left

Browse source
This commit is contained in:
Simon Vieille 2020-09-02 19:09:37 +02:00
parent 2fc9a4effe
commit 361ad9211c
Signed by: deblan
GPG key ID: 03383D15A1D31745
2 changed files with 86 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
templates/css/stylesheet.php
View file

@ -114,3 +114,43 @@
font-size: 16px;
}
<?php endif; ?>
<?php if (true): ?>
#header, body {
width: calc(100% - 50px) !important;
}
body {
position: absolute;
left: 50px;
}
#side-menu {
display: block;
}
.side-menu-apps-list {
top: 49px;
}
#side-menu, .side-menu-header, .side-menu-apps-list {
width: 50px;
}
#side-menu .side-menu-app-text, #header .side-menu-opener, .side-menu-logo {
display: none;
}
#side-menu.open, #side-menu.open .side-menu-apps-list, #side-menu.open .side-menu-header {
width: 100%;
}
#side-menu:hover, #side-menu:hover .side-menu-apps-list, #side-menu:hover .side-menu-header{
width: 100%;
}
#side-menu.open .side-menu-app-text, #side-menu:hover .side-menu-app-text {
display: inline;
}
<?php endif; ?>

46
templates/js/script.php
View file

@ -20,6 +20,8 @@
if (apps.length === 0) {
sideMenu.removeClass('open')
sideMenuOpener.addClass('hide')
sideMenu.remove()
body.style.left = 0;
} else {
sideMenuOpener.removeClass('hide')
}
@ -109,4 +111,48 @@
<?php require_once __DIR__.'/_topMenuApps.js'; ?>
<?php endif; ?>
window.setTimeout(function() {
var elements = document.querySelectorAll('*');
var fixedElements = []
for (var i in elements) {
var element = elements[i]
if (typeof element !== 'object') {
continue
}
var position = window.getComputedStyle(element, null).getPropertyValue('position');
if (position !== 'fixed') {
continue
}
if (element.getAttribute('id') === 'header') {
continue
}
if (element.getAttribute('id') === 'side-menu') {
continue
}
fixedElements.push(element)
}
window.setTimeout(function() {
for (var i in fixedElements) {
var element = fixedElements[i]
var value = window.getComputedStyle(element, null).getPropertyValue('left')
if (value === 'initial') {
continue
}
element.style.setProperty('left', 'initial')
element.style.setProperty('transform', 'translateX(' + value + ')')
}
}, 100);
}, 500);
})();