Commit e69ac1e5 authored by onny's avatar onny
Browse files

added dropdown menu

parent 3b1c9a2c
......@@ -74,12 +74,12 @@ header > div {
}
.lang {
height:100%;
height: 100%;
display:flex;
justify-content:center;
align-items: center;
padding: 10px 30px;
padding: 0 25px;
border-right: 1px solid;
border-color: #d6d6d6;
......@@ -87,7 +87,11 @@ header > div {
}
.login {
padding: 10px 30px;
height: 100%;
display:flex;
justify-content:center;
align-items: center;
padding: 0px 25px;
cursor: pointer;
}
......@@ -101,6 +105,9 @@ header > div {
.fa {
font-size: 20px;
}
.fa-margin {
margin-right: 15px;
}
......@@ -108,6 +115,45 @@ input {
width: 100%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
margin-top: 24px;
left: -160px;
padding: 15px;
font-size: 13px;
color: #d2cdcd;
background-color: white;
box-shadow: 12px 0 15px -4px #d2cdcd, -12px 0 15px -4px #d2cdcd;
width: 200px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
padding: 5px;
}
.dropdown-content a:hover {
color: white;
background-color: #0027af;
}
.active {
box-shadow: 12px 0 15px -4px #d2cdcd, -12px 0 15px -4px #d2cdcd;
}
.show {display: block;}
main {
grid-row-start: 2;
grid-row-end: 2;
......
......@@ -130,3 +130,29 @@ var demo = new Vue({
};
}
});
document.addEventListener("DOMContentLoaded", function() {
window.onclick = function(event) {
if (event.target.matches('.login') || event.target.matches('.fa-user')) {
document.getElementById("menu-login").classList.toggle("show");
document.getElementsByClassName("login")[0].classList.toggle("active");
console.log(document.getElementsByClassName("login")[0]);
} else {
loginBtn = document.getElementsByClassName("login")[0];
if (loginBtn.classList.contains('active')) {
loginBtn.classList.remove('active');
};
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
});
......@@ -29,14 +29,25 @@
</div>
<div class='lang'>
<span class='icon'>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-down fa-margin"></i>
<span>En</span>
</span>
</div>
<div class='login'>
<span class='icon'>
<i class="fa fa-lock"></i>
{% if authenticated %}
<div class="dropdown">
<i class="fa fa-user"></i>
<div id="menu-login" class="dropdown-content">
ubezi@student.kit.edu
<hr>
<a href="#about">Logout</a>
</div>
</div>
{% else %}
<i class="fa fa-lock fa-margin"></i>
<span>Sign In</span>
{% endif %}
</span>
</div>
</div>
......
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