This commit is contained in:
maaa 2023-08-05 01:29:53 +02:00
parent cf450d063f
commit c99ac8acd2
3 changed files with 62 additions and 1 deletions

View File

@ -21,12 +21,52 @@ body {
border-bottom-width: 1px;
}
.burgerDropdown {
position: fixed;
z-index: 2;
left: 7px;
top: 30px;
width: 160px;
height: 90px;
background-color: rgba(233, 233, 233, 0.5);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: solid;
border-color: #dadada;
border-width: 1px;
border-radius: 8px;
}
.burgerDropdown a {
position: absolute;
width: calc(100% - 14px - 4px - 7px);
color: black;
background-color: #ffffff;
height: 35px;
line-height: 35px;
margin: 7px;
padding-left: 7px;
border: solid;
border-color: #dadada;
border-width: 1px;
border-radius: 8px;
font-size: 15px;
text-decoration: none;
}
.topBar p {
display: inline-block;
}
.topBar .logo {
padding-left: 12px;
cursor: pointer;
}
.topBar .usernameBox {

View File

@ -27,6 +27,8 @@ let notesDiv = document.getElementById("notesDiv")
let newNote = document.getElementById("newNote")
let noteBox = document.getElementById("noteBox")
let loadingStuff = document.getElementById("loadingStuff")
let burgerDropdown = document.getElementById("burgerDropdown")
let burgerButton = document.getElementById("burgerButton")
for (let i = 0; i < 40; i++) {
notesDiv.appendChild(loadingStuff.cloneNode())
@ -290,3 +292,17 @@ newNote.addEventListener("click", (event) => {
});
}
});
document.body.addEventListener("click", (event) => {
if (event.clientX > 100) {
burgerDropdown.classList.add("hidden")
}
if (event.clientY > 50) {
burgerDropdown.classList.add("hidden")
}
});
burgerButton.addEventListener("click", (event) => {
burgerDropdown.classList.remove("hidden")
burgerDropdown.style.left = String(event.clientX) + "px"
burgerDropdown.style.top = String(event.clientY) + "px"
});

View File

@ -14,7 +14,7 @@
<body>
<div class="topBar">
<p class="logo">burgernotes</p>
<p class="logo" id="burgerButton">burgernotes</p>
<p id="usernameBox" class="usernameBox"></p>
</div>
@ -25,6 +25,11 @@
</div>
</div>
<div class="burgerDropdown hidden" id="burgerDropdown">
<a href="/">burgernotes</a><br><br>
<a href="/" class="hidden">:3</a>
</div>
<div id="optionsCoverDiv" class="optionsCoverDiv hidden">
<div class="optionsDiv">
<button class="exit" id="exitThing">X</button>