<h2 class="info">Full Page Navigation</h2>

<button class="nav-button">
	<div class="line line__1"></div>
	<div class="line line__2"></div>
	<div class="line line__3"></div>
</button>

<nav>
	<div class="nav__background"></div>
	<ul>
		<li><a href="#0">Home</a></li>
		<li><a href="#0">About</a></li>
		<li><a href="#0">Contact</a></li>
		<li><a href="#0">Dance</a></li>
	</ul>
</nav>

<div class="support">
	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
	<a href="https://codepen.io/dev_loop/" target="_blank"><i class="fab fa-codepen"></i></a>
</div>

@mixin flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-image: url("https://source.unsplash.com/lfyKGQWEbew/1200x700");
	background-size: cover;
	font-family: "montserrat";
	z-index: 2;
	&::after{
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.3);
	}
}

a {
	text-decoration: none;
	text-transform: uppercase;
	user-select: none;
}

button {
	background: none;
	border: none;
	&:focus {
		outline: none;
	}
}

h2.info {
	position: absolute;
	font-size: 4.5vw;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	pointer-events: none;
	user-select: none;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
}

.nav-button {
	$width: 25px;
	$transition-time: 350ms;
	position: absolute;
	top: 20px;
	right: 20px;
	width: #{$width + 10px};
	height: #{$width + 10px};
	@include flex-center();
	flex-direction: column;
	cursor: pointer;
	z-index: 12;
	&.close {
		.line {
			&__1 {
				transform: rotate(45deg) translate(2px, -3px);
			}
			&__2 {
				transform: rotate(-45deg);
			}
			&__3 {
				transform: rotate(45deg) translate(-2px, 3px);
			}
		}
	}
	.line {
		width: $width;
		background: #fff;
		height: 2px;
		margin: 3px 0;
		transition: all $transition-time cubic-bezier(0.9, 0, 0.33, 1);
		&__1 {
			width: $width;
			transform-origin: left;
		}
		&__2 {
			width: $width;
			transform-origin: center;
		}
		&__3 {
			width: $width;
			transform-origin: right;
		}
	}
}

nav {
	width: 100%;
	height: 100%;
	@include flex-center();
	z-index: 10;
	ul {
		position: relative;
		height: 600px;
		width: 300px;
		li {
			position: absolute;
			width: 100%;
			list-style: none;
			text-align: center;
			left: 50%;
			transform: translate(-50%, -50%);
			overflow: hidden;
			z-index: 10;
			@for $i from 1 through 4 {
				&:nth-child(#{$i}) {
					top: #{$i * 20%};
				}
			}
			a {
				position: relative;
				font-size: 2.8rem;
				-webkit-text-stroke: 2px #fff;
				color: transparent;
				font-weight: bold;
				letter-spacing: 2px;
				opacity: 0;
				&::after {
					position: absolute;
					content: attr(data-text);
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					color: #fff;
					// clip-path: polygon(0% 0, 0% 0px, -25% 100%, 0% 100%);
					clip-path: polygon(100% 100%, 100% 0px, 100% 100%, 0% 100%);
					transition: all 250ms ease;
					pointer-events: none;
				}
				&:hover {
					&::after {
						// clip-path: polygon(0% 0, 125% 0px, 100% 100%, 0% 100%);
						clip-path: polygon(0% 0%, 100% 0px, 100% 100%, 0% 100%);
					}
				}
			}
		}
	}

	.nav__background {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(34, 34, 34, 0.85);
		backdrop-filter: blur(5px);
		transform: scaleY(0);
		z-index: 10;
	}
}

.support{
	position: fixed;
	right: 10px;
	bottom: 10px;
	display: flex;
	z-index: 8;
	a{
		margin: 0 10px;
		color: #fff;
		font-size: 2rem;
		transition: all 400ms ease;
		&:hover{
			color: rgba(255, 255, 255, 0.35);
		}
	}

}

console.clear();

const listEls = Array.from(document.querySelectorAll("li"));
const button = document.querySelector(".nav-button");
const links = Array.from(document.querySelectorAll("li a"));
const listItems = Array.from(document.querySelectorAll("li"));

let menuActive = false;
let mousePos = { x: 0, y: 0 };

links.forEach(item => {
	innerText = item.innerText;
	item.setAttribute("data-text", innerText);
});

button.addEventListener("click", () => {
	menuActive = !menuActive;
	button.classList.toggle("close");
	animateOpenCloseMenu();
});
function animateOpenCloseMenu() {
	let navBG = document.querySelector(".nav__background");
	let tl = gsap.timeline({ defaults: { ease: "power3.out", duration: 0.45 } });
	if (menuActive) {
		tl.fromTo(
			navBG,
			{ scaleY: 0, transformOrigin: "bottom" },
			{ scaleY: 1, transformOrigin: "top" }
		);
		tl.fromTo(links, { opacity: 0, top: "100%" }, { opacity: 1, top: "0%", stagger: 0.05, delay: -0.35 });
	} else {
		tl.fromTo(links, { opacity: 1, top: "0%" }, { opacity: 0, top: "100%", stagger: -0.05 });
		tl.fromTo(
			navBG,
			{ scaleY: 1, transformOrigin: "top" },
			{ scaleY: 0, transformOrigin: "bottom", delay: -0.35 }
		);
	}
}
animateOpenCloseMenu();

const options = {
	distanceToMove: 15,
};
function updatePos(el) {
	let dist = calculateDistance(el).distance;
	let angle = calculateDistance(el).angle;
	if (dist < 80) {
		options.distanceToMove = dist;
		gsap.to(el, 0.3, {
			x: (Math.cos(angle) * options.distanceToMove) / 2,
			y: (Math.sin(angle) * options.distanceToMove) / 12,
		});
	} else {
		gsap.to(el, 0.3, {
			x: 0,
			y: 0,
		});
	}
}

function calculateDistance(el) {
	let dx = mousePos.x - (el.getBoundingClientRect().left + el.offsetWidth / 2);
	let dy = mousePos.y - (el.getBoundingClientRect().top + el.offsetHeight / 2);
	let angle = Math.atan2(dy, dx);
	let distance = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
	return { distance, angle };
}

document.body.addEventListener("mousemove", e => {
	mousePos.x = e.x;
	mousePos.y = e.y;
	if (menuActive) {
		listEls.forEach(listEl => {
			updatePos(listEl);
		});
	}
});