Commit 19b1821b authored by onny's avatar onny
Browse files

menu style enhancements

parent aa4bca6f
......@@ -74,6 +74,7 @@ main .sidebar {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 150px;
background-color: white;
}
main .content {
......@@ -122,6 +123,11 @@ table th {
/* hide sidebar */
}
.sidebar {
position: absolute;
width: 200px;
margin-top: -10px;
box-shadow: 12px 0 15px -4px #d2cdcd, -12px 0 15px -4px #d2cdcd;
padding: 20px;
display: none;
}
}
......
......@@ -47,6 +47,7 @@
flex: 1;
text-align: center;
margin-left: -30px;
display: none;
}
.search .noBorder {
......@@ -87,6 +88,10 @@
display: none;
}
.searchArea .icon {
font-size: 18px;
}
.searchArea .inputField:hover .search .logo-text {
display: none;
}
......@@ -201,8 +206,8 @@
}
.dropdown-login {
margin-top: 24px;
left: -160px;
margin-top: 22px;
left: -151px;
width: 200px;
}
......@@ -214,8 +219,8 @@
}
.dropdown-lang {
margin-top: 24px;
left: -25px;
margin-top: 35px;
left: -30px;
width: 170px;
}
......@@ -241,7 +246,7 @@
.logo {
display: none;
}
.search .logo-text {
.search .logo-text:not(.hide) {
display: flex;
}
}
......
......@@ -12,6 +12,11 @@ function toggle_search(state) {
searchLogo = document.querySelector('.search .logo-text');
searchLogo.classList.add('hide');
if (window.screen.width <= 760) {
burgerMenu = document.getElementsByClassName("menu")[0];
burgerMenu.classList.add('hide');
};
} else {
/* close search box */
searchMenu = document.getElementsByClassName("search")[0];
......@@ -26,6 +31,11 @@ function toggle_search(state) {
searchLogo = document.querySelector('.search .logo-text');
searchLogo.classList.remove('hide');
if (window.screen.width <= 760) {
burgerMenu = document.getElementsByClassName("menu")[0];
burgerMenu.classList.remove('hide');
};
}
}
......@@ -36,8 +46,6 @@ document.onkeydown = function(evt) {
var searchFocused = (document.activeElement === inputField);
var loginFocused = document.getElementsByClassName("loginOverlay")[0].classList.contains("showFlex");
console.log(loginFocused);
if (evt.keyCode == 27 && searchFocused) {
toggle_search(false);
}
......@@ -64,14 +72,14 @@ document.addEventListener("DOMContentLoaded", function() {
if (event.target.closest('.lang')) {
document.getElementById("menu-lang").classList.toggle("show");
document.getElementsByClassName("lang")[0].classList.toggle("active");
arrowIcon = document.getElementsByClassName('fa-chevron-down')[0];
arrowIcon = document.getElementsByClassName('ion-ios-arrow-down')[0];
if (arrowIcon) {
arrowIcon.classList.remove('fa-chevron-down');
arrowIcon.classList.add('fa-chevron-up');
arrowIcon.classList.remove('ion-ios-arrow-down');
arrowIcon.classList.add('ion-ios-arrow-up');
} else {
arrowIcon = document.getElementsByClassName('fa-chevron-up')[0];
arrowIcon.classList.remove('fa-chevron-up');
arrowIcon.classList.add('fa-chevron-down');
arrowIcon = document.getElementsByClassName('ion-ios-arrow-up')[0];
arrowIcon.classList.remove('ion-ios-arrow-up');
arrowIcon.classList.add('ion-ios-arrow-down');
}
} else {
langBtn = document.getElementsByClassName("lang")[0];
......@@ -86,10 +94,10 @@ document.addEventListener("DOMContentLoaded", function() {
openDropdown.classList.remove('show');
}
}
arrowIcon = document.getElementsByClassName('fa-chevron-up')[0];
arrowIcon = document.getElementsByClassName('ion-ios-arrow-up')[0];
if (arrowIcon) {
arrowIcon.classList.remove('fa-chevron-up');
arrowIcon.classList.add('fa-chevron-down');
arrowIcon.classList.remove('ion-ios-arrow-up');
arrowIcon.classList.add('ion-ios-arrow-down');
};
};
......@@ -120,6 +128,22 @@ document.addEventListener("DOMContentLoaded", function() {
document.getElementsByClassName("loginOverlay")[0].classList.toggle("showFlex");
};
if (event.target.matches('.menu') && window.screen.width <= 1000) {
console.log("catched");
sidebar = document.getElementsByClassName("sidebar")[0]
if (sidebar.classList.contains('active')) {
sidebar.classList.remove('active');
sidebar.classList.remove('show');
} else {
sidebar.classList.add('active');
sidebar.classList.add('show');
}
} else {
sidebar = document.getElementsByClassName("sidebar")[0]
sidebar.classList.remove('active');
sidebar.classList.remove('show');
};
}
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment