fyb/ugurgaleri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename dropdown to drawer and redo toggle mechanism

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-28 00:34:39 +03:00
parent 2c69d7a87f
commit 0b5df35dbf
2 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
resources/css/main.scss
View File

@@ -85,16 +85,18 @@ a {
} }
} }
.dropdown { #drawer {
position: fixed; position: fixed;
top: 0;
right: 0;
z-index: 2; z-index: 2;
background: variables.$cg_drawer; background: variables.$cg_drawer;
width: 100%; width: 0;
height: 90vh; height: 90vh;
-webkit-animation: drawer-open 550ms; display: flex;
animation: drawer-open 550ms;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
transition: width 500ms;
.dropdown-nav-item { .dropdown-nav-item {
position: relative; position: relative;
@@ -132,6 +134,12 @@ a {
} }
} }
&.expanded {
width: 100%;
top: unset;
bottom: 0;
}
@include mixins.header_overflow2 { @include mixins.header_overflow2 {
height: calc(100vh - 45px); height: calc(100vh - 45px);
} }
@@ -258,6 +266,10 @@ a {
@include mixins.header_overflow2 { @include mixins.header_overflow2 {
min-height: calc(100vh - 45px); min-height: calc(100vh - 45px);
} }
&.hidden {
display: none;
}
} }
#content { #content {

29
resources/scripts/main.js
View File

@@ -1,5 +1,7 @@
const SCROLL_MIN = 100; const SCROLL_MIN = 100;
scroll_to_top = document.getElementById("scroll-to-top"); scroll_to_top = document.getElementById("scroll-to-top");
el_drawer = document.getElementById("drawer");
el_container = document.getElementById("container");
function checkScroll() { function checkScroll() {
if (document.documentElement.scrollTop > SCROLL_MIN || document.body.scrollTop > SCROLL_MIN) { if (document.documentElement.scrollTop > SCROLL_MIN || document.body.scrollTop > SCROLL_MIN) {
@@ -18,17 +20,16 @@ async function sleep(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds)); return new Promise(resolve => setTimeout(resolve, milliseconds));
} }
let dropdown = document.getElementsByClassName('dropdown')[0];
let navitems = document.getElementsByClassName('dropdown-nav-item'); let navitems = document.getElementsByClassName('dropdown-nav-item');
function showDropdown() { function showDropdown() {
dropdown.classList.remove('hidden'); el_drawer.classList.remove('hidden');
dropdown.classList.add('flex'); el_drawer.classList.add('flex');
} }
function hideDropdown() { function hideDropdown() {
dropdown.classList.remove('flex'); el_drawer.classList.remove('flex');
dropdown.classList.add('hidden'); el_drawer.classList.add('hidden');
} }
function showNavitems() { function showNavitems() {
@@ -46,21 +47,9 @@ function hideNavitems() {
} }
async function toggleDropdown() { async function toggleDropdown() {
if (dropdown.classList.contains('hidden')) { el_drawer.classList.toggle("expanded");
showDropdown(); await sleep(500);
await sleep(550); el_container.classList.toggle("hidden");
document.getElementById("container").style.display = "none";
await sleep(200);
showNavitems();
}
else {
document.getElementById("container").style.display = "grid";
dropdown.classList.add('dropdown_close_animation');
await sleep(550);
dropdown.classList.remove('dropdown_close_animation');
hideDropdown();
hideNavitems();
}
} }
window.addEventListener('load', checkScroll); window.addEventListener('load', checkScroll);