#{menuItemLabel}
$of _
-
-
diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius
index cc8fb04a8..3fd0f7d69 100644
--- a/templates/widgets/asidenav.julius
+++ b/templates/widgets/asidenav.julius
@@ -3,83 +3,7 @@
window.utils = window.utils || {};
- // Defines a function to turn an element into an interactive aside-navigation.
- // If the screen is smaller than 999px the navigation is automatically
- // collapsed - even when dynamically resized (e.g. switching from portatit
- // to landscape).
- // The can user may also manually collapse and expand the navigation by
- // using the little arrow at the bottom.
- window.utils.aside = function(asideEl) {
- var collapsed = false;
- var collClass = 'main__aside--collapsed';
- // animClass used to enable transitions only when needed so that
- // (potentially happening) initial collapse of the asidenav
- // goes unnoticed by the user.
- var animClass = 'main__aside--transitioning';
- var hoveringAboveCollapsedNav = false;
-
- init();
- function init() {
- var collLS = window.localStorage.getItem('asidenavCollapsed') === 'true';
- if (document.body.getBoundingClientRect().width < 999 || collLS) {
- asideEl.classList.add(collClass);
- collapsed = true;
- }
- addListener();
- }
-
- function check() {
- if (collapsed && !hasCollapsedClass() || !collapsed && hasCollapsedClass()) {
- asideEl.classList.add(animClass);
- asideEl.classList.toggle(collClass, collapsed);
- window.localStorage.setItem('asidenavCollapsed', collapsed);
- }
- }
-
- function hasCollapsedClass() {
- return asideEl.classList.contains(collClass);
- }
-
- function addListener() {
-
- asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
- collapsed = !collapsed;
- check();
- }, false);
-
- asideEl.addEventListener('transitionend', function(event) {
- if (event.propertyName === 'opacity') {
- asideEl.classList.remove(animClass);
- }
- }, false);
-
- window.addEventListener('resize', function() {
- collapsed = document.body.getBoundingClientRect().width < 999;
- check();
- }, false);
-
- asideEl.addEventListener('mouseover', function(event) {
- if (!hasCollapsedClass()) {
- return false;
- }
- hoveringAboveCollapsedNav = true;
- window.setTimeout(function() {
- if (hoveringAboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
- asideEl.classList.add('pseudo-hover');
- }
- }, 200);
- }, false);
-
- asideEl.addEventListener('mouseleave', function(event) {
- hoveringAboveCollapsedNav = false;
- window.setTimeout(function() {
- if (!hoveringAboveCollapsedNav) {
- asideEl.classList.remove('pseudo-hover');
- }
- }, 200);
- }, false);
- }
- };
+ window.utils.aside = function(asideEl) { };
})();
document.addEventListener('DOMContentLoaded', function() {
@@ -95,7 +19,4 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
- // TODO: make it swipeable on mobile and narrower
- // utils.aside(asidenavEl);
-
});
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 01dbae16d..5db72152f 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -158,10 +158,11 @@
.asidenav__box-title {
width: 50px;
- padding: 1px;
font-size: 18px;
text-align: center;
- margin-bottom: 0;
+ padding: 10px 1px;
+ margin: 0;
+ background-color: var(--color-darker);
}
.asidenav__link-shorthand {