poc #21: add a fixed menu on the left
This commit is contained in:
parent
2fc9a4effe
commit
361ad9211c
|
@ -114,3 +114,43 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
<?php endif; ?>
|
<?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; ?>
|
||||||
|
|
|
@ -20,6 +20,8 @@
|
||||||
if (apps.length === 0) {
|
if (apps.length === 0) {
|
||||||
sideMenu.removeClass('open')
|
sideMenu.removeClass('open')
|
||||||
sideMenuOpener.addClass('hide')
|
sideMenuOpener.addClass('hide')
|
||||||
|
sideMenu.remove()
|
||||||
|
body.style.left = 0;
|
||||||
} else {
|
} else {
|
||||||
sideMenuOpener.removeClass('hide')
|
sideMenuOpener.removeClass('hide')
|
||||||
}
|
}
|
||||||
|
@ -109,4 +111,48 @@
|
||||||
|
|
||||||
<?php require_once __DIR__.'/_topMenuApps.js'; ?>
|
<?php require_once __DIR__.'/_topMenuApps.js'; ?>
|
||||||
<?php endif; ?>
|
<?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);
|
||||||
})();
|
})();
|
||||||
|
|
Loading…
Reference in a new issue